/* ============================================================
   LEEF ES LICHT — Design Token System
   "Soft Wisdom"
   ============================================================ */


/* ============================================================
   1. COLOR TOKENS
   ============================================================ */

:root {

  /* --- Primitive Color Values --- */

  /* Creams & Backgrounds */
  --color-cream-50:  #FDFAF5;   /* Near white, barely warm */
  --color-cream-100: #F4F1EC;   /* Main background */
  --color-cream-200: #EBE6DE;   /* Card backgrounds, alt sections */
  --color-cream-300: #DDD6CC;   /* Borders, dividers */

  /* Sage Greens — softness, empathy, trust */
  --color-sage-50:   #EDF4EF;   /* Tint backgrounds */
  --color-sage-100:  #D6E8DC;   /* Light green tint */
  --color-sage-200:  #C0D8C8;   /* Soft green, hover states */
  --color-sage-400:  #7BA898;   /* Primary sage — main green accent */
  --color-sage-600:  #537D72;   /* Deeper sage, strong accents */
  --color-sage-800:  #2E5248;   /* Dark sage */
  --color-sage-900:  #1C3530;   /* Deepest sage */

  /* Wisdom Blues — communication, clarity, depth */
  --color-blue-50:   #EAF1F5;   /* Tint backgrounds */
  --color-blue-100:  #D0E4EC;   /* Light blue tint */
  --color-blue-200:  #BCCCD8;   /* Soft blue */
  --color-blue-400:  #6A9BAA;   /* Primary blue — main blue accent */
  --color-blue-600:  #487080;   /* Deeper blue */
  --color-blue-800:  #2A4F5C;   /* Dark blue */
  --color-blue-900:  #1A3340;   /* Deepest blue */

  /* Deep Anchor — unifies both brand colors */
  --color-deep-800:  #2A3F48;   /* Primary dark — text, CTAs */
  --color-deep-900:  #1C2E36;   /* Deepest dark — footer */

  /* Warm Gold — accent only, used very sparingly */
  --color-gold-100:  #F0E4CC;   /* Lightest gold tint */
  --color-gold-300:  #C8A87A;   /* Primary gold accent */
  --color-gold-500:  #A8844E;   /* Deeper gold */

  /* Warm Neutral — bridges green and blue */
  --color-warm-100:  #EDE8E0;   /* Warm dividers */
  --color-warm-300:  #C4BAB0;   /* Secondary UI borders */
  --color-warm-500:  #8C8078;   /* Muted text, captions */


  /* --- Semantic Color Tokens --- */

  /* Backgrounds */
  --bg-primary:        var(--color-cream-100);   /* Main page background */
  --bg-secondary:      var(--color-cream-200);   /* Cards, alt section bg */
  --bg-tertiary:       var(--color-cream-300);   /* Deeper inset backgrounds */
  --bg-sage-tint:      var(--color-sage-50);     /* Gentle green-tinted sections */
  --bg-blue-tint:      var(--color-blue-50);     /* Gentle blue-tinted sections */
  --bg-dark:           var(--color-deep-900);    /* Footer, dark sections */

  /* Text */
  --text-primary:      var(--color-deep-800);    /* Body text */
  --text-secondary:    var(--color-blue-800);    /* Secondary text */
  --text-muted:        var(--color-warm-500);    /* Captions, meta text */
  --text-on-dark:      var(--color-cream-50);    /* Text on dark backgrounds */
  --text-heading:      var(--color-deep-800);    /* All headings */
  --text-accent-green: var(--color-sage-400);    /* Green highlighted text */
  --text-accent-blue:  var(--color-blue-400);    /* Blue highlighted text */

  /* Borders & Dividers */
  --border-light:      var(--color-cream-300);   /* Subtle dividers */
  --border-medium:     var(--color-warm-300);    /* Cards, form inputs */
  --border-accent:     var(--color-sage-400);    /* Focused inputs */

  /* Brand */
  --brand-green:       var(--color-sage-400);    /* Primary green */
  --brand-blue:        var(--color-blue-400);    /* Primary blue */
  --brand-gold:        var(--color-gold-300);    /* Accent gold */
  --brand-dark:        var(--color-deep-800);    /* Dark anchor */

  /* CTA — Call To Action */
  --cta-bg:               var(--color-deep-800);
  --cta-bg-hover:         var(--color-blue-800);
  --cta-text:             var(--color-cream-50);
  --cta-secondary-bg:     transparent;
  --cta-secondary-border: var(--color-deep-800);
  --cta-secondary-text:   var(--color-deep-800);

  /* States */
  --state-focus:       var(--color-blue-400);
  --state-success:     var(--color-sage-400);
  --state-error:       #B85C4A;   /* Warm terracotta */


/* ============================================================
   2. TYPOGRAPHY TOKENS
   ============================================================ */

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;

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

  /* Type Scale — Major Third (1.250 ratio) */
  --text-xs:   0.64rem;
  --text-sm:   0.80rem;
  --text-base: 1.00rem;
  --text-md:   1.25rem;
  --text-lg:   1.563rem;
  --text-xl:   1.953rem;
  --text-2xl:  2.441rem;
  --text-3xl:  3.052rem;
  --text-4xl:  3.815rem;

  /* Line Heights */
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.60;
  --leading-relaxed: 1.80;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;


/* ============================================================
   3. SPACING TOKENS
   ============================================================ */

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;
  --space-40:  10rem;

  --section-gap:        var(--space-24);
  --section-gap-large:  var(--space-32);
  --component-gap:      var(--space-12);
  --element-gap:        var(--space-6);
  --content-max-width:  75rem;
  --text-max-width:     42rem;


/* ============================================================
   4. SHAPE & BORDER TOKENS
   ============================================================ */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  40px;
  --radius-pill: 9999px;

  --border-width-thin:   1px;
  --border-width-medium: 1.5px;
  --border-width-thick:  2px;


/* ============================================================
   5. SHADOW TOKENS
   ============================================================ */

  --shadow-sm:
    0 1px 2px hsla(120, 20%, 15%, 0.04),
    0 2px 6px hsla(120, 20%, 15%, 0.06);

  --shadow-md:
    0 2px 4px hsla(120, 20%, 15%, 0.04),
    0 4px 12px hsla(120, 20%, 15%, 0.08),
    0 8px 24px hsla(120, 20%, 15%, 0.05);

  --shadow-lg:
    0 4px 8px hsla(120, 20%, 15%, 0.04),
    0 8px 20px hsla(120, 20%, 15%, 0.08),
    0 20px 48px hsla(120, 20%, 15%, 0.10);

  --shadow-xl:
    0 8px 16px hsla(120, 20%, 15%, 0.05),
    0 16px 40px hsla(120, 20%, 15%, 0.10),
    0 40px 80px hsla(120, 20%, 15%, 0.12);

  --glow-sage: 0 0 0 3px hsla(160, 22%, 57%, 0.25);
  --glow-blue: 0 0 0 3px hsla(197, 25%, 55%, 0.25);


/* ============================================================
   6. MOTION & ANIMATION TOKENS
   ============================================================ */

  --duration-instant:  80ms;
  --duration-fast:     160ms;
  --duration-normal:   300ms;
  --duration-slow:     500ms;
  --duration-drift:    800ms;
  --duration-breath:   1200ms;

  --ease-gentle:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-settle:  cubic-bezier(0.34, 1.02, 0.64, 1.00);
  --ease-drift:   cubic-bezier(0.16, 1.00, 0.30, 1.00);
  --ease-in-soft: cubic-bezier(0.55, 0.00, 1.00, 0.45);

  --transition-color:
    color var(--duration-fast) var(--ease-gentle),
    background-color var(--duration-fast) var(--ease-gentle),
    border-color var(--duration-fast) var(--ease-gentle);
  --transition-transform: transform var(--duration-normal) var(--ease-gentle);
  --transition-shadow:    box-shadow var(--duration-normal) var(--ease-gentle);
  --transition-all:       all var(--duration-normal) var(--ease-gentle);


/* ============================================================
   7. Z-INDEX TOKENS
   ============================================================ */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;


/* ============================================================
   8. LAYOUT TOKENS
   ============================================================ */

  --nav-height: 4.5rem;

  --section-padding-y:       var(--space-24);
  --section-padding-y-large: var(--space-32);
  --section-padding-x:       var(--space-8);

  --grid-columns: 12;
  --grid-gap:     var(--space-6);
  --grid-gap-sm:  var(--space-4);


/* ============================================================
   9. BREAKPOINT TOKENS
   ============================================================ */

  --bp-mobile:   640px;   /* below → single column, hamburger nav */
  --bp-tablet:  1024px;   /* 640–1023px → two-column, condensed nav */
  --bp-desktop: 1280px;   /* 1024px+ → full layout, horizontal nav */

}


