/* Land to Freedom — design tokens. Single source of truth: components never use raw hex. */

:root {
  /* Palette — green is the brand. White dominates the page; deep green grounds the
     dark surfaces; vivid green is the accent, taken from the campaign fliers.
     Components never reference these directly — they use the semantic tokens below. */
  --ltf-deep-900:  #041f0f;
  --ltf-deep-800:  #072e17;
  --ltf-deep-700:  #0c4021;
  --ltf-deep-600:  #13552d;
  --ltf-green-800: #12662c;
  --ltf-green-700: #17803a;
  --ltf-green-600: #1d9948;
  --ltf-green-500: #26b356;
  --ltf-green-400: #3ed12e;
  --ltf-green-300: #6ee65c;
  --ltf-green-200: #a8f29c;
  --ltf-green-100: #d7fad1;
  --ltf-green-50:  #eefdec;
  --ltf-white:     #ffffff;
  --ltf-grey-50:   #f6faf7;
  --ltf-grey-100:  #edf3ee;
  --ltf-grey-200:  #dde6e0;
  --ltf-grey-300:  #c3d0c7;
  --ltf-grey-500:  #79887e;
  --ltf-grey-600:  #57665c;
  --ltf-grey-800:  #2a3a30;

  /* Semantic — light */
  --bg:            var(--ltf-white);
  --bg-subtle:     var(--ltf-grey-50);
  --bg-sunken:     var(--ltf-grey-100);
  --bg-inverse:    var(--ltf-deep-900);
  --surface:       var(--ltf-white);
  --surface-raised:var(--ltf-white);
  --border:        var(--ltf-grey-200);
  --border-strong: var(--ltf-grey-300);

  --text:          var(--ltf-deep-900);
  --text-muted:    var(--ltf-grey-600);
  --text-faint:    var(--ltf-grey-500);
  --text-inverse:  var(--ltf-white);
  --text-on-brand: var(--ltf-white);
  --text-on-accent:var(--ltf-deep-900);

  --brand:         var(--ltf-green-700);
  --brand-hover:   var(--ltf-green-800);
  --brand-soft:    var(--ltf-green-50);
  --accent:        var(--ltf-green-400);
  --accent-hover:  var(--ltf-green-300);
  --accent-soft:   var(--ltf-green-100);

  --link:          var(--ltf-green-700);
  --link-hover:    var(--ltf-green-800);
  --focus:         var(--ltf-green-600);
  --selection-bg:  var(--ltf-green-200);
  --selection-fg:  var(--ltf-deep-900);

  --danger:        #b3261e;
  --danger-soft:   #fdecea;

  /* Always-dark surfaces (hero, footer, inverse sections): fixed in both schemes. */
  --surface-dark:  var(--ltf-deep-900);
  --hero-gradient: linear-gradient(150deg, var(--ltf-deep-900) 0%, var(--ltf-deep-800) 52%, var(--ltf-deep-700) 100%);
  --hero-glow:     radial-gradient(circle, rgb(62 209 46 / 16%) 0%, transparent 64%);
  --surface-veil:  rgb(255 255 255 / 6%);
  --on-dark:         #f1f8f3;
  --on-dark-muted:   #bcd4c3;
  --on-dark-faint:   #8daa96;
  --on-dark-border:  #10381d;
  --on-dark-outline: #2a5c39;

  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23556158' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --select-chevron-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%239fb5a9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Typography */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --step--1: clamp(0.78rem, 0.75rem + 0.13vw, 0.84rem);
  --step-0:  clamp(0.92rem, 0.89rem + 0.13vw, 1rem);
  --step-1:  clamp(1.05rem, 1rem + 0.22vw, 1.18rem);
  --step-2:  clamp(1.2rem, 1.11rem + 0.4vw, 1.45rem);
  --step-3:  clamp(1.6rem, 1.38rem + 1vw, 2.35rem);
  --step-4:  clamp(1.95rem, 1.6rem + 1.6vw, 2.95rem);
  --step-5:  clamp(2.3rem, 1.8rem + 2.4vw, 3.9rem);
  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-body:  1.58;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;

  /* Space — generous, per brief §12 */
  --space-2xs: 0.25rem;
  --space-xs:  0.45rem;
  --space-sm:  0.65rem;
  --space-md:  0.9rem;
  --space-lg:  1.2rem;
  --space-xl:  1.6rem;
  --space-2xl: 2.15rem;
  --space-3xl: 2.9rem;
  --space-4xl: 4rem;
  /* Section rhythm scales with the viewport so phones are not padded like desktops. */
  --section-y:       clamp(2.4rem, 1.5rem + 3.6vw, 4rem);
  --section-y-tight: clamp(1.6rem, 1.1rem + 2.2vw, 2.4rem);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(4 31 15 / 6%), 0 1px 3px rgb(4 31 15 / 4%);
  --shadow-md: 0 6px 18px rgb(4 31 15 / 9%), 0 2px 6px rgb(4 31 15 / 5%);
  --shadow-lg: 0 24px 60px rgb(4 31 15 / 14%), 0 6px 16px rgb(4 31 15 / 7%);

  --page-bg:        var(--ltf-green-200);   /* tinted page behind the white canvas */
  --canvas:         var(--ltf-white);
  --canvas-inset:   clamp(0.5rem, 1.2vw, 1rem);
  --shell-radius:   var(--radius-xl);

  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 64px;
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Semantic — dark. Applies on system preference unless the visitor forced light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            var(--ltf-deep-900);
    --bg-subtle:     var(--ltf-deep-800);
    --bg-sunken:     #02150a;
    --bg-inverse:    var(--ltf-white);
    --surface:       var(--ltf-deep-800);
    --surface-raised:var(--ltf-deep-700);
    --border:        #10381d;
    --border-strong: #2a5c39;

    --text:          #eef8f1;
    --text-muted:    #a6c0ae;
    --text-faint:    #799184;
    --text-inverse:  var(--ltf-deep-900);
    --text-on-brand: var(--ltf-deep-900);

    --brand:         var(--ltf-green-300);
    --brand-hover:   #92ee84;
    --brand-soft:    #10331d;
    --accent:        var(--ltf-green-400);
    --accent-hover:  var(--ltf-green-300);
    --accent-soft:   #0f3317;

    --link:          var(--ltf-green-300);
    --link-hover:    #92ee84;
    --focus:         var(--ltf-green-400);
    --page-bg:       #071a0e;
    --canvas:        var(--ltf-deep-800);
    --danger:        #ffb4ab;
    --danger-soft:   #3b1512;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 45%);
    --shadow-lg: 0 18px 48px rgb(0 0 0 / 55%);
  }
}

:root[data-theme="dark"] {
  --bg:            var(--ltf-deep-900);
  --bg-subtle:     var(--ltf-deep-800);
  --bg-sunken:     #02150a;
  --bg-inverse:    var(--ltf-white);
  --surface:       var(--ltf-deep-800);
  --surface-raised:var(--ltf-deep-700);
  --border:        #10381d;
  --border-strong: #2a5c39;

  --text:          #eef8f1;
  --text-muted:    #a6c0ae;
  --text-faint:    #799184;
  --text-inverse:  var(--ltf-deep-900);
  --text-on-brand: var(--ltf-deep-900);

  --brand:         var(--ltf-green-300);
  --brand-hover:   #92ee84;
  --brand-soft:    #10331d;
  --accent:        var(--ltf-green-400);
  --accent-hover:  var(--ltf-green-300);
  --accent-soft:   #0f3317;

  --link:          var(--ltf-green-300);
  --link-hover:    #92ee84;
  --focus:         var(--ltf-green-400);
  --page-bg:       #071a0e;
  --canvas:        var(--ltf-deep-800);
  --danger:        #ffb4ab;
  --danger-soft:   #3b1512;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 45%);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 55%);
}