/* ==========================================================================
   KULTRUN — Design System · Color · Type · Foundation tokens
   KULTRUN (mapudungun) = the machi's ceremonial drum. Its drumhead carries the
   universe divided into four quadrants — the mark, the name, and the reason the
   system is built from few, deliberate parts.

   Type: GRAPHIK is the single brand face. The system is built from its
   weights, not from multiple families:
     • Semibold 600           → titles AND display words. The display accent is
                                made with SIZE and the Sol colour, not with weight.
                                700 / 800 / 900 exist in the family but are NOT
                                used — they harden the brand.
     • Medium 500             → nav, buttons, labels, eyebrows
     • Regular 400            → body
     • Light 300              → leads, long-form, captions
     • Italics                → single emphasised words only, never blocks
   Color: five values only — KURÜ, LIG, WENU, ANTÜ, KUYÜM.
     KUYÜM (arena) is the page. WENU (cielo) is the second surface and carries
     most blocks, cards and section bands. ANTÜ (sol) is the accent: one block
     per screen.
   Shape: large soft radii + geometric mapuche motifs (kultrun, ñimin).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Graphik — self-hosted, 100–900 + matching italics.
   One family; choose weight with font-weight, never a second family name.
   -------------------------------------------------------------------------- */
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-Thin.otf') format('opentype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-ThinItalic.otf') format('opentype');font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-Extralight.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-ExtralightItalic.otf') format('opentype');font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-RegularItalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-MediumItalic.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-Semibold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-SemiboldItalic.otf') format('opentype');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-Black.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-BlackItalic.otf') format('opentype');font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-Super.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Graphik';src:url('./fonts/Graphik-SuperItalic.otf') format('opentype');font-weight:900;font-style:italic;font-display:swap}

