/* ═══════════════════════════════════════════════════════════════════
   CRILLÓN · DESIGN SYSTEM
   tokens.css — solo CSS variables. Sin selectores, sin @font-face.
   Importable desde cualquier producto (web, deck, app interna, RRSS).
   ═══════════════════════════════════════════════════════════════════
   System intent:
   - BLUE carries identity. Es la voz de la marca (el sabio).
   - GRAY cálido (stone) carga todo lo demás — nunca neutros fríos.
   - YELLOW (ámbar) solo enfatiza. Una palabra, un dato. Jamás fondo.
   - STATUS (terracota/verde/blanco/outline) viven SOLO en badges de proyecto.
   - Sin gradientes decorativos. Sombras tintadas en azul, nunca negras.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── BRAND CORE ─────────────────────────────────────────── */
  --blue-50:   #F2F6F9;
  --blue-100:  #E3ECF2;
  --blue-500:  #1B5480;   /* Azul Crillón — primario, voz de marca   */
  --blue-600:  #0F4671;   /* Hover / más peso                         */
  --blue-700:  #0A3A5C;   /* Oscuro — fondos de sección, footers     */
  --blue-800:  #073049;   /* Casi negro azul — footer profundo       */

  /* ─── GRAY (cálido, stone) ───────────────────────────────── */
  --gray-50:   #F8F7F5;
  --gray-100:  #F1EFEB;
  --gray-200:  #E6E3DD;
  --gray-300:  #D1CCC3;
  --gray-400:  #A8A298;
  --gray-500:  #7A756C;
  --gray-600:  #5C584F;
  --gray-700:  #3F3C35;
  --gray-800:  #2A2824;
  --gray-900:  #171614;

  /* ─── ACENTO — énfasis únicamente ────────────────────────── */
  --yellow-100: #FBE9BE;   /* Highlight backdrop (.mark)              */
  --yellow-400: #F5BE47;
  --yellow-500: #F0A400;   /* Ámbar editorial — italic key, dato     */
  --yellow-700: #B87D00;   /* Sobre cream / hover                     */

  /* ─── STATUS (únicamente badges de proyecto) ─────────────── */
  --status-inmediata:        #C9432C;   /* Entrega inmediata — terracota cálido */
  --status-inmediata-bg:     #FBEAE4;
  --status-venta-verde:      #2D8F6F;   /* Venta en verde — verde bosque        */
  --status-venta-verde-bg:   #E4F1EB;
  --status-venta-blanco:     #FFFFFF;   /* Venta en blanco — sobre foto/dark   */
  --status-proximo:          transparent; /* Próximamente — outline             */

  /* Legacy aliases — código existente referencia estos nombres */
  --status-venta:            var(--status-venta-verde);
  --status-venta-bg:         var(--status-venta-verde-bg);
  --status-preventa:         var(--status-venta-blanco);
  --status-preventa-border:  var(--blue-500);

  /* ─── FEEDBACK (UI genérico — separado de status) ───────── */
  --fb-success: #2D8F6F;
  --fb-warning: #D89A1F;
  --fb-error:   #B53A2A;
  --fb-info:    var(--blue-500);

  /* ─── SEMANTIC ALIASES ──────────────────────────────────── */
  --color-primary:        var(--blue-500);
  --color-primary-dark:   var(--blue-700);
  --color-primary-light:  var(--blue-100);
  --color-accent:         var(--yellow-500);
  --color-accent-light:   var(--yellow-100);
  --color-cta:            var(--blue-500);

  /* Surfaces */
  --surface-page:   #FAF9F7;        /* Papel cálido, jamás blanco puro */
  --surface-card:   #FFFFFF;
  --surface-muted:  var(--gray-100);
  --surface-subtle: var(--gray-50);
  --surface-dark:   var(--blue-700);
  --surface-deeper: var(--blue-800);

  /* Foreground (navy editorial, no gris) */
  --fg1:        #0A3A5C;    /* Títulos y body principal           */
  --fg2:        #3D5B73;    /* Body secundario                    */
  --fg3:        #6B7F92;    /* Metadata, labels                   */
  --fg-brand:   var(--blue-500);
  --fg-inverse: #FFFFFF;
  --fg-accent:  var(--yellow-500);

  /* Borders — hairlines, jamás líneas duras */
  --border-hairline: var(--gray-200);
  --border-subtle:   var(--gray-300);
  --border-strong:   var(--gray-400);

  /* Overlay para hero / modales */
  --overlay-soft:   rgba(5, 30, 51, 0.35);
  --overlay-medium: rgba(5, 30, 51, 0.55);
  --overlay-deep:   rgba(5, 30, 51, 0.78);

  /* Overlays graduados para hero con video/foto — usados como
     --hero-overlay-light/medium/deep en web-patterns */
  --hero-overlay-light:  linear-gradient(180deg, rgba(27,84,128,0.20) 0%, rgba(27,84,128,0.10) 40%, rgba(10,58,92,0.55) 100%);
  --hero-overlay-medium: linear-gradient(180deg, rgba(27,84,128,0.45) 0%, rgba(27,84,128,0.40) 45%, rgba(10,58,92,0.78) 100%);
  --hero-overlay-deep:   linear-gradient(180deg, rgba(27,84,128,0.62) 0%, rgba(27,84,128,0.58) 45%, rgba(10,58,92,0.85) 100%);

  /* ─── RADII ──────────────────────────────────────────────── */
  --radius-xs:    2px;
  --radius-sm:    4px;     /* Default editorial — cards, thumbs    */
  --radius-base:  6px;     /* Dropdowns, banners                   */
  --radius-card: 12px;     /* Cards UI / panels                    */
  --radius-lg:   20px;
  --radius-pill: 9999px;   /* Botones, badges, chips               */

  /* ─── SHADOWS — tintadas en azul, restraint total ─────── */
  --shadow-xs: 0 1px  2px  rgba(10, 58, 92, 0.04);
  --shadow-sm: 0 2px  6px  rgba(10, 58, 92, 0.06);
  --shadow-md: 0 6px 20px  rgba(10, 58, 92, 0.08);
  --shadow-lg: 0 14px 40px rgba(10, 58, 92, 0.10);
  --shadow-xl: 0 20px 60px rgba(10, 58, 92, 0.18), 0 4px 12px rgba(10, 58, 92, 0.08);

  /* ─── TYPE — families ───────────────────────────────────── */
  --font-display: 'Strawford', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── TYPE — weights ────────────────────────────────────── */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─── TYPE — scale (px). Expressive arriba, tight abajo ─ */
  --fs-display: 84px;  --lh-display: 0.96;   /* editorial hero RRSS    */
  --fs-hero:    60px;  --lh-hero:    1.02;   /* page hero              */
  --fs-h1:      44px;  --lh-h1:      1.08;
  --fs-h2:      32px;  --lh-h2:      1.15;
  --fs-h3:      24px;  --lh-h3:      1.25;
  --fs-lead:    20px;  --lh-lead:    1.45;
  --fs-body:    16px;  --lh-body:    1.6;
  --fs-small:   14px;  --lh-small:   1.5;
  --fs-caption: 12px;  --lh-caption: 1.4;
  --fs-micro:   11px;  --lh-micro:   1.3;

  /* ─── TYPE — letter-spacing. Display tight, caption wide ─ */
  --tracking-display: -0.028em;
  --tracking-hero:    -0.022em;
  --tracking-h1:      -0.018em;
  --tracking-h2:      -0.012em;
  --tracking-body:     0;
  --tracking-caption:  0.08em;
  --tracking-micro:    0.14em;

  /* ─── SPACING (base 4) ──────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32:128px;

  /* ─── LAYOUT ────────────────────────────────────────────── */
  --container-narrow: 1240px;
  --container-wide:   1360px;            /* default marketing site   */
  --container-pad:    clamp(24px, 5vw, 72px);

  /* ─── MOTION — pausado, nunca bouncy ────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;
}