/* Design tokens. Every colour, spacing and size used anywhere comes from here.
   No literal values scattered across the other stylesheets. */

:root {
  /* --- Colour: neutral scale ------------------------------------------- */
  --c-white: #ffffff;
  --c-gray-50: #f8fafc;
  --c-gray-100: #f1f5f9;
  --c-gray-200: #e2e8f0;
  --c-gray-300: #cbd5e1;
  --c-gray-400: #94a3b8;
  --c-gray-500: #64748b;
  --c-gray-600: #475569;
  --c-gray-700: #334155;
  --c-gray-800: #1e293b;
  --c-gray-900: #0f172a;

  /* --- Colour: brand ---------------------------------------------------- */
  /* La paleta de la marca. `--c-primary` es el azul del logotipo, así que el
     botón principal y el icono de la pestaña son el mismo azul: es lo que hace
     que una pantalla se reconozca antes de leerla. */
  --c-primary: #007bff;        /* Azul primario (marca) */
  --c-primary-hover: #0063cc;  /* El mismo, más oscuro, para el hover */
  --c-primary-light: #eef5ff;
  --c-primary-border: #b3d7ff;
  --c-brand-ink: #0b1f48;      /* Azul oscuro (principal) */
  --c-brand-accent: #00c6ff;   /* Azul claro (acentos) */
  --c-brand-soft: #f4f7fb;     /* Gris (soporte) */

  /* --- Colour: state ---------------------------------------------------- */
  --c-success: #15803d;
  --c-success-light: #f0fdf4;
  --c-success-border: #bbf7d0;

  --c-warning: #b45309;
  --c-warning-light: #fffbeb;
  --c-warning-border: #fde68a;

  --c-danger: #b91c1c;
  --c-danger-hover: #991b1b;
  --c-danger-light: #fef2f2;
  --c-danger-border: #fecaca;

  --c-info: #0369a1;
  --c-info-light: #f0f9ff;
  --c-info-border: #bae6fd;

  /* --- Semantic --------------------------------------------------------- */
  --bg-body: var(--c-gray-100);
  --bg-surface: var(--c-white);
  --bg-muted: var(--c-gray-50);
  --bg-hover: var(--c-gray-100);

  --text-primary: var(--c-gray-900);
  --text-secondary: var(--c-gray-600);
  --text-muted: var(--c-gray-500);
  --text-inverse: var(--c-white);

  --border-color: var(--c-gray-200);
  --border-strong: var(--c-gray-300);

  /* --- Typography ------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.55;

  /* --- Spacing (4px scale) ---------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Radius ----------------------------------------------------------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* --- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06);
  --shadow-md: 0 2px 8px -1px rgb(15 23 42 / 0.10);
  --shadow-lg: 0 10px 25px -5px rgb(15 23 42 / 0.12);

  /* --- Focus ring ------------------------------------------------------- */
  --focus-ring: 0 0 0 3px rgb(29 78 216 / 0.25);

  /* --- Layout ----------------------------------------------------------- */
  --header-height: 3.5rem;
  --sidebar-width: 15rem;
  /* 3.5rem de contenido; el hueco del indicador de inicio lo pone la propia
     barra con env(safe-area-inset-bottom), que en un iPhone 16 Pro son 34 px. */
  --bottom-nav-height: 3.5rem;
  --sidebar-width: 15rem;
  --content-max-width: 80rem;

  /* --- Motion ----------------------------------------------------------- */
  --transition-fast: 120ms ease;
}