/* Xuan Media landing: theme.css, the single token layer.
   Palette (four colours):
     Deep forest  #142D29  dark backgrounds   ~45%
     Off-white    #F7F8F3  light sections     ~30%
     Brand green  #2F5D57  brand elements     ~15%
     Electric lime #C9F45B buttons/highlights ~10%
   Every other value below is a tint or shade of one of these four.
   Display and UI: Geist. Accent italics: Newsreader. */

:root{
  /* primitives (never used directly by components) */
  /* off-white family */
  --paper-0:#ffffff;
  --paper-50:#fbfcf8;
  --paper-100:#f7f8f3;
  --paper-200:#eceee5;
  --paper-300:#d9ddd0;
  /* green-grey text and borders for light sections */
  --stone-500:#7d8a84;
  --stone-600:#4f5d57;
  /* deep forest family */
  --ink-600:#3f6660;
  --ink-700:#2b4f49;
  --ink-800:#1f3e39;
  --ink-900:#183531;
  --ink-950:#142d29;
  --ink-990:#0e221f;
  /* brand green family */
  --pine-200:#cfe3dd;
  --pine-300:#b3d0c8;
  --pine-400:#9dc1b8;
  --pine-500:#5f9389;
  --pine-600:#27514b;
  --pine-700:#2f5d57;
  --pine-800:#264c47;
  --pine-900:#1e3d39;
  /* electric lime family */
  --lime-300:#d9f88a;
  --lime-400:#c9f45b;
  --lime-500:#b5e03f;
  --lime-600:#a2cc2e;
  /* text on dark surfaces */
  --slate-300:#b5c4bf;
  --slate-400:#93a5a0;
  --slate-500:#6f837d;
  --mist-100:#f7f8f3;
  --mist-200:#dbe5e1;
  --red-300:#e58e80;
  --red-700:#a33a2e;
  --green-300:#8fcf9e;
  --green-700:#2f6a3d;

  /* surfaces */
  --color-surface-page:var(--paper-100);
  --color-surface-card:var(--paper-50);
  --color-surface-raised:var(--paper-200);
  --color-surface-elevated:var(--paper-0);
  --color-surface-header:rgba(20,45,41,.92);
  --color-surface-inverse:var(--ink-950);
  --color-surface-inverse-card:var(--ink-900);
  --color-surface-inverse-raised:var(--ink-800);
  --color-surface-inverse-deep:var(--ink-990);

  /* text */
  --color-text-primary:var(--ink-950);
  --color-text-secondary:var(--stone-600);
  --color-text-accent:var(--pine-700);
  --color-text-brand:var(--pine-700);
  --color-text-on-action:var(--ink-950);
  --color-text-inverse:var(--mist-100);
  --color-text-inverse-secondary:var(--slate-300);
  --color-text-inverse-accent:var(--lime-400);
  --color-text-inverse-brand:var(--lime-400);
  --color-text-error:var(--red-700);
  --color-text-success:var(--green-700);

  /* action: one primary (electric lime), outlined in forest on light sections */
  --color-action-primary:var(--lime-400);
  --color-action-primary-hover:var(--lime-500);
  --color-action-primary-active:var(--lime-600);
  --color-action-primary-border:var(--ink-950);
  --color-action-secondary-hover:rgba(20,45,41,.06);
  --color-action-secondary-active:rgba(20,45,41,.12);
  /* primary action on dark surfaces: same lime, lighter on hover */
  --color-action-inverse:var(--lime-400);
  --color-action-inverse-hover:var(--lime-300);
  --color-action-inverse-active:var(--lime-500);
  --color-text-on-action-inverse:var(--ink-950);
  --color-action-inverse-secondary-hover:rgba(247,248,243,.08);
  --color-action-inverse-secondary-active:rgba(247,248,243,.16);

  /* borders */
  --color-border-subtle:var(--paper-300);
  --color-border-strong:var(--stone-500);
  --color-border-input:var(--stone-500);
  --color-border-error:var(--red-700);
  --color-border-inverse:rgba(247,248,243,.12);
  --color-border-inverse-strong:rgba(247,248,243,.36);
  --color-focus-ring:var(--pine-700);
  --color-focus-ring-inverse:var(--lime-400);
  --color-selection:rgba(201,244,91,.5);

  /* atmosphere: glows, grid lines, mockup fills */
  --color-glow-brand:rgba(47,93,87,.6);
  --color-glow-warm:rgba(201,244,91,.08);
  --color-grid-line:rgba(247,248,243,.05);
  --color-mock-fill:var(--paper-200);
  --color-mock-line:var(--paper-300);
  --color-mock-ink:var(--ink-950);
  --color-mock-brand:var(--pine-700);
  --color-mock-brand-soft:rgba(47,93,87,.12);
  --color-mock-warm:rgba(47,93,87,.12);
  --color-badge-bg:var(--lime-400);
  --color-badge-fg:var(--ink-950);
  --gradient-mock-image:linear-gradient(135deg, var(--pine-700) 0%, var(--pine-500) 48%, var(--lime-400) 100%);
  --gradient-mock-image-2:linear-gradient(160deg, var(--ink-700) 0%, var(--pine-800) 100%);
  --gradient-hero:radial-gradient(60% 55% at 78% 30%, var(--color-glow-brand), transparent 70%), radial-gradient(45% 50% at 8% 95%, var(--color-glow-warm), transparent 70%);

  /* typography */
  --font-sans:"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  --text-2xs:0.6875rem;
  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.25rem;
  --text-2xl:1.5rem;
  --text-3xl:1.875rem;
  --text-4xl:2.25rem;
  --text-5xl:3rem;
  --text-display:clamp(1.875rem, 1.05rem + 3.9vw, 4.625rem);
  --text-h2:clamp(1.75rem, 1.2rem + 2.3vw, 3.25rem);
  --text-h3:clamp(1.125rem, 1.08rem + .2vw, 1.25rem);
  --text-body:clamp(1rem, .97rem + .15vw, 1.0625rem);
  --text-lead:clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --text-price:clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --text-stat:clamp(3rem, 2rem + 4vw, 5.5rem);
  --leading-display:1.04;
  --leading-tight:1.12;
  --leading-snug:1.3;
  --leading-normal:1.6;
  --tracking-display:-0.035em;
  --tracking-h2:-0.03em;
  --tracking-tight:-0.015em;
  --tracking-label:0.1em;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --measure-body:62ch;

  /* spacing: 4px rhythm */
  --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-14:3.5rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;
  --space-section:clamp(4.5rem, 3rem + 6vw, 8rem);
  --space-gutter:clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --container-max:76rem;
  --header-height:4.25rem;
  --sticky-bar-height:3.5rem;

  /* radius language: soft cards, pill actions, device frames */
  --radius-xs:0.25rem;
  --radius-sm:0.5rem;
  --radius-md:0.875rem;
  --radius-lg:1.25rem;
  --radius-xl:1.75rem;
  --radius-pill:62.5rem;

  /* borders */
  --border-hairline:1px;
  --border-focus:2px;

  /* elevation */
  --shadow-sm:0 1px 2px rgba(20,45,41,.06);
  --shadow-md:0 2px 4px rgba(20,45,41,.04), 0 12px 28px -10px rgba(20,45,41,.16);
  --shadow-lg:0 4px 10px rgba(20,45,41,.06), 0 32px 64px -24px rgba(20,45,41,.32);
  --shadow-device:0 2px 0 rgba(255,255,255,.04) inset, 0 40px 80px -24px rgba(0,0,0,.6), 0 12px 24px -12px rgba(0,0,0,.5);
  --shadow-focus:0 0 0 var(--border-focus) var(--color-surface-page), 0 0 0 calc(var(--border-focus) * 2) var(--color-focus-ring);
  --shadow-focus-inverse:0 0 0 var(--border-focus) var(--color-surface-inverse), 0 0 0 calc(var(--border-focus) * 2) var(--color-focus-ring-inverse);

  /* sizing */
  --size-icon-sm:1rem;
  --size-icon-md:1.25rem;
  --size-icon-lg:1.5rem;
  --size-control:3rem;
  --size-control-lg:3.5rem;
  --size-control-sm:2.5rem;
  --size-check:1.25rem;

  /* motion */
  --duration-fast:150ms;
  --duration-base:240ms;
  --duration-slow:420ms;
  --duration-float:6s;
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  --opacity-disabled:0.5;
  --blur-header:16px;
  --z-header:50;
  --z-sticky:60;

  /* component defaults that variants override locally */
  --btn-bg:transparent;
  --btn-fg:var(--color-text-primary);
  --btn-border:var(--color-border-strong);

  color-scheme:light;
}

