/* ═══════════════════════════════════════════════════════════════════════
   Lumova · Design Tokens
   Canonical source of truth for colors, typography, spacing, and motion.
   All component CSS should reference these tokens, never hard-coded values.
   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ─── Color · Foundation ─────────────────────────────────────────── */

  --color-iron:    #121212;   /* near-black · body text, panels, primary ink */
  --color-vellum:  #faf8f2;   /* warm off-white · body ground, dark-panel text */
  --color-cream:   #fbf7ed;   /* slightly warmer vellum · lightest wash stop */


  /* ─── Color · Warm palette (Mega identity, preserved) ────────────── */
  /* Usage constraints (see brand spec v56 §2):
     • Amber text requires an iron ground (fails AA on light).
     • Orange text on light grounds uses --color-orange-deep.
     • Teal text <24px on light grounds uses --color-teal-dark.
     • Small colored text does not sit on warm-deep/warm-mid gradient stops. */

  --color-amber:         #ff6b00;   /* reserved · one insight word per page, iron only */
  --color-orange:        #e87a1a;   /* warm action · non-text marks + text on iron */
  --color-orange-deep:   #a84f10;   /* warm action · text on cream/vellum (5.18:1 AA) */


  /* ─── Color · Warm gradient wash stops ───────────────────────────── */
  /* Used as linear-gradient page backgrounds. Each page uses a subset. */

  --wash-warm-deep:        #fad080;   /* home hero · deepest warm stop          */
  --wash-warm-mid:         #f9eec4;   /* services top · mid warm arc            */
  --wash-warm-cream-light: #fbf7dc;   /* about/work top · subtle warm above cream */
  --wash-warm-light:       #fbf7ed;   /* gradient floor on every page · cream   */


  /* ─── Color · Teal system (two-value, surface-aware) ─────────────── */
  /* Teal is structural, not decorative. It marks infrastructure,       */
  /* index, selected states, focus, and one case-study emphasis moment. */
  /* It does not signal warmth, primary CTAs, or emotional tone.        */

  --color-teal:       #5B8A80;   /* non-text marks + text ≥24px on light · 3.67:1 */
  --color-teal-dark:  #477A72;   /* text <24px on cream/vellum           · 4.60:1 */
  --color-teal-iron:  #7FA99F;   /* any teal on iron panels              · 7.21:1 */


  /* ─── Color · Semantic aliases (read by components) ──────────────── */

  --text-primary:         var(--color-iron);
  --text-primary-dark:    var(--color-vellum);     /* on iron */
  --text-muted:           rgba(18, 18, 18, 0.72);  /* 72% iron on vellum */
  --text-muted-dark:      rgba(250, 248, 242, 0.72);

  --surface-ground:       var(--color-vellum);
  --surface-panel:        var(--color-iron);

  --accent-structural:        var(--color-teal);       /* non-text marks + ≥24px text on light */
  --accent-structural-small:  var(--color-teal-dark);  /* <24px text on light */
  --accent-structural-dark:   var(--color-teal-iron);  /* any teal on iron */
  --accent-emphasis:          var(--color-teal);       /* pullquote (≥24px) */
  --accent-insight:           var(--color-amber);      /* insight word · once per page, iron only */
  --accent-action:            var(--color-orange);     /* non-text warm marks, or text on iron */
  --accent-action-text:       var(--color-orange-deep);/* warm link text on cream/vellum */

  --rule-subtle:     rgba(18, 18, 18, 0.08);   /* section dividers */
  --rule-medium:     rgba(18, 18, 18, 0.14);   /* card borders */


  /* ─── Typography · Families ──────────────────────────────────────── */

  --font-display:  'Geologica', 'Helvetica Neue', sans-serif;  /* 7 moments only */
  --font-body:     'Onest', 'Helvetica Neue', sans-serif;      /* everything else */
  --font-wordmark: 'Onest', 'Helvetica Neue', sans-serif;      /* lumova wordmark */

  /* Geologica sharpness axis. SHRP 0 = no diagonal-cut character.        */
  /* Locked at 0 — the most restrained Geologica expression. Do not raise. */
  --geo-shrp: 0;

  --geo-variation: 'SHRP' var(--geo-shrp), 'wght' 600;


  /* ─── Typography · Type ramp (clamped for responsive) ────────────── */

  --fs-hero:    clamp(42px, 5.6vw, 72px);   /* Geologica 600 · Lumova. signature */
  --fs-page:    clamp(32px, 3.8vw, 48px);   /* Geologica · page titles + thesis */
  --fs-section: clamp(24px, 2.5vw, 32px);   /* Onest 500 · section titles */
  --fs-service: 22px;                        /* Onest 500 · service / card titles */
  --fs-lede:    22px;                        /* Onest 400 · intro paragraphs */
  --fs-body:    17px;                        /* Onest 400 · body copy */
  --fs-small:   13px;                        /* Onest · kickers, markers, nav, links, inline meta */
  --fs-meta:    12px;                        /* Onest · legal/copyright only */

  --lh-hero:     0.96;   /* display leading */
  --lh-page:     1.0;
  --lh-thesis:   1.06;
  --lh-section:  1.08;
  --lh-service:  1.15;
  --lh-lede:     1.4;
  --lh-body:     1.55;
  --lh-small:    1.4;
  --lh-meta:     1.5;

  --ls-hero:     -0.015em;
  --ls-page:     -0.01em;
  --ls-default:  0;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Measure (max-width for text lines) */
  --measure-lede: 52ch;
  --measure-body: 66ch;


  /* ─── Spacing scale ──────────────────────────────────────────────── */

  --s-1:  4px;
  --s-2:  8px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  32px;
  --s-6:  40px;
  --s-8:  48px;
  --s-10: 56px;
  --s-12: 64px;
  --s-16: 80px;
  --s-20: 112px;
  --s-24: 128px;


  /* ─── Section padding patterns ───────────────────────────────────── */

  --pad-hero-y:       var(--s-16);  /* 80px vertical */
  --pad-hero-x:       var(--s-12);  /* 64px horizontal */
  --pad-section-y:    72px;         /* inter-section rhythm */
  --pad-section-x:    var(--s-12);


  /* ─── Footer tokens ──────────────────────────────────────────────── */
  /* Footer is single-column, all-left composition (v58). The two-column  */
  /* split was removed during the v57→v58 redesign. Spacing within the    */
  /* footer is per-element (identity vs utility groups) — hard-coded in   */
  /* footer.css rather than tokenized, since the values are semantic.     */

  --footer-pad-top:     72px;            /* was 112px — considered presence, not excessive */
  --footer-pad-bottom:  40px;            /* was 48px — proportional to new top */


  /* ─── Motion ─────────────────────────────────────────────────────── */

  --ease-standard:  cubic-bezier(0.4, 0.0, 0.2, 1);
  --duration-fast:  0.15s;
  --duration-base:  0.25s;
}


/* ═══════════════════════════════════════════════════════════════════════
   FONT LOADING
   Geologica is variable (supports SHRP and wght axes via font-variation-settings).
   Onest is loaded at four static weights.
   Adjust @font-face src URLs to match the hosting setup.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Geologica';
  src: url('/fonts/Geologica-Variable.woff2') format('woff2-variations'),
       url('/fonts/Geologica-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Onest';
  src: url('/fonts/Onest-Regular.woff2') format('woff2'),
       url('/fonts/Onest-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Onest';
  src: url('/fonts/Onest-Medium.woff2') format('woff2'),
       url('/fonts/Onest-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Onest';
  src: url('/fonts/Onest-SemiBold.woff2') format('woff2'),
       url('/fonts/Onest-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ═══════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   Respect user preference.
   ═══════════════════════════════════════════════════════════════════════ */

@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;
  }
}