/* ==========================================================================
   Serene Tree Club — design tokens

   Built on serenetree.com's own palette (the SereneTree theme's --st-* values): charcoal #25272d for the logo row,
   forest #38514c for headings and tile buttons, teal #60a597 for the primary nav, ink #333, text #4e4e4e and the
   content-link green #0f654b. LIGHT is the standard (html without data-theme, or data-theme="light"); DARK is an
   optional charcoal variant behind the header toggle (html[data-theme="dark"]).

   Roles (the variable names predate the rebrand; the roles are what matter):
     --stc-action*   primary buttons: forest with white text (light), teal with charcoal text (dark)
     --stc-lime*     the highlight fill for selected states, progress and badges: teal with charcoal text;
                     --stc-lime-text is the accent AS TEXT (links, eyebrows, active nav): #0f654b on light surfaces
     --stc-brand*    forest, for marks and quiet brand washes
     --stc-cat-*     strain types (Indica, Sativa, Hybrid) and flavor families (Fruit, Dessert, Mint, Natural)
   Every text pair here passes WCAG AA (4.5:1) in both themes; tools/contrast.py checks them. Component stylesheets
   consume these variables; never hard-code colors. Fonts: assets/club/fonts.css (self-hosted, OFL).
   ========================================================================== */

/* ---- Light (default) ---------------------------------------------------- */
:root,
.stc {
  color-scheme: light;

  /* Serene Tree palette (serenetree.com) */
  --stc-charcoal: #25272d;
  --stc-forest: #38514c;
  --stc-teal: #60a597;
  --stc-ink: #333333;
  --stc-sale: #f54a3a;

  /* Surfaces */
  --stc-canvas: #f4f6f5;
  --stc-canvas-2: #eaeeec;
  --stc-surface: #ffffff;
  --stc-surface-2: #f6f8f7;
  --stc-surface-3: #ebefed;
  --stc-surface-hover: #e2e8e5;
  --stc-glass: rgba(255, 255, 255, 0.9);
  --stc-line: rgba(37, 39, 45, 0.11);
  --stc-line-strong: rgba(37, 39, 45, 0.24);
  --stc-scrim: rgba(20, 22, 26, 0.52);

  /* Text */
  --stc-text: #25272d;
  --stc-heading: #38514c;
  --stc-text-2: #4e4e4e;
  --stc-muted: #62666b;
  --stc-faint: #969696;

  /* Brand and actions */
  --stc-brand: #38514c;
  --stc-brand-deep: #2b3f3b;
  --stc-brand-wash: rgba(56, 81, 76, 0.1);
  --stc-action: #38514c;
  --stc-action-ink: #ffffff;
  --stc-action-hover: #25272d;
  --stc-lime: #57998c;
  --stc-lime-2: #6fb3a5;
  --stc-lime-wash: rgba(96, 165, 151, 0.16);
  --stc-lime-ink: #15171a;
  --stc-lime-text: #0f654b;
  --stc-violet: #6b4a8a;
  --stc-violet-wash: rgba(107, 74, 138, 0.12);

  /* Semantic */
  --stc-ok: #166a40;
  --stc-ok-wash: rgba(22, 106, 64, 0.12);
  --stc-warn: #875600;
  --stc-warn-wash: rgba(214, 152, 40, 0.16);
  --stc-danger: #ad3226;
  --stc-danger-wash: rgba(245, 74, 58, 0.1);
  --stc-info: #1f5f99;
  --stc-info-wash: rgba(31, 95, 153, 0.1);

  /* Strain types and flavor families (badges, dots, picker chips) */
  --stc-cat-indica: #6b4a8a;
  --stc-cat-sativa: #974c0b;
  --stc-cat-hybrid: #2f6f35;
  --stc-cat-fruit: #a83327;
  --stc-cat-dessert: #7d5238;
  --stc-cat-mint: #0c6a67;
  --stc-cat-natural: #5b6423;
  --stc-cat-tobacco: #72553a;
  --stc-cat-menthol: #0c6a67;

  /* Header (charcoal, like serenetree.com's logo row) and footer (#333, like the site footer) in both themes */
  --stc-topbar-bg: #25272d;
  --stc-topbar-fg: #ffffff;
  --stc-topbar-fg-2: #dadada;
  --stc-topbar-accent: #8fd3c4;
  --stc-footer-bg: #333333;
  --stc-footer-fg: #ffffff;
  --stc-footer-fg-2: #dadada;

  /* Type: Barlow 700 for display headings, Roboto Condensed for labels, buttons and nav, the system stack for body
     copy (Roboto on Android), as on serenetree.com. */
  --stc-font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --stc-font-display: "Barlow", "Roboto Condensed", var(--stc-font);
  --stc-font-ui: "Roboto Condensed", "Arial Narrow", var(--stc-font);
  --stc-fs-xs: 0.75rem;
  --stc-fs-sm: 0.875rem;
  --stc-fs-md: 1rem;
  --stc-fs-lg: 1.125rem;
  --stc-fs-xl: 1.375rem;
  --stc-fs-2xl: clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
  --stc-fs-3xl: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --stc-lh-tight: 1.1;
  --stc-lh: 1.5;
  --stc-tracking-tight: -0.01em;
  --stc-tracking-caps: 0.08em;

  /* Spacing (8pt) */
  --stc-s1: 4px;
  --stc-s2: 8px;
  --stc-s3: 12px;
  --stc-s4: 16px;
  --stc-s5: 24px;
  --stc-s6: 32px;
  --stc-s7: 40px;
  --stc-s8: 56px;
  --stc-s9: 80px;
  --stc-gutter: clamp(16px, 4vw, 40px);
  --stc-max: 1200px;

  /* Shape */
  --stc-radius-xs: 8px;
  --stc-radius-sm: 12px;
  --stc-radius: 16px;
  --stc-radius-lg: 22px;
  --stc-radius-xl: 28px;
  --stc-pill: 999px;

  /* Elevation */
  --stc-shadow-sm: 0 1px 3px rgba(37, 39, 45, 0.08), 0 4px 14px rgba(37, 39, 45, 0.06);
  --stc-shadow: 0 8px 28px rgba(37, 39, 45, 0.1);
  --stc-shadow-lg: 0 20px 56px rgba(37, 39, 45, 0.16);
  --stc-glow: 0 0 0 1px rgba(56, 81, 76, 0.3), 0 10px 30px rgba(96, 165, 151, 0.24);
  --stc-ring-color: #3d8375;
  --stc-ring: 0 0 0 3px var(--stc-ring-color);

  /* Smoke (page transitions): the haze behind the pre-rendered clouds */
  --stc-smoke-haze: rgba(96, 165, 151, 0.18);

  /* Motion */
  --stc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --stc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --stc-dur-fast: 140ms;
  --stc-dur: 200ms;
  --stc-dur-slow: 360ms;
  --stc-dur-smoke: 340ms;

  /* Layout */
  --stc-touch: 44px;
  --stc-bar-h: 64px;
  --stc-safe-top: env(safe-area-inset-top, 0px);
  --stc-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- Dark (optional: charcoal, teal accents) ---------------------------- */
[data-theme="dark"],
[data-theme="dark"] .stc {
  color-scheme: dark;

  --stc-canvas: #17191d;
  --stc-canvas-2: #1c1e23;
  --stc-surface: #212329;
  --stc-surface-2: #282b31;
  --stc-surface-3: #30333a;
  --stc-surface-hover: #383c44;
  --stc-glass: rgba(33, 35, 41, 0.9);
  --stc-line: rgba(255, 255, 255, 0.1);
  --stc-line-strong: rgba(255, 255, 255, 0.2);
  --stc-scrim: rgba(8, 9, 11, 0.72);

  --stc-text: #f3f4f4;
  --stc-heading: #f3f4f4;
  --stc-text-2: #cfd3d6;
  --stc-muted: #a4a9ae;
  --stc-faint: #7b8086;

  --stc-brand: #8cc9bb;
  --stc-brand-deep: #60a597;
  --stc-brand-wash: rgba(96, 165, 151, 0.14);
  --stc-action: #60a597;
  --stc-action-ink: #15171a;
  --stc-action-hover: #7cbcae;
  --stc-lime: #60a597;
  --stc-lime-2: #7cbcae;
  --stc-lime-wash: rgba(96, 165, 151, 0.18);
  --stc-lime-ink: #15171a;
  --stc-lime-text: #8fd3c4;
  --stc-violet: #c9aee6;
  --stc-violet-wash: rgba(201, 174, 230, 0.14);

  --stc-ok: #7fd6a5;
  --stc-ok-wash: rgba(127, 214, 165, 0.14);
  --stc-warn: #f0c46a;
  --stc-warn-wash: rgba(240, 196, 106, 0.14);
  --stc-danger: #ff9d90;
  --stc-danger-wash: rgba(255, 143, 128, 0.12);
  --stc-info: #8cc4f5;
  --stc-info-wash: rgba(140, 196, 245, 0.14);

  --stc-cat-indica: #c9aee6;
  --stc-cat-sativa: #f2b066;
  --stc-cat-hybrid: #9fd88f;
  --stc-cat-fruit: #ff9d88;
  --stc-cat-dessert: #e2b594;
  --stc-cat-mint: #7fdcd3;
  --stc-cat-natural: #cbd68f;
  --stc-cat-tobacco: #d4b08c;
  --stc-cat-menthol: #7fdcd3;

  --stc-topbar-bg: #25272d;
  --stc-footer-bg: #202226;

  --stc-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --stc-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  --stc-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  --stc-glow: 0 0 0 1px rgba(143, 211, 196, 0.3), 0 10px 36px rgba(96, 165, 151, 0.2);
  --stc-ring-color: #8fd3c4;

  --stc-smoke-haze: rgba(226, 236, 232, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  :root,
  .stc {
    --stc-dur-fast: 0ms;
    --stc-dur: 0ms;
    --stc-dur-slow: 0ms;
    --stc-dur-smoke: 0ms;
  }
}