/* ============================================================
   Gastillo — Design Tokens
   Colores (claro/oscuro), espaciado, radios, sombras, tipografía.
   Regla: los componentes SOLO usan estas variables, nunca hex.
   ============================================================ */

:root {
  /* Marca */
  --brand-turquoise: #14B8C4;        /* primario */
  --brand-turquoise-strong: #0E9AA6;
  --brand-purple: #7C5CFC;           /* secundario */
  --brand-purple-strong: #6446E6;
  --brand-gradient: linear-gradient(135deg, #14B8C4 0%, #7C5CFC 100%);

  /* Semánticos (semáforo) */
  --success: #1FBF75;   /* 🟢 vas bien */
  --warning: #F5A623;   /* 🟡 ajustado */
  --danger:  #F0506E;   /* 🔴 te pasas */

  /* Radios */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px;

  /* Espaciado (base 4px) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-8:48px; --s-10:64px;

  /* Sombras (suaves, estilo Apple) */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.06);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.12);

  /* Tipografía */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-num: "SF Mono", "Roboto Mono", ui-monospace, monospace; /* cifras tabulares */

  /* Layout */
  --content-max: 480px;       /* móvil centrado */
  --content-max-desktop: 1100px;
  --header-h: 56px;
  --bottomnav-h: 64px;

  /* Transiciones */
  --t-fast: 150ms ease-out;
  --t-med: 250ms ease-out;

  /* Z-index */
  --z-nav: 50;
  --z-fab: 60;
  --z-modal: 100;
  --z-toast: 200;
}

/* TEMA CLARO (por defecto) */
:root,
[data-theme="light"] {
  --bg: #F6F7FB;
  --surface: #FFFFFF;
  --surface-2: #F0F2F8;
  --surface-translucent: rgba(255,255,255,.72);
  --text: #11181C;
  --text-muted: #5B6470;
  --border: #E5E8F0;
  --primary: var(--brand-turquoise);
  --primary-strong: var(--brand-turquoise-strong);
  --on-primary: #FFFFFF;
  --ring: rgba(20,184,196,.30);
}

/* TEMA OSCURO */
[data-theme="dark"] {
  --bg: #0C0E14;
  --surface: #161A24;
  --surface-2: #1E2330;
  --surface-translucent: rgba(22,26,36,.72);
  --text: #ECEFF5;
  --text-muted: #9AA4B2;
  --border: #262C3A;
  --primary: #2DD3DF;       /* turquesa un punto más brillante en oscuro */
  --primary-strong: #14B8C4;
  --on-primary: #06222A;
  --ring: rgba(45,211,223,.32);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
}