/* Green Dominance tokens. Every colour, size, radius, shadow and motion
   value on every page comes from here. Never write a raw hex in a page.

   Colours are brief.md section 8. Green means Shop, burgundy means Member,
   yellow is the spark, lime is the loud green (dark text only).
   Themes: light by default, dark by prefers-color-scheme, and either can be
   forced on any element with data-theme="light" | "dark" (the gallery does
   this per pane). */

:root,
[data-theme="light"] {
  /* brand, light */
  --green: #2e7d32;
  --green-deep: #1b5e20;
  --green-tint: #e8f3e8;
  --burgundy: #722f37;
  --burgundy-deep: #5a242b;
  --burgundy-tint: #f6e9ea;
  --yellow: #f2c230;
  --yellow-tint: #fff6d6;
  --lime: #c3ef5c;
  --deep: #0f2a12;              /* green-black, the dark moments */
  --white: #ffffff;
  --black: #000000;

  /* sheet paints (the loud and dark moments) */
  --paint-burgundy: linear-gradient(160deg, #6a2a32 0%, #722f37 46%, #80363f 100%);
  --paint-green: #2e7d32;
  --paint-deep: #0f2a12;

  /* surfaces and ink */
  --bg: #ffffff;
  --surface: #f5f7f4;
  --studio: #e4e7e0;            /* The Bloom's calm studio sage, behind products */
  --raised: #ffffff;            /* cards and fields that sit on a surface */
  --ink: #111411;
  --ink-muted: #5f665e;
  --ink-faint: #6d716a;         /* quietest text: 4.6:1 on bg, surface, raised */
  --line: rgba(17, 20, 17, 0.12);
  --line-strong: rgba(17, 20, 17, 0.24);
  --glass: rgba(255, 255, 255, 0.78);
  --scrim: rgba(10, 14, 11, 0.42);

  /* roles */
  --member-ink: #722f37;            /* burgundy text on burgundy-tint */
  --on-spark: #111411;              /* text on yellow is always dark */
  --on-accent: #ffffff;
  --on-member: #ffffff;
  --held: #8a6a12;                  /* held upgrade bonus, readable on spark-tint */
  --success: #1f7a2b;
  --success-tint: #e6f4e6;
  --danger: #b3261e;                /* red only for errors and alerts */
  --danger-tint: #fdecea;
  --warning-ink: #6b5200;
  --info: #2a5a8a;

  /* sheets: a section sets these, components read them */
  --on-fg: #ffffff;               /* text that sits on a --fg fill */

  /* text on the tinted sheets (mint, cream, blush): muted and faint,
     each at least 4.5:1 on its own tint */
  --mint-muted: #18491c;
  --mint-faint: #417845;
  --cream-muted: #473907;
  --cream-faint: #846d24;
  --blush-muted: #722f37;
  --blush-faint: #945960;
  --avatar-bg: #722f37;           /* initials sit on it in white */

  --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 40px -18px rgba(20, 40, 25, 0.45), 0 0 0 1px rgba(17, 20, 17, 0.06);
  --shadow-pop: 0 30px 80px -30px rgba(15, 30, 18, 0.45), 0 0 0 1px rgba(17, 20, 17, 0.06);
  --shadow-card: 0 1px 2px rgba(17, 20, 17, 0.04), 0 8px 24px -16px rgba(17, 20, 17, 0.18);
  --shadow-focus: 0 0 0 3px rgba(46, 125, 50, 0.28);


  /* component paints that differ by theme (tokens, so nested themes work) */
  --btn-shop-bg: #1b5e20;
  --btn-shop-fg: #ffffff;
  --on-danger: #ffffff;
  --pv-ink: #1b5e20;
  --pc-studio: #e4e7e0;
  --pc-studio-red: color-mix(in srgb, #f6e9ea 60%, #e4e7e0);
  --pc-studio-gold: color-mix(in srgb, #fff6d6 55%, #e4e7e0);
  --pc-studio-green: color-mix(in srgb, #e8f3e8 60%, #e4e7e0);
  --pc-glow: #ffffff;
  --pc-glow-mix: 55%;
  --leaf-blend: multiply;
  --leaf-opacity: 0.2;
  --contact-shadow: rgba(20, 34, 24, 0.22);
  --toast-bg: #111411;
  --toast-fg: #ffffff;
  --toast-ok: #c3ef5c;
  --toast-err: #ff8a80;
  --toast-btn: rgba(255, 255, 255, 0.14);
  --plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111411' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* dark: pure black page, the same voices lifted for contrast */
[data-theme="dark"] {
  --green: #4caf50;
  --green-deep: #1b5e20;
  --green-tint: #0f2a12;
  --burgundy: #c9707a;
  --burgundy-deep: #9c4a54;
  --burgundy-tint: #2a1215;
  --yellow: #f2c230;
  --yellow-tint: #2a2208;
  --lime: #c3ef5c;
  --deep: #0b1d0d;

  --paint-burgundy: linear-gradient(160deg, #3a151a 0%, #4a1c22 55%, #5a242b 100%);
  --paint-green: #1b5e20;
  --paint-deep: #0b1d0d;

  --bg: #000000;
  --surface: #141614;
  --studio: #1b1e1b;
  --raised: #1a1d1a;
  --ink: #ffffff;
  --ink-muted: #a3a89e;
  --ink-faint: #82887f;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.26);
  --glass: rgba(24, 27, 24, 0.74);
  --scrim: rgba(0, 0, 0, 0.62);

  --on-accent: #06140a;
  --on-member: #1a0a0c;
  --member-ink: #e3a2aa;
  --held: #f2c230;
  --success: #6fcf73;
  --success-tint: #0f2a12;
  --danger: #ff8a80;
  --danger-tint: #33100e;
  --warning-ink: #f2c230;
  --info: #8db8e8;

  --on-fg: #000000;

  --mint-muted: #88ab8a;
  --mint-faint: #6b976f;
  --cream-muted: #f7da83;
  --cream-faint: #a78720;
  --blush-muted: #e3a2aa;
  --blush-faint: #ad737a;
  --avatar-bg: #9c4a54;

  --shadow-float: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 40px -16px rgba(0, 0, 0, 0.9);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 80px -20px rgba(0, 0, 0, 0.9);
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-focus: 0 0 0 3px rgba(76, 175, 80, 0.4);


  --btn-shop-bg: #4caf50;
  --btn-shop-fg: #06140a;
  --on-danger: #1a0705;
  --pv-ink: #4caf50;
  --pc-studio: #171a17;
  --pc-studio-red: #1f1416;
  --pc-studio-gold: #1d1a10;
  --pc-studio-green: #121b13;
  --pc-glow: #3a4038;
  --pc-glow-mix: 70%;
  --leaf-blend: screen;
  --leaf-opacity: 0.05;
  --contact-shadow: rgba(0, 0, 0, 0.6);
  --toast-bg: #f4f6f1;
  --toast-fg: #111411;
  --toast-ok: #1b5e20;
  --toast-err: #b3261e;
  --toast-btn: rgba(0, 0, 0, 0.08);
  --plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E");

  color-scheme: dark;
}


/* role aliases: declared on every themed element so they re-resolve
   inside a nested theme (a dark pane on a light page and the reverse) */
:root, [data-theme] {
  --accent: var(--green);           /* Shop, links, primary actions */
  --accent-deep: var(--green-deep);
  --accent-tint: var(--green-tint);
  --member: var(--burgundy);        /* Member area */
  --member-tint: var(--burgundy-tint);
  --spark: var(--yellow);
  --spark-tint: var(--yellow-tint);
  --earn: var(--green);             /* earnings and credits */
  /* sheet variables: a sheet overrides these, components read them */
  --sheet-bg: var(--bg);
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --fg-faint: var(--ink-faint);     /* quietest words; still 4.5:1 */
  --rule: var(--line);
  --field-bg: var(--raised);
  --chip-bg: var(--surface);
  background-color: var(--bg);
  color: var(--ink);
}

/* The theme is always set as data-theme on <html> by the boot script in
   each page's <head> (README template), which follows the system setting
   until the visitor picks one. Tokens therefore live only on [data-theme]. */

:root {
  /* type: swap --font-display for direction B (Schibsted Grotesk) or C
     (Funnel Display) and the whole site follows */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* scale. Display heads are lowercase, tight, and end in a full stop */
  --fs-giant: clamp(64px, 10.4vw, 168px);   /* section words: "the range." */
  --fs-display: clamp(48px, 7.2vw, 112px);  /* page titles */
  --fs-h1: clamp(38px, 4.8vw, 72px);
  --fs-h2: clamp(28px, 3.2vw, 44px);
  --fs-h3: clamp(21px, 1.8vw, 26px);
  --fs-h4: 18px;
  --fs-lead: clamp(17px, 1.4vw, 20px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-tiny: 12.5px;
  --fs-mono: 10.5px;                        /* mono labels, uppercase, tracked */
  --fs-figure: clamp(40px, 5vw, 72px);      /* big numbers in the dashboard */

  --lh-tight: 0.86;
  --lh-head: 1.02;
  --lh-body: 1.5;
  --tracking-giant: -0.068em;
  --tracking-head: -0.045em;
  --tracking-ui: -0.012em;
  --tracking-mono: 0.1em;

  --w-regular: 450;
  --w-medium: 560;
  --w-semi: 620;
  --w-bold: 720;
  --wdth-tight: 92;           /* Archivo width axis for giant heads */

  /* spacing, 4-based */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;
  --gutter: clamp(16px, 3.4vw, 28px);
  --band: clamp(72px, 10vw, 128px);   /* vertical padding of a sheet */
  --wrap: 1360px;
  --wrap-text: 68ch;
  --inset: clamp(8px, 1vw, 12px);     /* gap between a sheet and the window */

  /* radii */
  --r-sheet: clamp(22px, 2.2vw, 30px);
  --r-card: 26px;
  --r-panel: 20px;
  --r-field: 16px;
  --r-sm: 10px;
  --r-pill: 999px;

  /* motion: things ease out, nothing bounces */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 420ms;
  --t-sheet: 520ms;
  --t-reveal: 900ms;

  /* sizes */
  --tap: 44px;                 /* minimum touch target */
  --control: 52px;             /* fields and large buttons */
  --nav-h: 60px;
  --sidebar: 268px;
  --tabbar: 68px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
    --t-sheet: 0ms;
    --t-reveal: 0ms;
  }
}