/* ==========================================================================
   tokens.css — "Serene Equilibrium"
   Every value here is a direct translation of DESIGN.md. Nothing is invented.
   Derived values (shadows, transitions) are marked and cite the DESIGN.md rule
   they come from. Layout and components live in style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typefaces
   Noto Serif and Manrope, self-hosted. Both are variable fonts, so one file
   per family covers every weight — 76 KB total, no third-party requests.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/noto-serif-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/noto-serif-latin-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
}

:root {
  /* ------------------------------------------------------------------------
     2. Colour — verbatim from the DESIGN.md palette
     ------------------------------------------------------------------------ */

  /* Surfaces — the tonal layers the page is built from */
  --surface:                        #faf9f6;
  --surface-dim:                    #dbdad7;
  --surface-bright:                 #faf9f6;
  --surface-container-lowest:       #ffffff;
  --surface-container-low:          #f4f3f1;
  --surface-container:              #efeeeb;
  --surface-container-high:         #e9e8e5;
  --surface-container-highest:      #e3e2e0;
  --surface-variant:                #e3e2e0;
  --inverse-surface:                #2f312f;
  --inverse-on-surface:             #f2f1ee;

  /* Text */
  --on-surface:                     #1a1c1a;
  --on-surface-variant:             #414845;
  --background:                     #faf9f6;
  --on-background:                  #1a1c1a;

  /* Lines */
  --outline:                        #717975;
  --outline-variant:                #c1c8c4;

  /* Primary — Muted Sage. Key actions, the brand's healing identity. */
  --primary:                        #416359;
  --on-primary:                     #ffffff;
  --primary-container:              #597b71;
  --on-primary-container:           #f4fffa;
  --inverse-primary:                #aacec2;
  --surface-tint:                   #43655b;
  --primary-fixed:                  #c5ebde;
  --primary-fixed-dim:              #aacec2;
  --on-primary-fixed:               #002019;
  --on-primary-fixed-variant:       #2b4d44;

  /* Secondary — Warm Taupe. Grounded earth-toned counterpoint. */
  --secondary:                      #675d50;
  --on-secondary:                   #ffffff;
  --secondary-container:            #efe0cf;
  --on-secondary-container:         #6e6355;
  --secondary-fixed:                #efe0cf;
  --secondary-fixed-dim:            #d3c4b4;
  --on-secondary-fixed:             #221a10;
  --on-secondary-fixed-variant:     #4f4539;

  /* Tertiary — Soft Sand. Container backgrounds, section transitions. */
  --tertiary:                       #5f5c55;
  --on-tertiary:                    #ffffff;
  --tertiary-container:             #78746e;
  --on-tertiary-container:          #fffbff;
  --tertiary-fixed:                 #e8e2da;
  --tertiary-fixed-dim:             #cbc6be;
  --on-tertiary-fixed:              #1d1b17;
  --on-tertiary-fixed-variant:      #494641;

  /* Error — form validation only */
  --error:                          #ba1a1a;
  --on-error:                       #ffffff;
  --error-container:                #ffdad6;
  --on-error-container:             #93000a;

  /* ------------------------------------------------------------------------
     3. Typography — verbatim from the DESIGN.md scale
     ------------------------------------------------------------------------ */

  --font-serif: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* headline-xl — hero headline */
  --headline-xl-size:        48px;
  --headline-xl-weight:      600;
  --headline-xl-leading:     1.2;

  /* headline-lg — section headings */
  --headline-lg-size:        36px;
  --headline-lg-weight:      600;
  --headline-lg-leading:     1.3;

  /* headline-md — card headings */
  --headline-md-size:        28px;
  --headline-md-weight:      500;
  --headline-md-leading:     1.4;

  /* body-lg — intros and lead paragraphs
     Corrected from 18px: measured against the mockup screenshot (matched-scale
     pixel comparison, wordmark used as a fixed anchor since it measured
     identical between mockup and build) and confirmed visibly oversized.
     See DESIGN.md change log. */
  --body-lg-size:            16px;
  --body-lg-weight:          400;
  --body-lg-leading:         1.6;

  /* body-md — default body copy */
  --body-md-size:            16px;
  --body-md-weight:          400;
  --body-md-leading:         1.6;

  /* label-md — eyebrows, chips, buttons, form labels */
  --label-md-size:           14px;
  --label-md-weight:         600;
  --label-md-leading:        1.4;
  --label-md-tracking:       0.05em;

  /* Explicit line-height for inputs and buttons.
     Not in DESIGN.md, but form controls inherit different default metrics in
     different browsers, so leaving it unset makes boxes render at different
     heights in Safari vs Chrome. Set once here so they can't drift. */
  --control-leading:         1.4;

  /* ------------------------------------------------------------------------
     4. Shape — DESIGN.md `rounded`
     "Sharp corners are avoided to ensure the UI feels safe and non-threatening."
     ------------------------------------------------------------------------ */

  --radius-sm:        0.25rem;   /*  4px */
  --radius-base:      0.5rem;    /*  8px — buttons, inputs, standard containers */
  --radius-md:        0.75rem;   /* 12px */
  --radius-lg:        1rem;      /* 16px — cards and larger featured sections */
  --radius-xl:        1.5rem;    /* 24px */
  --radius-full:      9999px;    /* pills — chips, language tags, hero CTA */

  /* ------------------------------------------------------------------------
     5. Spacing — strict 8px base unit
     ------------------------------------------------------------------------ */

  --unit:             8px;

  --space-1:          8px;
  --space-2:          16px;
  --space-3:          24px;
  --space-4:          32px;
  --space-5:          40px;
  --space-6:          48px;
  --space-8:          64px;
  --space-10:         80px;
  --space-12:         96px;
  --space-15:         120px;

  --container-max:    1200px;
  --gutter:           32px;    /* desktop, 12-column grid */
  --margin-mobile:    20px;
  --section-padding:  120px;   /* "Massive vertical padding to create a Zen flow" */

  /* ------------------------------------------------------------------------
     6. Elevation — DERIVED from the DESIGN.md rule ("extremely diffused,
        Blur: 30px-40px, Opacity: 4-6%, tinted with Secondary Taupe"), then
        strengthened past that range: the first pass at 4-6% read as too
        weak against the mockup's visibly more present card shadows.
        Taupe is --secondary #675d50 → rgb(103, 93, 80).
     ------------------------------------------------------------------------ */

  --shadow-tint:      103, 93, 80;

  --elevation-0:      none;                                        /* flat background elements */
  --elevation-1:      0 6px 22px rgba(var(--shadow-tint), 0.12);   /* resting: hero/resonance image cards, contact form card */
  --elevation-2:      0 8px 40px rgba(var(--shadow-tint), 0.08);   /* nav bar, floating elements */

  /* Content cards (Modality, Workshop): flat at rest, a tight, close, barely
     diffused shadow on hover — different from --elevation-1-hover's soft
     diffusion, per direct reference to the mockup's card hover state. */
  --card-shadow-hover:  0 4px 14px rgba(var(--shadow-tint), 0.22);

  /* ------------------------------------------------------------------------
     7. Motion — DERIVED. DESIGN.md asks for "a subtle transition on hover"
        but gives no timing. Calm and unhurried, to match the brand.
     ------------------------------------------------------------------------ */

  --transition:       220ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus ring — not in DESIGN.md. Required for keyboard accessibility;
     uses Sage so it reads as part of the system. */
  --focus-ring:       2px solid var(--primary);
  --focus-offset:     3px;
}

/* --------------------------------------------------------------------------
   8. Mobile scale — DESIGN.md: "For mobile devices, headline-xl should scale
   down to 32px and headline-lg to 28px." Breakpoint per the layout section:
   "Mobile (below 768px): Single column with 20px side margins."

   Note: this makes headline-lg and headline-md both 28px on mobile, which
   flattens the hierarchy between section headings and card headings.
   DESIGN.md specifies it, so it stands — flagged for review at Stage 5.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --headline-xl-size:   32px;
    --headline-lg-size:   28px;
    --headline-md-size:   22px;  /* DERIVED, Stage 5: unscaled headline-md matched
                                    headline-lg exactly at 28px, flattening section
                                    vs. card heading hierarchy (flagged since Stage 2).
                                    22px keeps the same ~0.78 ratio the desktop
                                    scale uses between the two. */

    --gutter:             var(--margin-mobile);
    --section-padding:    72px;  /* DERIVED: 120px of padding on a phone leaves
                                    the reader scrolling through empty screens.
                                    Still a 8px multiple, still generous. */
  }
}

/* Tablet — DESIGN.md: "8-column grid with 24px gutters." */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --gutter:             24px;
    --section-padding:    96px;
  }
}

/* Respect the reader's motion preference. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
}