/* ============================================================
   Prometheus Health & Education — Design Tokens
   ------------------------------------------------------------
   Fuente de verdad para color, tipografia, espaciado, layout,
   motion y accesibilidad. Generado por /gamma:designer a partir
   de Alpha (sn_business_profile + sn_brand_guidelines) y el
   styles.css existente del repo.

   Reglas de uso:
   - SIEMPRE usar los aliases semanticos (--bg-page, --text-primary,
     --link, etc) en componentes y templates. NO usar los crudos
     (--color-navy-700) salvo cuando definas un nuevo alias.
   - Mobile-first: defaults son mobile, media queries son min-width.
   - Performance budget: este archivo debe quedar < 8 KB minificado.
   ============================================================ */

:root {
  /* =================================================================
     COLOR — Paleta primaria (navy institucional)
     Alpha guidelines: #1E3A5F (primario), #0F2A47 (dark)
     Escala 10 tonos derivada por interpolacion contra blanco/negro.
     ================================================================= */
  --color-navy-50:  #f1f5fa;
  --color-navy-100: #dbe5f0;
  --color-navy-200: #b4c6db;
  --color-navy-300: #8ba6c4;
  --color-navy-400: #5e83a8;
  --color-navy-500: #3a608b;
  --color-navy-600: #1e3a5f;  /* PRIMARIO Alpha */
  --color-navy-700: #173052;
  --color-navy-800: #102744;
  --color-navy-900: #0f2a47;  /* DARK Alpha */
  --color-navy-950: #08182e;

  /* =================================================================
     COLOR — Acento (fire — alusion al mito de Prometeo)
     Alpha guidelines: #C8102E (acento), #E63946 (hot)
     Uso EXCLUSIVO: CTAs, links activos, marca en topbar, hovers
     destacados. NO usar como fondo de seccion grande (compite con
     contenido y satura).
     ================================================================= */
  --color-fire-50:  #fdecef;
  --color-fire-100: #fbd0d6;
  --color-fire-200: #f7a1ad;
  --color-fire-300: #f17282;
  --color-fire-400: #ec4d61;
  --color-fire-500: #e63946;  /* HOT Alpha */
  --color-fire-600: #c8102e;  /* PRIMARIO accent Alpha */
  --color-fire-700: #a40c25;
  --color-fire-800: #800a1d;
  --color-fire-900: #5c0715;

  /* =================================================================
     COLOR — Crema (calidez institucional, fondos de seccion)
     Alpha guidelines: #E8DCC4 (cream), #F0E6D2 (cream-light)
     ================================================================= */
  --color-cream-50:  #fbf8f1;
  --color-cream-100: #f5ecd9;
  --color-cream-200: #f0e6d2;  /* LIGHT Alpha */
  --color-cream-300: #e8dcc4;  /* BASE Alpha */
  --color-cream-400: #d4c5a3;
  --color-cream-500: #bfa982;

  /* =================================================================
     COLOR — Neutrales (10 tonos de gris)
     Cool-grey alineado al navy primario.
     ================================================================= */
  --color-neutral-0:    #ffffff;
  --color-neutral-50:   #fafaf7;  /* paper-soft, fondo suave existente */
  --color-neutral-100:  #f5f5f4;
  --color-neutral-200:  #e7e5e4;
  --color-neutral-300:  #d1d5db;
  --color-neutral-400:  #9ca3af;
  --color-neutral-500:  #64748b;  /* hints, captions */
  --color-neutral-600:  #475569;  /* texto secundario */
  --color-neutral-700:  #334155;
  --color-neutral-800:  #1a1a1a;  /* ink-soft */
  --color-neutral-900:  #0a0a0a;  /* ink */
  --color-neutral-950:  #050505;

  /* =================================================================
     COLOR — Semanticos (estados sistema)
     ================================================================= */
  --color-success: #2f855a;
  --color-warning: #c05621;
  --color-error:   var(--color-fire-700);
  --color-info:    var(--color-navy-600);

  /* =================================================================
     ROLES (aliases) — USAR ESTOS EN COMPONENTES
     ================================================================= */
  /* Fondos */
  --bg-page:        var(--color-neutral-0);
  --bg-soft:        var(--color-neutral-50);
  --bg-elevated:    #ffffff;
  --bg-dark:        var(--color-navy-900);
  --bg-darker:      var(--color-neutral-900);
  --bg-accent-soft: var(--color-cream-200);
  --bg-accent:      var(--color-cream-300);

  /* Texto */
  --text-primary:    var(--color-neutral-900);
  --text-secondary:  var(--color-neutral-600);
  --text-muted:      var(--color-neutral-500);
  --text-on-dark:    #f8fafc;
  --text-on-dark-soft: #cbd5e1;
  --text-on-accent:  var(--color-navy-900);
  --text-headline:   var(--color-navy-900);
  --text-eyebrow:    var(--color-fire-600);

  /* Bordes */
  --border-subtle: #e2e8f0;
  --border-strong: var(--color-neutral-300);
  --border-dark:   #1e293b;
  --border-accent: rgba(200, 16, 46, .25);

  /* Links */
  --link:        var(--color-fire-600);
  --link-hover:  var(--color-fire-500);
  --link-on-dark: var(--color-fire-500);

  /* Focus ring (accesibilidad WCAG 2.1) */
  --focus-ring: 0 0 0 3px rgba(200, 16, 46, .35);

  /* =================================================================
     TYPOGRAPHY
     Display: Saira (condensada, masculina, autoridad)
     Body:    Inter (legibilidad superior, x-height alta)
     Mono:    sistema (uso rarisimo: codigo, tablas tecnicas)
     ================================================================= */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Saira', 'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Modular scale 1.25 (Major Third) — armonioso para contenido editorial largo */
  --text-xs:    0.8rem;     /* 12.8px — captions, badges */
  --text-sm:    0.875rem;   /* 14px — UI secundario */
  --text-base:  1rem;       /* 16px — minimo accesible */
  --text-md:    1.125rem;   /* 18px — cuerpo articulo */
  --text-lg:    1.25rem;    /* 20px — lead paragraph */
  --text-xl:    1.563rem;   /* 25px — H4 */
  --text-2xl:   1.953rem;   /* 31.25px — H3 */
  --text-3xl:   2.441rem;   /* 39px — H2 */
  --text-4xl:   3.052rem;   /* 49px — H1 desktop */
  --text-5xl:   3.815rem;   /* 61px — hero display */

  /* Line heights */
  --leading-tight:   1.1;   /* Hero H1 */
  --leading-snug:    1.25;  /* Headlines H2-H4 */
  --leading-normal:  1.5;   /* UI */
  --leading-relaxed: 1.7;   /* Cuerpo largo articulo */

  /* Letter spacing */
  --tracking-tighter: -0.025em;  /* hero */
  --tracking-tight:   -0.015em;  /* headlines */
  --tracking-normal:  0;
  --tracking-wide:    0.12em;    /* eyebrows */
  --tracking-widest:  0.18em;    /* uppercase tags, footer h4 */

  /* Font weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* =================================================================
     SPACING — Major Third scale
     ================================================================= */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Section vertical rhythm */
  --section-py:        var(--space-16);    /* mobile */
  --section-py-lg:     var(--space-24);    /* desktop */
  --section-py-hero:   var(--space-20);

  /* =================================================================
     LAYOUT
     ================================================================= */
  --container-prose:  65ch;    /* ancho optimo lectura */
  --container-narrow: 720px;   /* articulos largos */
  --container-base:   960px;
  --container-wide:   1200px;  /* grids, hero (existente en sitio) */
  --container-pad:    1.25rem; /* padding lateral mobile */

  --grid-gap:    var(--space-6);
  --grid-gap-sm: var(--space-4);
  --grid-gap-lg: var(--space-8);

  /* =================================================================
     RADII
     ================================================================= */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* =================================================================
     SHADOWS — sutiles (profundidad via border + bg, no shadow heavy)
     ================================================================= */
  --shadow-xs: 0 1px 2px rgba(15, 42, 71, .04);
  --shadow-sm: 0 2px 6px rgba(15, 42, 71, .06);
  --shadow-md: 0 8px 20px -8px rgba(15, 42, 71, .14);
  --shadow-lg: 0 20px 40px -20px rgba(30, 58, 95, .28);
  --shadow-xl: 0 30px 60px -30px rgba(30, 58, 95, .45);
  --shadow-fire: 0 14px 30px -10px rgba(200, 16, 46, .35);

  /* =================================================================
     MOTION
     ================================================================= */
  --duration-instant: 80ms;
  --duration-fast:    150ms;
  --duration-base:    250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* =================================================================
     BREAKPOINTS (referencia; CSS los usa via media queries directas)
     Mobile-first: defaults aplican <640px, mediaqueries son min-width
     --bp-sm: 640px   — phablets
     --bp-md: 768px   — tablets
     --bp-lg: 1024px  — laptops
     --bp-xl: 1280px  — desktops
     --bp-2xl: 1536px — wide
     ================================================================= */

  /* =================================================================
     Z-INDEX scale
     ================================================================= */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  50;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* DARK MODE intencionalmente deshabilitado.
   La marca opera en LIGHT (navy + cream). Invertir esos colores
   rompe la identidad visual y deja raws (--color-navy-XXX) invisibles
   sobre fondos invertidos. Si en el futuro se quiere dark mode,
   primero migrar TODOS los componentes a tokens semanticos. */

/* =================================================================
   REDUCED MOTION — accesibilidad WCAG 2.3.3
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =================================================================
   HIGH CONTRAST MODE — refuerzo bordes para WCAG 1.4.11
   ================================================================= */
@media (prefers-contrast: more) {
  :root {
    --border-subtle: var(--color-neutral-700);
    --border-strong: var(--color-neutral-900);
    --text-secondary: var(--color-neutral-800);
    --focus-ring: 0 0 0 4px var(--color-fire-700);
  }
}