/* ============================================================
   9. BASE RESETS & ROOT STYLES
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   10. BASE TYPOGRAPHY STYLES
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-medium);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }
h5 { font-size: var(--text-md);  font-weight: var(--weight-regular); }
h6 { font-size: var(--text-base); font-weight: var(--weight-medium); }

p {
  max-width: var(--text-max-width);
  line-height: var(--leading-normal);
}

.text-lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-light);
  color: var(--text-secondary);
}

.text-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-green);
}

.text-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

a {
  color: var(--text-accent-green);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-sage-600);
}

a:focus-visible {
  outline: none;
  box-shadow: var(--glow-sage);
  border-radius: var(--radius-sm);
}


/* ============================================================
   11. UTILITY CLASSES
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.container--narrow {
  max-width: var(--text-max-width);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-padding-y);
}

.section--large {
  padding-block: var(--section-padding-y-large);
}

.bg-primary   { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-sage-tint { background-color: var(--bg-sage-tint); }
.bg-blue-tint { background-color: var(--bg-blue-tint); }
.bg-dark      { background-color: var(--bg-dark); color: var(--text-on-dark); }

.divider-curve {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.divider-curve svg {
  display: block;
  width: 100%;
  height: 48px;
}


/* ============================================================
   12. NAV SCROLL STATE
   These rules live here (global) because Blazor CSS isolation
   cannot reach across the component boundary from NavBar.razor.css
   to a class on <html>. The ID selector (#site-nav) provides
   enough specificity to override the scoped defaults.

   Height deliberately does NOT change here (unlike background/blur/
   shadow) — site-nav carries its own view-transition-name (see
   NavBar.razor.css), and the old/new capture heights differing across
   a navigation made the browser's group-level size morph stretch the
   live nav to fill a stale box for the length of the transition. No
   good CSS override was found to suppress that morph once the sizes
   genuinely differ, so the height difference itself was removed.
   ============================================================ */