:root {
  /* ---- Type ---------------------------------------------------------- */
  --font-graphik: 'Graphik', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* Role aliases — all resolve to Graphik; the ROLE carries the weight. */
  --font-display: var(--font-graphik);
  --font-title:   var(--font-graphik);
  --font-ui:      var(--font-graphik);
  --font-body:    var(--font-graphik);
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, 'Liberation Mono', monospace;

  --w-display:  600;   /* @kind other */
  --w-title:    600;   /* @kind other */
  --w-ui:       500;   /* @kind other */
  --w-body:     400;   /* @kind other */
  --w-light:    300;   /* @kind other */
  /* Semibold 600 statements + titles · Medium 500 nav/buttons/labels
     · Regular 400 body · Light 300 leads.
     700, 800 and 900 are deliberately unused — never reach for them. */

  /* ---- Color · five values, no more ----------------------------------
     The palette is named in mapudungun. The name is not decoration: it says
     what the colour is for.
       KURÜ   black      · base, depth, contrast
       LIG    white      · light, clarity
       WENU   sky        · space — THE second surface
       ANTÜ   sun        · energy, the accent (one block per screen)
       KUYÜM  sand       · territory, matter — THE page background
     -------------------------------------------------------------------- */
  --c-kuru:   #1B1A18;   /* KURÜ  · base, profundidad, contraste */
  --c-lig:    #FFFFFF;   /* LIG   · luz, claridad */
  --c-kuyum:  #E4E1DA;   /* KUYÜM · arena, territorio, materia — el fondo */
  --c-wenu:   #D2E4F8;   /* WENU  · cielo, espacio — la segunda superficie */
  --c-antu:   #FA5A2A;   /* ANTÜ  · sol, energía, acento — un bloque por pantalla */

  /* English aliases kept so existing pages keep resolving. Prefer the
     mapudungun names in new work. */
  --c-ink:    var(--c-kuru);
  --c-white:  var(--c-lig);
  --c-arena:  var(--c-kuyum);
  --c-sky:    var(--c-wenu);
  --c-sol:    var(--c-antu);

  /* Tints, for surfaces only — never for type */
  --c-kuru-80: rgba(27,26,24,0.80);
  --c-kuru-55: rgba(27,26,24,0.55);
  --c-kuru-30: rgba(27,26,24,0.30);
  --c-kuru-12: rgba(27,26,24,0.12);
  --c-kuyum-dk:#D5D1C8;
  --c-antu-dk: #E24A1C;   /* pressed / hover on ANTÜ */
  --c-wenu-dk: #B9D6F4;
  --c-ink-80:  var(--c-kuru-80);
  --c-ink-55:  var(--c-kuru-55);
  --c-ink-30:  var(--c-kuru-30);
  --c-ink-12:  var(--c-kuru-12);
  --c-arena-dk:var(--c-kuyum-dk);
  --c-sol-dk:  var(--c-antu-dk);
  --c-sky-dk:  var(--c-wenu-dk);

  /* ---- Semantic ------------------------------------------------------ */
  --fg-1:        var(--c-ink);
  --fg-2:        var(--c-ink-55);
  --fg-on-dark:  var(--c-arena);
  --fg-on-sol:   var(--c-ink);
  --fg-on-sky:   var(--c-ink);

  --bg-page:     var(--c-arena);
  --bg-surface:  var(--c-white);
  --bg-inverse:  var(--c-ink);
  --bg-accent:   var(--c-sol);
  --bg-calm:     var(--c-sky);

  --border-strong:   var(--c-ink);
  --border-hairline: var(--c-ink-12);

  /* ---- Shape · big soft radii, the anti-style block language ---------- */
  --r-pill: 9999px;
  --r-s:    14px;   /* inputs, chips */
  --r-m:    28px;   /* cards */
  --r-l:    44px;   /* blocks, panels */
  --r-xl:   72px;   /* full-bleed sections, hero blocks */
  /* Legacy aliases */
  --radius-pill: var(--r-pill);
  --radius-card: var(--r-m);
  --radius-card-lg: var(--r-l);
  --radius-surface: var(--r-xl);

  /* ---- Spacing · 8-pt grid ------------------------------------------- */
  --s-1:4px; --s-2:8px; --s-3:16px; --s-4:24px; --s-5:32px;
  --s-6:48px; --s-7:64px; --s-8:96px; --s-9:120px; --s-10:160px;

  /* ---- Elevation · flat by default ---------------------------------- */
  --shadow-none: 0 0 0 rgba(0,0,0,0);
  --shadow-lift: 0 24px 60px -24px rgba(27,26,24,0.20);

  /* ---- Motion -------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-micro:  200ms;  /* @kind other */
  --dur-state:  350ms;  /* @kind other */
  --dur-reveal: 600ms;  /* @kind other */

  /* ---- Type scale ---------------------------------------------------- */
  --type-xl-title: 180px;
  --type-l-title:   96px;
  --type-m-title:   64px;
  --type-s-title:   40px;
  --type-xs-title:  24px;
  --type-body-xl:   24px;
  --type-body:      19px;
  --type-body-s:    16px;
  --type-caption:   13px;
}

/* --------------------------------------------------------------------------
   Baseline
   -------------------------------------------------------------------------- */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: 18px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: var(--c-ink); text-decoration: none; }
a:hover { color: var(--c-sol); }

