/* ============================================================
   Interlaken® · Web pública · Tokens CSS
   Fuente única de verdad para tokens base y semánticos.
   Producido en Sprint 2.B del rediseño · 25 abril 2026.
   Origen: Design System de Claude Design (paquete brand v1).
   ============================================================ */

/* ── Sarabun — fuente única de marca, archivos locales ──────────────────── */
@font-face { font-family:'Sarabun'; font-weight:100; font-style:normal;
  src:url('../fonts/Sarabun-Thin.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:100; font-style:italic;
  src:url('../fonts/Sarabun-ThinItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:200; font-style:normal;
  src:url('../fonts/Sarabun-ExtraLight.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:200; font-style:italic;
  src:url('../fonts/Sarabun-ExtraLightItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:300; font-style:normal;
  src:url('../fonts/Sarabun-Light.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:300; font-style:italic;
  src:url('../fonts/Sarabun-LightItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:400; font-style:normal;
  src:url('../fonts/Sarabun-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:400; font-style:italic;
  src:url('../fonts/Sarabun-Italic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:500; font-style:normal;
  src:url('../fonts/Sarabun-Medium.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:500; font-style:italic;
  src:url('../fonts/Sarabun-MediumItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:600; font-style:normal;
  src:url('../fonts/Sarabun-SemiBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:600; font-style:italic;
  src:url('../fonts/Sarabun-SemiBoldItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:700; font-style:normal;
  src:url('../fonts/Sarabun-Bold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:700; font-style:italic;
  src:url('../fonts/Sarabun-BoldItalic.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:800; font-style:normal;
  src:url('../fonts/Sarabun-ExtraBold.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Sarabun'; font-weight:800; font-style:italic;
  src:url('../fonts/Sarabun-ExtraBoldItalic.ttf') format('truetype'); font-display:swap; }

:root {
  /* ── MARCA ───────────────────────────────────────────────── */
  --ilk-orange:         #FF6700;  /* acento único — CTAs, highlights, dividers */
  --ilk-orange-deep:    #CC4400;  /* alertas / warnings / hover fuerte */
  --ilk-orange-muted:   #E0936A;  /* naranja amortiguado — texto utilitario sobre fondo oscuro, contextos sobrios */
  --ilk-orange-soft:    #FFF4EE;  /* callouts, fondos sutiles */
  --ilk-orange-border:  #FFD4B8;  /* bordes sutiles en cards naranja */
  --ilk-orange-tint:    #FFF7F3;  /* hover de filas / botones secundarios */

  --ilk-black:          #000000;
  --ilk-ink:            #1A1A2E;  /* body alternativo cuando negro puro es muy duro */
  --ilk-graphite:       #0D0D0D;  /* sidebars, backgrounds oscuros */

  --ilk-white:          #FFFFFF;

  /* ── NEUTROS ─────────────────────────────────────────────── */
  --ilk-gray-text:      #555555;  /* texto secundario */
  --ilk-gray-mid:       #E0E0E0;  /* bordes, dividers */
  --ilk-gray-light:     #F5F5F5;  /* fondos de sección, cards, tablas */
  --ilk-gray-softer:    #FAFAFA;  /* zebra stripe */
  --ilk-gray-muted:     #999999;  /* placeholders, hints */

  /* ── PALETA -WORK (para componentes de cada submarca) ────── */
  /* Crema cálido del lockup canónico bridgework — usado en backgrounds de marca */
  --ilk-work-cream:     #F6F1EA;
  /* Azul tinta del endoso "by interlaken®" */
  --ilk-work-endoso:    #2B2F45;
  /* Tinta cuasi-negra del wordmark */
  --ilk-work-ink:       #1A1A1A;

  /* ── PALETAS POR INSTALADOR ──────────────────────────────────
     Cinco tokens por paleta: del más claro (frame) al más profundo
     (work-ink). Los valores de Bridgework están aprobados en el
     Design System de Claude Design. Academy y Fieldwork son
     propuestas oficiales del DS pendientes de aprobación final.
     Groundwork, Responsework y Campamentos heredan paleta madre.
     ──────────────────────────────────────────────────────────── */

  /* Bridgework — tierra · APROBADA */
  --ilk-bridgework-frame:   #F6F1EA;  /* crema cálido — frame de marca */
  --ilk-bridgework-soft:    #D9A982;  /* terracota claro */
  --ilk-bridgework-mid:     #A86F48;  /* terracota medio */
  --ilk-bridgework-accent:  var(--ilk-orange);  /* naranja como acento */
  --ilk-bridgework-deep:    #1A1A1A;  /* near-black work-ink */
  /* Para fondo de hero usamos un tono tierra profundo intermedio
     entre mid y deep. Pendiente de propuesta oficial DS. */
  --ilk-bridgework-hero:    #3D2517;  /* tierra profundo · fondo hero */

  /* Academy — cool · PROPUESTA del DS */
  --ilk-academy-frame:      #E8EDEF;  /* gris azulado muy claro — frame */
  --ilk-academy-soft:       #7BA9B5;  /* azul cool claro */
  --ilk-academy-mid:        #3A7A8C;  /* azul cool medio */
  --ilk-academy-accent:     #2B5F6B;  /* azul cool oscuro · endoso lockup */
  --ilk-academy-deep:       #1A2332;  /* azul tinta profundo · work-ink */
  --ilk-academy-hero:       var(--ilk-academy-deep);

  /* Fieldwork — verde Suesca · PROPUESTA del DS */
  --ilk-fieldwork-frame:    #E8EFE6;  /* verde muy claro — frame */
  --ilk-fieldwork-soft:     #8AAE7E;  /* verde vegetación */
  --ilk-fieldwork-mid:      #4A7C59;  /* verde medio */
  --ilk-fieldwork-accent:   #2F5C3B;  /* verde oscuro · endoso lockup */
  --ilk-fieldwork-deep:     #1A2A1F;  /* verde bosque profundo · work-ink */
  --ilk-fieldwork-hero:     var(--ilk-fieldwork-deep);

  /* Groundwork — paleta madre profunda (graphite elegante) */
  --ilk-groundwork-deep:    #1A1A1A;
  --ilk-groundwork-hero:    var(--ilk-groundwork-deep);

  /* Responsework — madre con calidez (tinte cobrizo profundo) */
  --ilk-responsework-deep:  #2A1F1A;
  --ilk-responsework-hero:  var(--ilk-responsework-deep);

  /* Campamentos de Aventura — paleta pendiente, fallback graphite */
  --ilk-campamentos-hero:   var(--ilk-groundwork-deep);

  /* ── SEMÁNTICOS ──────────────────────────────────────────── */
  --ilk-fg-1:           var(--ilk-black);        /* texto principal */
  --ilk-fg-2:           var(--ilk-gray-text);    /* texto secundario */
  --ilk-fg-3:           var(--ilk-gray-muted);   /* texto terciario */
  --ilk-fg-inverse:     var(--ilk-white);        /* texto sobre negro/naranja */

  --ilk-bg-1:           var(--ilk-white);        /* superficie principal */
  --ilk-bg-2:           var(--ilk-gray-light);   /* superficie alterna / app bg */
  --ilk-bg-3:           var(--ilk-gray-softer);  /* zebra */
  --ilk-bg-dark:        var(--ilk-graphite);     /* sidebars, hero dark */
  --ilk-bg-black:       var(--ilk-black);        /* topbar, bloques negros */
  --ilk-bg-accent:      var(--ilk-orange);       /* solo portadas y bandas clave */
  --ilk-bg-accent-soft: var(--ilk-orange-soft);  /* callouts */

  --ilk-border:         var(--ilk-gray-mid);
  --ilk-border-strong:  #BDBDBD;
  --ilk-border-accent:  var(--ilk-orange);
  --ilk-border-soft-accent: var(--ilk-orange-border);

  --ilk-accent:         var(--ilk-orange);
  --ilk-accent-hover:   var(--ilk-orange-deep);
  --ilk-danger:         var(--ilk-orange-deep);
  --ilk-success:        #2E7D32;  /* solo para estados, no marca */
  --ilk-info:           #1565C0;
  --ilk-warning:        #E65100;

  --ilk-focus-ring:     0 0 0 3px rgba(255,103,0,.25);
  --ilk-focus-outline:  2px solid var(--ilk-orange);

  /* ── TIPOGRAFÍA ──────────────────────────────────────────── */
  --ilk-font-sans:      'Sarabun', system-ui, -apple-system, sans-serif;
  --ilk-font-mono:      'SF Mono', 'JetBrains Mono', 'Consolas', monospace;

  --ilk-fw-thin:        100;
  --ilk-fw-extralight:  200;
  --ilk-fw-light:       300;
  --ilk-fw-regular:     400;
  --ilk-fw-medium:      500;
  --ilk-fw-semibold:    600;
  --ilk-fw-bold:        700;
  --ilk-fw-extrabold:   800;

  /* Tamaños — mínimo 14px UI / 11pt documentos */
  --ilk-fs-xs:          12px;   /* solo badges / meta */
  --ilk-fs-sm:          13px;   /* tablas / secundario */
  --ilk-fs-base:        14px;   /* UI base */
  --ilk-fs-md:          15px;   /* body cómodo */
  --ilk-fs-lg:          18px;
  --ilk-fs-xl:          24px;
  --ilk-fs-2xl:         32px;
  --ilk-fs-3xl:         44px;
  --ilk-fs-4xl:         64px;   /* display / portadas */

  /* Escalas fluidas para web pública (mobile-first con clamp) */
  --ilk-fs-fluid-display: clamp(2.5rem, 5vw + 1rem, 4.5rem);  /* hero principal */
  --ilk-fs-fluid-h1:      clamp(2rem, 3.5vw + 1rem, 3.25rem);
  --ilk-fs-fluid-h2:      clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --ilk-fs-fluid-h3:      clamp(1.25rem, 1vw + 1rem, 1.625rem);
  --ilk-fs-fluid-lead:    clamp(1rem, 0.5vw + 0.875rem, 1.125rem);

  --ilk-lh-tight:       1.15;
  --ilk-lh-snug:        1.35;
  --ilk-lh-normal:      1.6;
  --ilk-lh-relaxed:     1.8;

  --ilk-tracking-tight:   -0.02em;
  --ilk-tracking-snug:    -0.01em;
  --ilk-tracking-normal:  0;
  --ilk-tracking-wide:    0.08em;
  --ilk-tracking-eyebrow: 0.18em;  /* eyebrows / etiquetas de sección */

  /* ── ESPACIO / RADIOS / SOMBRAS ──────────────────────────── */
  --ilk-space-1:  4px;
  --ilk-space-2:  8px;
  --ilk-space-3:  12px;
  --ilk-space-4:  16px;
  --ilk-space-5:  20px;
  --ilk-space-6:  24px;
  --ilk-space-8:  32px;
  --ilk-space-10: 40px;
  --ilk-space-12: 48px;
  --ilk-space-16: 64px;
  --ilk-space-20: 80px;
  --ilk-space-24: 96px;
  --ilk-space-32: 128px;

  /* Container max-widths */
  --ilk-container-narrow: 720px;   /* artículos, prosa */
  --ilk-container-base:   1080px;  /* layout estándar */
  --ilk-container-wide:   1240px;  /* hero + secciones full-bleed */

  /* Breakpoints (referencia para media queries) */
  --ilk-bp-mobile:    375px;
  --ilk-bp-tablet:    768px;
  --ilk-bp-desktop:   1024px;
  --ilk-bp-wide:      1440px;

  --ilk-radius-sm: 4px;   /* botones, badges, inputs */
  --ilk-radius-md: 6px;   /* cards estándar */
  --ilk-radius-lg: 8px;   /* tope superior — nunca pill */
  --ilk-radius-none: 0;

  /* Sombras — usar con mesura. Nada de neumorfismo. */
  --ilk-shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --ilk-shadow-sm: 0 2px 12px rgba(0,0,0,.07);
  --ilk-shadow-md: 0 8px 24px rgba(0,0,0,.10);
  --ilk-shadow-lg: 0 20px 60px rgba(0,0,0,.18);

  --ilk-transition-fast:   0.15s ease;
  --ilk-transition:        0.2s ease;
  --ilk-transition-slow:   0.3s ease;

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --ilk-z-nav:        100;
  --ilk-z-modal-bg:   199;
  --ilk-z-modal:      200;
  --ilk-z-toast:      300;
  --ilk-z-skip-link:  999;
}