/* ==========================================================================
   Winterhoff — Soft Glass design tokens (tokens.css)
   Frosted surfaces over a slowly drifting green aurora. Pill shapes, heavy
   display type, brand-green gradient fills carrying white text.
   Rule: text on a green or dark fill is always white (--on-brand).
   Load order: fonts.css → tokens.css → core.css → app.css (apps only).
   To rebrand: change the four values in section 1. Nothing else.
   Every derived color has a light value on :root and a dark value in BOTH dark
   blocks below (system preference + explicit data-theme="dark"). Keep them in sync.
   ========================================================================== */

/* ==========================================================================
   1. BRAND — the only values you change to rebrand.
   Everything else in this file is derived from these with color-mix(), so
   buttons, charts, glows, tints, focus rings, the aurora, neutrals and the
   whole dark theme follow automatically. See docs/12-theming.md.
   ========================================================================== */
:root {
  --brand: #69A84B;      /* primary: buttons, accents, charts, toggles, focus */
  --brand-2: #7BC462;    /* lighter partner: gradient end, glows */
  --brand-alt: #46B59A;  /* secondary hue: aurora, gradients, avatars */
  --on-brand: #FFFFFF;   /* text/icons on brand fills; use near-black for light brands (yellow, lime) */
}

/* ==========================================================================
   2. DERIVED TOKENS — do not hard-code brand hex values below this line.
   ========================================================================== */