/* Brand green bands (.is-brand on an .is-inverse section): same inverse styling on #2F5D57. */
.is-brand{
  --color-surface-inverse:var(--pine-700);
  --color-surface-inverse-card:var(--pine-600);
  --color-surface-inverse-raised:var(--pine-800);
  --color-text-inverse-secondary:var(--mist-200);
  --color-border-inverse:rgba(247,248,243,.18);
  --color-border-inverse-strong:rgba(247,248,243,.5);
  --color-glow-brand:rgba(201,244,91,.1);
}

/* Forest sections (.theme-dark on any section), and the whole page when dark mode is on.
   The page is locked to light (data-theme="light" on <html>), so only .theme-dark uses these today. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-surface-page:var(--ink-950);
    --color-surface-card:var(--ink-900);
    --color-surface-raised:var(--ink-900);
    --color-surface-elevated:var(--ink-800);
    --color-surface-inverse:var(--ink-990);
    --color-surface-inverse-card:var(--ink-900);
    --color-surface-inverse-raised:var(--ink-800);
    --color-text-primary:var(--mist-100);
    --color-text-secondary:var(--slate-300);
    --color-text-accent:var(--lime-400);
    --color-text-brand:var(--lime-400);
    --color-text-on-action:var(--ink-950);
    --color-text-error:var(--red-300);
    --color-text-success:var(--green-300);
    --color-action-primary:var(--lime-400);
    --color-action-primary-hover:var(--lime-300);
    --color-action-primary-active:var(--lime-500);
    --color-action-primary-border:var(--lime-400);
    --color-action-secondary-hover:rgba(247,248,243,.08);
    --color-action-secondary-active:rgba(247,248,243,.16);
    --color-border-subtle:rgba(247,248,243,.12);
    --color-border-strong:var(--slate-500);
    --color-border-input:var(--slate-500);
    --color-border-error:var(--red-300);
    --color-focus-ring:var(--lime-400);
    --color-selection:rgba(201,244,91,.3);
    --color-mock-fill:var(--ink-800);
    --color-mock-line:var(--ink-700);
    --color-mock-ink:var(--mist-100);
    --color-mock-brand:var(--lime-400);
    --color-mock-brand-soft:rgba(201,244,91,.14);
    --color-mock-warm:rgba(201,244,91,.14);
    --shadow-md:0 2px 4px rgba(0,0,0,.2), 0 12px 28px -10px rgba(0,0,0,.5);
    --shadow-lg:0 4px 10px rgba(0,0,0,.25), 0 32px 64px -24px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"], .theme-dark{
  --color-surface-page:var(--ink-950);
  --color-surface-card:var(--ink-900);
  --color-surface-raised:var(--ink-900);
  --color-surface-elevated:var(--ink-800);
  --color-surface-inverse:var(--ink-990);
  --color-surface-inverse-card:var(--ink-900);
  --color-surface-inverse-raised:var(--ink-800);
  --color-text-primary:var(--mist-100);
  --color-text-secondary:var(--slate-300);
  --color-text-accent:var(--lime-400);
  --color-text-brand:var(--lime-400);
  --color-text-on-action:var(--ink-950);
  --color-text-error:var(--red-300);
  --color-text-success:var(--green-300);
  --color-action-primary:var(--lime-400);
  --color-action-primary-hover:var(--lime-300);
  --color-action-primary-active:var(--lime-500);
  --color-action-primary-border:var(--lime-400);
  --color-action-secondary-hover:rgba(247,248,243,.08);
  --color-action-secondary-active:rgba(247,248,243,.16);
  --color-border-subtle:rgba(247,248,243,.12);
  --color-border-strong:var(--slate-500);
  --color-border-input:var(--slate-500);
  --color-border-error:var(--red-300);
  --color-focus-ring:var(--lime-400);
  --color-selection:rgba(201,244,91,.3);
  --color-mock-fill:var(--ink-800);
  --color-mock-line:var(--ink-700);
  --color-mock-ink:var(--mist-100);
  --color-mock-brand:var(--lime-400);
  --color-mock-brand-soft:rgba(201,244,91,.14);
  --color-mock-warm:rgba(201,244,91,.14);
  --shadow-md:0 2px 4px rgba(0,0,0,.2), 0 12px 28px -10px rgba(0,0,0,.5);
  --shadow-lg:0 4px 10px rgba(0,0,0,.25), 0 32px 64px -24px rgba(0,0,0,.7);
  color-scheme:dark;
}