/* ============================================================
   AMEFAR · Egipto 2026 — tokens.css  (Core lane · FINAL.md §4)
   ============================================================ */

/* ===== Google Fonts (in <head>, before this stylesheet) =====
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,500;0,6..96,700;0,6..96,900;1,6..96,400&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
*/
:root {
  /* ---- Brand colour ---- */
  --c-terracotta:      #C4622A;   /* brand primary; hero sky top; big accents ≥24px; NEVER small text on cream (3.2:1) */
  --c-terracotta-deep: #7A2E14;   /* hero gradient base; primary button bg (cream on it 7.4:1) */
  --c-terracotta-text: #8F3F16;   /* "ink" terracotta for kickers/links on cream (5.7:1) */
  --c-navy:            #2A1630;   /* Bastet body / main ink on cream (13:1) / night sky top */
  --c-night:           #170B1C;   /* preloader, deepest night */
  --c-cat:             #291628;   /* exact PNG body colour: eyelids */
  --c-cream:           #EFE3CB;   /* papyrus paper; text on navy (13:1) */
  --c-cream-light:     #F6EEDD;   /* cards on cream, inputs, newspaper column */
  --c-cream-dark:      #E3D2B0;   /* hairlines, rules, alt paper */
  --c-teal:            #2F8F8A;   /* Nile water, tile, progress, chart fill (Egipto). Decorative / text ≥24px only */
  --c-teal-ink:        #1F5F5C;   /* teal for text on cream (5.8:1) */
  --c-teal-mist:       #BBD7D8;   /* noon sky, water highlights */
  --c-red:             #B33A2B;   /* tile red, chart fill (México). Text on cream only bold ≥14px (4.6:1) */
  --c-red-ink:         #8F2E22;   /* red for small text on cream (6.4:1) */
  --c-gold:            #D9A441;   /* collar, sun, rules, numerals on navy (7.5:1). Never text on cream */
  --c-gold-light:      #F0C86A;   /* sun core, glints, hover on dark */
  --c-gold-ink:        #6B4B10;   /* gold-tinted text on cream (6.3:1): day numbers, folios */
  --c-green-eye:       #5FA86A;   /* Bastet's eye; "PROTEGIDO" seal; iconic only */
  --c-white:           #FFFFFF;   /* logo, text on terracotta-deep */
  --c-ink-soft:        rgba(42,22,48,.72);    /* secondary text on cream (≈5.9:1) */
  --c-paper-soft:      rgba(239,227,203,.72); /* secondary text on navy */
  --c-sand:            #F0C389;   /* dunes */
  --c-sand-deep:       #E29458;

  /* ---- Chart colours (Renault) ---- */
  --chart-mx:      var(--c-red);
  --chart-eg:      var(--c-teal);
  --chart-neutral: rgba(42,22,48,.35);
  --chart-grid:    rgba(42,22,48,.12);

  /* ---- Gradients ---- */
  --g-hero:   linear-gradient(180deg,#C4622A 0%,#B25625 45%,#7A2E14 78%,#7A2E14 100%);
  --g-dawn:   linear-gradient(180deg,#2A1630 0%,#7A2E14 55%,#D9A441 100%);
  --g-day:    linear-gradient(180deg,#BBD7D8 0%,#EFE3CB 100%);
  --g-golden: linear-gradient(180deg,#D9A441 0%,#C4622A 60%,#7A2E14 100%);
  --g-dusk:   linear-gradient(180deg,#2A1630 0%,#B33A2B 70%,#D9A441 100%);
  --g-night:  linear-gradient(180deg,#170B1C 0%,#2A1630 100%);
  --g-scrim:  linear-gradient(180deg,rgba(23,11,28,0) 30%,rgba(23,11,28,.78) 100%);
  --g-scrim-l:linear-gradient(90deg,rgba(23,11,28,.82) 0%,rgba(23,11,28,.55) 45%,rgba(23,11,28,0) 100%);
  --g-tile:   repeating-linear-gradient(90deg,#2F8F8A 0 24px,#D9A441 24px 32px,#B33A2B 32px 56px,#D9A441 56px 64px,#2A1630 64px 88px,#D9A441 88px 96px);
  --g-sun:    radial-gradient(circle,#F0C86A 0%,#D9A441 38%,rgba(217,164,65,0) 70%);
  --g-duotone:linear-gradient(0deg,#2A1630,#2A1630);

  /* ---- Type ---- */
  --ff-display: "Bodoni Moda","Bodoni Moda Fallback","Didot","Bodoni 72",Georgia,serif;   /* §4 stack + size-adjusted fallback face (defined below) */
  --ff-body:    Montserrat,"Montserrat Fallback","Helvetica Neue",Arial,sans-serif;
  --fs-display: clamp(5rem, 21vw, 22rem);       /* EGIPTO, colossal day numbers */
  --fs-h1:      clamp(2.75rem, 7vw, 7rem);      /* section titles */
  --fs-h2:      clamp(2rem, 4.5vw, 4.25rem);
  --fs-h3:      clamp(1.375rem, 2.2vw, 2rem);
  --fs-stat:    clamp(3rem, 7vw, 6.5rem);       /* newspaper figures */
  --fs-lead:    clamp(1.125rem, 1.45vw, 1.375rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.125rem);
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;                        /* uppercase, tracking .28em, 600 */
  --lh-tight:.92; --lh-display:1; --lh-heading:1.1; --lh-body:1.6;
  --track-eyebrow:.28em; --track-nav:.12em;

  /* ---- Space / layout ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --sp-11:192px;
  --section-pad: clamp(4rem, 10vw, 10rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 62ch;
  --container: 1440px;
  --nav-h: 56px;                                 /* 64px at ≥1024px (set in components.css) */

  /* ---- Radii / shadows ---- */
  --r-sm:4px; --r-md:12px; --r-lg:24px; --r-pill:999px;
  --r-arch: 999px 999px 0 0;                     /* Egyptian arch photo frame */
  --sh-1: 0 1px 2px rgba(23,11,28,.12);
  --sh-2: 0 8px 24px -8px rgba(23,11,28,.25);
  --sh-3: 0 32px 64px -24px rgba(23,11,28,.45);
  --sh-paper: 0 1px 0 #E3D2B0, 0 14px 32px -18px rgba(122,46,20,.45);   /* warm "paper on paper" — never black */
  --sh-lift:  0 2px 0 #E3D2B0, 0 30px 60px -28px rgba(122,46,20,.55);
  --sh-gold:  0 0 48px rgba(217,164,65,.35);
  --sh-inset-paper: inset 0 0 120px rgba(122,46,20,.08);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.16,1,.3,1);        /* = expo.out */
  --ease-inout: cubic-bezier(.83,0,.17,1);       /* = power4.inOut */
  --ease-cine:  cubic-bezier(.22,1,.36,1);       /* = power3.out */
  --t-micro:180ms; --t-ui:280ms; --t-reveal:1.1s; --t-cine:1.6s;

  /* ---- Z ---- */
  --z-sky:0; --z-main:1; --z-lightswitch:20; --z-nav:50; --z-menu:60; --z-pre:100;

  /* ---- Bastet ---- */
  --eye-x:85.2%; --eye-y:15.1%;
}
@media (min-width:1024px){ :root{ --nav-h:64px; } }

/* ---- Metric-compatible fallbacks (§12): reduce layout shift while the web fonts load ---- */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 106%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Bodoni Moda Fallback";
  src: local("Georgia");
  size-adjust: 100%;
  ascent-override: 93%;
  descent-override: 24%;
  line-gap-override: 0%;
}
/* ---- Reset (minimal, opinionated) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; }
ul[role="list"], ol[role="list"], .days, .tickets, .day__pills, .sched, .track, .tierra__ficha { list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
b, strong { font-weight: 700; }
small { font-size: var(--fs-small); }
mark { background: transparent; color: inherit; }
table { border-collapse: collapse; }
[hidden] { display: none; }