:root {
  /* Brand family */
  --brand-deep: var(--brand);
  --brand-dark: color-mix(in oklab, var(--brand), black 40%);
  --brand-fill: linear-gradient(135deg, var(--brand), var(--brand-2));
  --text-gradient: linear-gradient(120deg, color-mix(in oklab, var(--brand-alt), black 35%), color-mix(in oklab, var(--brand), black 30%) 45%, color-mix(in oklab, var(--brand), black 8%));

  /* Neutrals (light) — tinted with a little brand so greys feel related */
  --ink: color-mix(in oklab, var(--brand) 10%, #080A08);
  --bg: color-mix(in oklab, var(--brand) 11%, #F2F4F1);
  --surface: rgba(255, 255, 255, .62);
  --surface-solid: #FFFFFF;
  --line: color-mix(in srgb, var(--ink) 9%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 20%, transparent);
  --fg: var(--ink);
  --muted: color-mix(in oklab, var(--brand) 14%, #474C47);
  --faint: color-mix(in oklab, var(--brand) 12%, #7F857F);
  --accent-text: color-mix(in oklab, var(--brand), black 42%);
  --focus: var(--accent-text);
  --chip: color-mix(in srgb, var(--brand) 17%, transparent);
  --ring: color-mix(in srgb, var(--brand) 28%, transparent);
  --hover: color-mix(in srgb, var(--ink) 5%, transparent);
  --track: color-mix(in srgb, var(--ink) 9%, transparent);
  --knob: #FFFFFF;
  --dash: color-mix(in srgb, var(--accent-text) 35%, transparent);
  --shimmer: rgba(255, 255, 255, .7);
  --scrim: color-mix(in srgb, var(--ink) 30%, transparent);

  /* Status (fixed hues: never follow the brand) */
  --warn: #8A5600;  --warn-bg: rgba(245, 158, 11, .18);
  --error: #B4232C; --error-bg: rgba(229, 62, 62, .13); --error-solid: #B4232C; --on-error: #FFFFFF;
  --info: #1F5C9E;  --info-bg: rgba(59, 130, 246, .14); /* in progress: running, queued, syncing */
  --disabled-bg: color-mix(in srgb, var(--ink) 6%, transparent); --disabled-fg: var(--faint);

  /* Surfaces */
  --blur: blur(22px) saturate(1.5);
  --nav-blur: blur(22px) saturate(1.5);
  --card-bg: rgba(255, 255, 255, .6);
  --card-line: rgba(255, 255, 255, .92);
  --card-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent), 0 18px 44px color-mix(in srgb, var(--brand-dark) 10%, transparent);
  --card-shadow-hover: 0 2px 4px color-mix(in srgb, var(--ink) 5%, transparent), 0 28px 60px color-mix(in srgb, var(--brand-dark) 17%, transparent);
  --field-bg: rgba(255, 255, 255, .72);
  --field-line: color-mix(in srgb, var(--ink) 12%, transparent);
  --nav-bg: rgba(255, 255, 255, .6);
  --nav-line: rgba(255, 255, 255, .92);
  --nav-shadow: 0 10px 30px color-mix(in srgb, var(--brand-dark) 10%, transparent);
  --menu-bg: rgba(255, 255, 255, .9);
  --seg-ink: #FFFFFF;
  --table-head: rgba(255, 255, 255, .45);
  --toast-bg: var(--ink); --toast-fg: color-mix(in oklab, var(--brand) 6%, #F4F6F3);
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 3px 10px color-mix(in srgb, var(--ink) 5%, transparent);
  --shadow-lg: 0 30px 80px color-mix(in srgb, var(--brand-dark) 19%, transparent);
  --brand-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 38%, transparent);
  --brand-shadow-hover: 0 14px 32px color-mix(in srgb, var(--brand) 50%, transparent);
  --featured-shadow: 0 24px 60px color-mix(in srgb, var(--brand) 25%, transparent);

  /* Sections */
  --hero-bg: transparent;
  --aurora-opacity: 1;
  --aurora-1: color-mix(in srgb, var(--brand-2) 55%, transparent);
  --aurora-2: color-mix(in srgb, var(--brand-alt) 40%, transparent);
  --aurora-3: color-mix(in srgb, color-mix(in oklab, var(--brand-2), #FFF2A0 45%) 45%, transparent);
  --preview-frame: rgba(255, 255, 255, .45);
  --preview-inner: rgba(255, 255, 255, .35);
  --icon-tile: var(--brand-fill);
  --icon-tile-fg: var(--on-brand);
  --band-bg: radial-gradient(80% 140% at 0% 0%, var(--brand-2), transparent 60%), radial-gradient(80% 140% at 100% 100%, color-mix(in oklab, var(--brand), black 10%), transparent 60%), var(--brand);
  --band-fg: var(--on-brand); --band-muted: color-mix(in srgb, var(--on-brand) 78%, transparent);
  --shot-bg: radial-gradient(70% 70% at 20% 10%, color-mix(in srgb, var(--brand-2) 45%, transparent), transparent 60%), radial-gradient(70% 70% at 90% 90%, color-mix(in srgb, var(--brand-alt) 35%, transparent), transparent 60%), rgba(255, 255, 255, .4);
  --cta-bg: radial-gradient(60% 120% at 15% 0%, var(--brand-2), transparent 70%), radial-gradient(60% 120% at 90% 100%, color-mix(in oklab, var(--brand), black 10%), transparent 70%), var(--brand);
  --cta-fg: var(--on-brand); --cta-muted: color-mix(in srgb, var(--on-brand) 80%, transparent);
  --cta-field-bg: color-mix(in srgb, var(--on-brand) 14%, transparent); --cta-field-line: color-mix(in srgb, var(--on-brand) 30%, transparent);
  --cta-glow: color-mix(in srgb, color-mix(in oklab, var(--brand-2), white 25%) 70%, transparent);
  --faq-bg: rgba(255, 255, 255, .6); --faq-line: rgba(255, 255, 255, .92); --faq-border: 1px; --faq-gap: 10px; --faq-pad: 22px; --r-faq: 22px;
  --quote-weight: 600;

  /* Charts */
  --chart-1: var(--brand); --chart-2: var(--ink); --chart-3: color-mix(in srgb, var(--ink) 16%, transparent);
  --chart-area-top: color-mix(in srgb, var(--brand-2) 50%, transparent); --chart-area-bottom: color-mix(in srgb, var(--brand-alt) 0%, transparent);
  --bar-idle: color-mix(in srgb, var(--ink) 10%, transparent); --bar-fill: linear-gradient(180deg, var(--brand-2), color-mix(in oklab, var(--brand), black 35%));
  --progress-fill: linear-gradient(90deg, color-mix(in oklab, var(--brand-alt), black 25%), var(--brand));
  --avatar-1: var(--brand); --avatar-2: var(--brand-dark); --avatar-3: color-mix(in oklab, var(--brand-alt), black 35%);

  /* Shape & type */
  --r-xs: 8px; --r-sm: 11px; --r-md: 16px; --r-lg: 26px; --r-xl: 34px; --r-band: 36px;
  /* Shape system — three roles:
     --r-control  everything you click or type into (buttons, inputs, selects, segmented, search). One value so a button
                  next to a field always matches. Set to 999px for pill buttons (fields then stay at --r-field-max).
     --r-pill     small status/meta pieces (chips, tags, tokens, badges, eyebrows, switches, progress). Always fully round.
     containers   --r-nav (bars) < --r-lg (cards) < --r-xl (frames) < --r-band (colored bands). Nested radius = outer − gap. */
  --r-control: 14px;
  --r-field-max: 14px;
  --r-btn: var(--r-control);
  --r-field: min(var(--r-control), var(--r-field-max));
  --r-seg: var(--r-control);
  --r-seg-in: max(calc(var(--r-control) - 4px), 6px);
  --r-pill: 999px; --r-cal: 999px;
  --r-nav: 20px; --r-bar: 8px 8px 3px 3px;
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 800; --display-tracking: -.04em; --btn-weight: 700;
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --text-gradient: linear-gradient(120deg, color-mix(in oklab, var(--brand-alt), white 30%), color-mix(in oklab, var(--brand-2), white 30%) 45%, color-mix(in oklab, var(--brand-2), #FFF2A0 45%));
    --bg: color-mix(in oklab, var(--brand) 7%, #040504); --surface: rgba(255, 255, 255, .06); --surface-solid: color-mix(in oklab, var(--brand) 9%, #0A0C0A);
    --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .22);
    --fg: color-mix(in oklab, var(--brand) 6%, #F2F4F1); --muted: color-mix(in oklab, var(--brand) 12%, #A8ADA7); --faint: color-mix(in oklab, var(--brand) 12%, #676C67);
    --accent-text: color-mix(in oklab, var(--brand-2), white 30%); --focus: var(--accent-text);
    --chip: color-mix(in srgb, var(--brand-2) 16%, transparent); --ring: color-mix(in srgb, var(--brand-2) 30%, transparent); --hover: rgba(255, 255, 255, .06); --track: rgba(255, 255, 255, .1);
    --dash: color-mix(in srgb, var(--accent-text) 35%, transparent); --shimmer: rgba(255, 255, 255, .08); --scrim: rgba(0, 0, 0, .55);
    --warn: #FBBF4A; --warn-bg: rgba(245, 158, 11, .16); --error: #FB8A8A; --error-bg: rgba(248, 113, 113, .15); --error-solid: #C93A42; --info: #8CB8F2; --info-bg: rgba(96, 165, 250, .16);
    --disabled-bg: rgba(255, 255, 255, .05); --disabled-fg: color-mix(in oklab, var(--brand) 10%, #5E625E);
    --card-bg: rgba(255, 255, 255, .045); --card-line: rgba(255, 255, 255, .1); --card-shadow: 0 20px 50px rgba(0, 0, 0, .35); --card-shadow-hover: 0 30px 70px rgba(0, 0, 0, .5);
    --field-bg: rgba(255, 255, 255, .05); --field-line: rgba(255, 255, 255, .13);
    --nav-bg: color-mix(in srgb, var(--bg) 60%, transparent); --nav-line: rgba(255, 255, 255, .1); --nav-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    --menu-bg: color-mix(in srgb, var(--surface-solid) 94%, transparent); --seg-ink: rgba(255, 255, 255, .14); --table-head: rgba(255, 255, 255, .03);
    --toast-bg: var(--fg); --toast-fg: var(--ink);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
    --brand-shadow: 0 8px 24px rgba(0, 0, 0, .45); --brand-shadow-hover: 0 12px 32px color-mix(in srgb, var(--brand) 40%, transparent); --featured-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    --aurora-1: color-mix(in srgb, var(--brand) 40%, transparent); --aurora-2: color-mix(in srgb, var(--brand-alt) 26%, transparent); --aurora-3: color-mix(in srgb, var(--brand-2) 18%, transparent);
    --preview-frame: rgba(255, 255, 255, .05); --preview-inner: rgba(0, 0, 0, .22);
    --shot-bg: radial-gradient(70% 70% at 20% 10%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 60%), radial-gradient(70% 70% at 90% 90%, color-mix(in srgb, var(--brand-alt) 25%, transparent), transparent 60%), rgba(255, 255, 255, .03);
    --faq-bg: rgba(255, 255, 255, .045); --faq-line: rgba(255, 255, 255, .1);
    --chart-2: var(--fg); --chart-3: rgba(255, 255, 255, .2); --chart-area-top: color-mix(in srgb, var(--brand-2) 40%, transparent);
    --bar-idle: rgba(255, 255, 255, .1);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --text-gradient: linear-gradient(120deg, color-mix(in oklab, var(--brand-alt), white 30%), color-mix(in oklab, var(--brand-2), white 30%) 45%, color-mix(in oklab, var(--brand-2), #FFF2A0 45%));
  --bg: color-mix(in oklab, var(--brand) 7%, #040504); --surface: rgba(255, 255, 255, .06); --surface-solid: color-mix(in oklab, var(--brand) 9%, #0A0C0A);
  --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .22);
  --fg: color-mix(in oklab, var(--brand) 6%, #F2F4F1); --muted: color-mix(in oklab, var(--brand) 12%, #A8ADA7); --faint: color-mix(in oklab, var(--brand) 12%, #676C67);
  --accent-text: color-mix(in oklab, var(--brand-2), white 30%); --focus: var(--accent-text);
  --chip: color-mix(in srgb, var(--brand-2) 16%, transparent); --ring: color-mix(in srgb, var(--brand-2) 30%, transparent); --hover: rgba(255, 255, 255, .06); --track: rgba(255, 255, 255, .1);
  --dash: color-mix(in srgb, var(--accent-text) 35%, transparent); --shimmer: rgba(255, 255, 255, .08); --scrim: rgba(0, 0, 0, .55);
  --warn: #FBBF4A; --warn-bg: rgba(245, 158, 11, .16); --error: #FB8A8A; --error-bg: rgba(248, 113, 113, .15); --error-solid: #C93A42; --info: #8CB8F2; --info-bg: rgba(96, 165, 250, .16);
  --disabled-bg: rgba(255, 255, 255, .05); --disabled-fg: color-mix(in oklab, var(--brand) 10%, #5E625E);
  --card-bg: rgba(255, 255, 255, .045); --card-line: rgba(255, 255, 255, .1); --card-shadow: 0 20px 50px rgba(0, 0, 0, .35); --card-shadow-hover: 0 30px 70px rgba(0, 0, 0, .5);
  --field-bg: rgba(255, 255, 255, .05); --field-line: rgba(255, 255, 255, .13);
  --nav-bg: color-mix(in srgb, var(--bg) 60%, transparent); --nav-line: rgba(255, 255, 255, .1); --nav-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  --menu-bg: color-mix(in srgb, var(--surface-solid) 94%, transparent); --seg-ink: rgba(255, 255, 255, .14); --table-head: rgba(255, 255, 255, .03);
  --toast-bg: var(--fg); --toast-fg: var(--ink);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
  --brand-shadow: 0 8px 24px rgba(0, 0, 0, .45); --brand-shadow-hover: 0 12px 32px color-mix(in srgb, var(--brand) 40%, transparent); --featured-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  --aurora-1: color-mix(in srgb, var(--brand) 40%, transparent); --aurora-2: color-mix(in srgb, var(--brand-alt) 26%, transparent); --aurora-3: color-mix(in srgb, var(--brand-2) 18%, transparent);
  --preview-frame: rgba(255, 255, 255, .05); --preview-inner: rgba(0, 0, 0, .22);
  --shot-bg: radial-gradient(70% 70% at 20% 10%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 60%), radial-gradient(70% 70% at 90% 90%, color-mix(in srgb, var(--brand-alt) 25%, transparent), transparent 60%), rgba(255, 255, 255, .03);
  --faq-bg: rgba(255, 255, 255, .045); --faq-line: rgba(255, 255, 255, .1);
  --chart-2: var(--fg); --chart-3: rgba(255, 255, 255, .2); --chart-area-top: color-mix(in srgb, var(--brand-2) 40%, transparent);
  --bar-idle: rgba(255, 255, 255, .1);
}

/* Glass-only flourish: the whole page sits on the aurora, not just the hero */
body { background: radial-gradient(70% 50% at 100% 40%, var(--aurora-2), transparent 70%), radial-gradient(60% 40% at 0% 75%, var(--aurora-3), transparent 70%), var(--bg); background-attachment: fixed; }

/* App layout tokens (theme-independent; they reference the color tokens above) */
:root {
  --sidebar-w: 264px;
  --topbar-h: 64px;
  --tabbar-h: 64px;
  --content-max: 1280px;
  --bubble-me-bg: var(--brand-fill);
  --bubble-me-fg: var(--on-brand);
  --bubble-them-bg: var(--card-bg);
  --bubble-them-fg: var(--fg);
}