html.lel-scrolled #site-nav {
  background: color-mix(in srgb, var(--bg-secondary) 96%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

html.lel-scrolled #site-nav::after {
  opacity: 1;
}

html.lel-scrolled #site-nav .nav-link {
  color: var(--text-primary);
}

html.lel-scrolled #site-nav .nav-wordmark {
  color: var(--color-deep-800);
  font-size: 1.65rem;
}

@media (max-width: 1023px) {
  html.lel-scrolled #site-nav .nav-wordmark {
    font-size: 1.45rem;
  }
}

html.lel-scrolled #site-nav .nav-cta {
  background: var(--cta-bg);
  color: var(--cta-text);
}

html.lel-scrolled #site-nav .hamburger {
  color: var(--text-primary);
}


/* ============================================================
   13. PAGE VIEW TRANSITIONS
   ::view-transition-* pseudo-elements are generated outside the
   normal DOM tree (rooted at the document, not the component), so
   Blazor CSS isolation's scope attribute can never reach them —
   same reasoning as the nav scroll-state block above. The named
   region itself (view-transition-name: page-content) is declared
   in PageTransition.razor.css.
   ============================================================ */

::view-transition-old(page-content),
::view-transition-new(page-content) {
  animation-duration: var(--duration-slow);
  animation-timing-function: var(--ease-gentle);
}

/* Footer isn't given a view-transition-name, so it falls under the
   implicit root capture — which still gets the browser's default
   crossfade unless turned off, briefly dimming/flashing shared chrome
   that never actually changed between pages. animation: none alone
   left this ambiguous in practice: without an explicit opacity, which
   of the stacked old/new snapshots actually stays visible for the
   duration turned out not to be reliable, so both are pinned outright
   — old hidden, new (the live page) shown — leaving no room for that.
   mix-blend-mode must be reset alongside, otherwise old+new stack
   fully opaque under the default plus-lighter blend and wash out
   brighter instead of just sitting still. */
::view-transition-old(root) {
  animation: none;
  opacity: 0;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
}

/* NavBar carries its own view-transition-name (site-nav, declared in
   NavBar.razor.css) rather than being left under root: root is the
   implicit group for EVERYTHING unnamed at once, and leaving a sticky,
   always-on-top element bundled into that broad, catch-all capture
   alongside the separately-named page-content region produced real
   compositing/stacking bugs — not just an unwanted fade, but the whole
   bar disappearing for the length of the transition. Its own isolated
   group, pinned to the live view the same way as root above, sidesteps
   that entirely. */
::view-transition-old(site-nav) {
  animation: none;
  opacity: 0;
  mix-blend-mode: normal;
}

::view-transition-new(site-nav) {
  animation: none;
  opacity: 1;
  mix-blend-mode: normal;
}

/* ::view-transition-old/new above only cover the swap between the two
   captured images — the GROUP wrapping them is a separate animation
   that morphs its box from the old element's captured size/position to
   the new one's (root and site-nav can each end up a different size:
   the nav's own height shrinks between its scrolled and top states).
   Left running, the live content gets stretched to fill that box while
   it animates, squashing site-nav vertically for the transition's
   length before snapping to full height. Since old/new are already
   pinned above rather than crossfading, there's nothing for this morph
   to usefully animate between either. */
::view-transition-group(root),
::view-transition-group(site-nav) {
  animation: none;
}

/* backdrop-filter only blurs content sitting behind the element within
   the SAME stacking context. view-transition-name on .page-transition-
   wrapper (the content the nav's blur reads through) pulls it into its
   own transition stacking context for the duration of a transition,
   which breaks that "see-through" — a spec-acknowledged View
   Transitions limitation, not something fixable by animating the
   pseudo-elements further. The nav's blur silently fails to render
   while a transition is active, reading as the app bar dropping out.
   Suspending just the blur for that window sidesteps it entirely;
   background/shadow/height still hold the nav in place as normal. */
html:active-view-transition #site-nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}