/* --------------------------------------------------------------------------
   Semantic type — use these classes; don't restyle headings ad hoc.
   -------------------------------------------------------------------------- */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: 0.88;
  letter-spacing: -0.035em;
}
.t-display--italic { font-style: italic; }
.t-xl-title, h1.t-xl {
  font-family: var(--font-title); font-weight: var(--w-display);
  font-size: var(--type-xl-title); line-height: 0.88; letter-spacing: -0.035em;
}
.t-l-title, h1 {
  font-family: var(--font-title); font-weight: var(--w-title);
  font-size: var(--type-l-title); line-height: 0.95; letter-spacing: -0.028em;
}
.t-l-title--light { font-weight: var(--w-light); letter-spacing: -0.02em; }
.t-m-title, h2 {
  font-family: var(--font-title); font-weight: var(--w-title);
  font-size: var(--type-m-title); line-height: 1.02; letter-spacing: -0.022em;
}
.t-s-title, h3 {
  font-family: var(--font-title); font-weight: var(--w-title);
  font-size: var(--type-s-title); line-height: 1.1; letter-spacing: -0.016em;
}
.t-xs-title, h4 {
  font-family: var(--font-title); font-weight: var(--w-ui);
  font-size: var(--type-xs-title); line-height: 1.25; letter-spacing: -0.01em;
}
.t-eyebrow {
  font-family: var(--font-ui); font-weight: var(--w-ui);
  font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase;
}
.t-body-xl {
  font-family: var(--font-body); font-weight: var(--w-light);
  font-size: var(--type-body-xl); line-height: 1.32; letter-spacing: -0.008em;
}
.t-body, p {
  font-family: var(--font-body); font-weight: var(--w-body);
  font-size: var(--type-body); line-height: 1.5;
}
.t-body-s {
  font-family: var(--font-body); font-weight: var(--w-body);
  font-size: var(--type-body-s); line-height: 1.5;
}
.t-caption {
  font-family: var(--font-body); font-weight: var(--w-ui);
  font-size: var(--type-caption); line-height: 1.4; letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Surfaces — colour blocks are the layout unit
   -------------------------------------------------------------------------- */
.surface-arena { background: var(--c-arena); color: var(--fg-1); }
.surface-white { background: var(--c-white); color: var(--fg-1); }
.surface-ink   { background: var(--c-ink);   color: var(--fg-on-dark); }
.surface-sky   { background: var(--c-sky);   color: var(--fg-on-sky); }
.surface-sol   { background: var(--c-sol);   color: var(--fg-on-sol); }
.block  { border-radius: var(--r-l); padding: var(--s-6); }
.block--calm { background: var(--c-sky); color: var(--c-ink); border-radius: var(--r-l); padding: var(--s-6); }
.block--xl { border-radius: var(--r-xl); padding: var(--s-8); }

/* --------------------------------------------------------------------------
   Buttons — ONE pill. The arrow lives INSIDE the pill and never detaches;
   there is no companion disc and no marquee/rail animation. The only state
   change is a colour flip (+ 98% press). Arrow = stepped chevron, the same
   right-angle logic as the ñimin band:
     <svg viewBox="0 0 24 24" stroke-linecap="square">
       <path d="M2 9H11V6H17V9H20V10.5H22V13.5H20V15H17V18H11V15H2Z"/></svg>
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 26px; border: 0; cursor: pointer;
  border-radius: var(--r-pill);
  font-family: var(--font-ui); font-weight: var(--w-ui);
  font-size: 16px; line-height: 1; letter-spacing: -0.005em;
  background: var(--c-ink); color: var(--c-arena);
  transition: background var(--dur-state) var(--ease-standard),
              color var(--dur-state) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
}
.btn__arrow { flex: 0 0 auto; display: block; margin-left: 2px; }
.btn:hover  { background: var(--c-sol); color: var(--c-ink); }
.btn:active { transform: scale(0.98); }
.btn--sol   { background: var(--c-sol);   color: var(--c-ink); }
.btn--sol:hover { background: var(--c-ink); color: var(--c-arena); }
.btn--sky   { background: var(--c-sky);   color: var(--c-ink); }
.btn--sky:hover { background: var(--c-sol); color: var(--c-ink); }
.btn--white { background: var(--c-white); color: var(--c-ink); }
.btn--white:hover { background: var(--c-sol); color: var(--c-ink); }
.btn--outline {
  background: transparent; color: var(--c-ink);
  box-shadow: inset 0 0 0 1.5px var(--c-ink);
}
.btn--outline:hover { background: var(--c-ink); color: var(--c-arena); }

/* --------------------------------------------------------------------------
   Field — the canonical input
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 7px; width: 100%; text-align: left; }
.field__label {
  font-family: var(--font-ui); font-weight: var(--w-ui); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink);
}
.field__label .req { color: var(--c-sol); margin-left: 4px; }
.field input, .field textarea, .field select, .field__input {
  width: 100%; padding: 16px 18px;
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-ink-12); border-radius: var(--r-s);
  font-family: var(--font-body); font-weight: var(--w-body); font-size: 16px;
  line-height: 1.4; outline: none;
  transition: border-color var(--dur-state) var(--ease-standard),
              box-shadow var(--dur-state) var(--ease-standard);
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-ink-30); }
.field input:focus, .field textarea:focus, .field select:focus, .field__input:focus-within {
  border-color: var(--c-ink); box-shadow: 0 0 0 3px rgba(250,90,42,0.22);
}
.field__hint {
  font-family: var(--font-body); font-weight: var(--w-body);
  font-size: 12px; color: var(--c-ink-55); line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Chips
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: var(--r-pill);
  font-family: var(--font-ui); font-weight: var(--w-ui); font-size: 13px; line-height: 1;
  background: transparent; color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-ink-30);
}
.chip--on { background: var(--c-ink); color: var(--c-arena); box-shadow: none; }

/* --------------------------------------------------------------------------
   Floating card
   -------------------------------------------------------------------------- */
.card-float {
  background: var(--c-white); border-radius: var(--r-m);
  box-shadow: var(--shadow-lift);
  padding: 48px 44px; max-width: 440px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
}

/* --------------------------------------------------------------------------
   Legacy token aliases — the previous system's names, remapped onto KULTRUN.
   Existing pages keep working and inherit the new palette + Graphik.
   New work should use the tokens above.
   -------------------------------------------------------------------------- */
:root {
  --font-concrete: var(--font-graphik);
  --font-light:    var(--font-graphik);
  --color-black:      var(--c-ink);
  --color-pure-black: #000000;
  --color-white:      var(--c-white);
  --color-warm-white: var(--c-arena);
  --color-human-teal:     var(--c-sky);
  --color-vibrant-indigo: var(--c-sky);
  --color-earth:          var(--c-arena-dk);
  --color-spark-green:    var(--c-sky);
  --color-spark-yellow:   var(--c-sol);
  --color-spark-yellow-hover: var(--c-sol-dk);
  --color-tertiary-red:   var(--c-sol);
  --color-tertiary-teal:  var(--c-sky);
  --color-tertiary-spark: var(--c-sol);
  --color-action-red:     var(--c-sol);
  --color-action-yellow:  var(--c-sol);
  --color-action-teal:    var(--c-sky);
  --color-spark-hard:     var(--c-sol);
  --color-spark-green-hard: var(--c-sol);
  --color-mission-human:      var(--c-sol);
  --color-mission-industrial: var(--c-sky);
  --color-mission-urban:      var(--c-arena-dk);
  --color-grey-90: var(--c-ink-80);
  --color-grey-80: var(--c-ink-55);
  --color-grey-70: var(--c-ink-30);
  --color-grey-50: var(--c-ink-12);
  --color-grey-25: var(--c-arena-dk);
  --fg-muted:   var(--c-ink-55);
  --fg-on-yellow: var(--c-ink);
  --shadow-flat: 0 3px 3px rgba(27,26,24,0.18);
}
.surface-warm   { background: var(--c-arena); color: var(--fg-1); }
.surface-dark   { background: var(--c-ink);   color: var(--fg-on-dark); }
.surface-earth  { background: var(--c-arena-dk); color: var(--fg-1); }
.surface-teal   { background: var(--c-sky);   color: var(--c-ink); }
.surface-indigo { background: var(--c-sky);   color: var(--c-ink); }
.surface-yellow { background: var(--c-sol);   color: var(--c-ink); }
/* Legacy split pill — collapsed into the single pill. The disc no longer
   exists as a separate element; both parts share one background. */
.btn-pill { display:inline-flex; align-items:center; gap:10px; padding:17px 26px; border-radius:var(--r-pill); border:0; cursor:pointer; font-family:var(--font-ui); font-weight:var(--w-ui); font-size:16px; line-height:1; background:var(--c-ink); color:var(--c-arena); transition:background var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard), transform var(--dur-micro) var(--ease-standard); }
.btn-pill__label { display:inline-block }
.btn-pill__arrow { flex:0 0 auto; display:block; margin-left:2px; background:none; width:auto; height:auto; border-radius:0 }
.btn-pill:hover { background:var(--c-sol); color:var(--c-ink); }
.btn-pill:active { transform:scale(0.98); }
.eggs-modal { background:var(--c-white); border-radius:var(--r-m); box-shadow:var(--shadow-lift); padding:48px 44px; max-width:440px; width:100%; display:flex; flex-direction:column; align-items:center; gap:var(--s-4); }
.eggs-icon-tile { width:64px; height:64px; border-radius:18px; display:grid; place-items:center; color:var(--c-ink); background:var(--c-sol); }
.eggs-icon-tile--teal, .eggs-icon-tile--indigo { background:var(--c-sky); color:var(--c-ink); }
.eggs-icon-tile--earth { background:var(--c-arena-dk); color:var(--c-ink); }
.eggs-icon-tile--spark-hard { background:var(--c-sol); color:var(--c-ink); }
.eggs-icon-tile--dark { background:var(--c-ink); color:var(--c-arena); }
.eggs-field { display:flex; flex-direction:column; gap:7px; width:100%; text-align:left; }
.eggs-field__label { font-family:var(--font-ui); font-weight:var(--w-ui); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--c-ink); }
.eggs-field__label .req { color:var(--c-sol); margin-left:4px; }
.eggs-field__input, .eggs-field input, .eggs-field textarea, .eggs-field select {
  width:100%; padding:16px 18px; background:var(--c-white); color:var(--c-ink);
  border:1px solid var(--c-ink-12); border-radius:var(--r-s);
  font-family:var(--font-body); font-weight:var(--w-body); font-size:16px; line-height:1.4; outline:none;
  transition:border-color var(--dur-state) var(--ease-standard), box-shadow var(--dur-state) var(--ease-standard);
}
.eggs-field input::placeholder, .eggs-field textarea::placeholder { color:var(--c-ink-30); }
.eggs-field input:focus, .eggs-field textarea:focus, .eggs-field select:focus, .eggs-field__input:focus-within { border-color:var(--c-ink); box-shadow:0 0 0 3px rgba(250,90,42,0.22); }
.eggs-field__input--with-icon { display:flex; align-items:center; gap:12px; }
.eggs-field__input--with-icon input { flex:1; width:auto; border:0; padding:0; background:transparent; box-shadow:none !important; }
.eggs-field__input--with-icon .icon { color:var(--c-ink-30); flex:0 0 auto; }
.eggs-field__hint { font-family:var(--font-body); font-size:12px; color:var(--c-ink-55); line-height:1.4; }
.eggs-input--soft { display:flex; align-items:center; gap:12px; width:100%; padding:16px 18px; background:var(--c-white); border:1px solid var(--c-ink-12); border-radius:var(--r-s); font-family:var(--font-body); font-size:16px; color:var(--c-ink); }
.eggs-input--soft:focus-within { border-color:var(--c-ink); box-shadow:0 0 0 3px rgba(250,90,42,0.22); }
.eggs-input--soft .icon { color:var(--c-ink-30); flex:0 0 auto; }
/* --------------------------------------------------------------------------
   Mapuche motif tile — kultrun / ñimin geometry as a graphic device.
   Use as background texture, icon holder, or section marker.
   -------------------------------------------------------------------------- */
.motif-tile {
  width: 72px; height: 72px; border-radius: var(--r-s);
  display: grid; place-items: center;
  background: var(--c-sol); color: var(--c-ink);
}
.motif-tile--sky   { background: var(--c-sky);   color: var(--c-ink); }
.motif-tile--ink   { background: var(--c-ink);   color: var(--c-arena); }
.motif-tile--white { background: var(--c-white); color: var(--c-ink); }