/* =====================================================================================================================
   Grow App Design System · tokens.css · v1.0.3 (2026-10-04)
   The shared look of every Grow internal dashboard (Hubs, Slides, Lesson Builder, free trial, Grow dashboard).
   Extracted from the RESOLVED Grow Hubs app ("Studio", rounds 5 → 6p, grow-hubs-app 7a447aa) by computed-style capture
   in both modes; brand values from the SYCU brand guide (sycu-brand-guide/site/assets/tokens/tokens.css).

   Rules for this file
   - Brand guide colours only. Every dark value is PRECOMPUTED hex: no color-mix() anywhere (chained color-mix custom
     properties crash WebKit's WebContent process).
   - Mode = html[data-mode="light" | "dark"], set before paint by ds/boot.html. Print is always light.
   - Product identity hook = html[data-product="hubs" | "slides" | "builder" | "dashboard" | "trial"]; it only feeds
     the small "this is Slides" places (--product*). Grow green (--acc) stays the one action accent everywhere.
   - Strategy colours: --X (fill, never text on white), --X-ink (text-safe), --X-soft (wash), --X-solid (bars/rings).
   Sections: 1 brand + scales (mode independent) · 2 light · 3 dark · 4 raised surfaces (dark) · 5 themes ·
             6 identity art (tiles, badges, banners) · 7 product hook · 8 print
   ===================================================================================================================== */

/* ---------- 1. brand + scales (both modes) ---------- */
:root {
  /* strategy fills (brand guide) */
  --disc: #F0893C; --teach: #E84E4E; --env: #E4D353; --evt: #BED65A; --vol: #82D1DD; --fam: #F27A9E; --lead: #434A50;
  --games: #7F8CFF; --music: #D986FF; --sycu: #3ABDD5;
  --teach-deep: #C83535;
  /* brand neutrals */
  --char: #434A50; --char-2: #2F3439; --char-3: #23272B;
  --hl: #DCEBA4; --grow-leaf: #BCDA82;
  /* the six-area rainbow (Leadership left out: it vanishes on dark) */
  --stripe: linear-gradient(90deg, #F0893C 0 16.667%, #E84E4E 0 33.333%, #E4D353 0 50%, #BED65A 0 66.667%, #82D1DD 0 83.333%, #F27A9E 0 100%);

  /* type */
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-micro: 11.5px;   /* counts */
  --fs-xs: 12px;        /* tags, draft pill */
  --fs-meta: 13.5px;    /* meta rows, small buttons, kicker */
  --fs-ui: 14.5px;      /* buttons, rail links, menu items */
  --fs-sub: 15.5px;     /* page subtitle */
  --fs-body: 16px;
  --fs-card: 17.5px;    /* card titles */
  --fs-h3: 18px;        /* panel titles */
  --fs-dlg: 20px;       /* dialog titles */
  --fs-h1: clamp(28px, 3vw, 38px);
  --ls-h1: -.035em; --ls-h2: -.02em;
  --lh-body: 1.55; --lh-h1: 1.08;
  --fw-ui: 600; --fw-btn: 650; --fw-strong: 700;

  /* shape */
  --r-panel: 18px;  /* page-level panels: identity header, first-run */
  --r-card: 14px;   /* cards, side cards, empty states */
  --r-pop: 14px;    /* popovers */
  --r-tile: 10px;   /* tiles, recessed rows */
  --r-pill: 10px;   /* buttons, search, pills (Studio pills are soft rectangles, not capsules) */
  --r-ctl: 9px;     /* inputs, selects */
  --r-sm: 8px;      /* small buttons, menu items */
  --r-chip: 6px;    /* tags, counts */

  /* spacing (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* layout */
  --hdr: 64px; --stripe-h: 2px; --shell: 1328px; --gut: 24px; --rail: 228px; --rail-gap: 40px; --side: 316px;

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: .15s; --dur: .22s; --dur-slow: .28s;

  /* live / on-air LED (Events green; decoration next to words) */
  --live: #BED65A; --live-halo: rgba(190,214,90,.28);

  /* fixed brand inks (mode independent) */
  --on-fill: #1F2328;   /* dark ink on any light strategy fill / Grow green / SYCU blue */
  --on-deep: #FFFFFF;   /* white on Teaching deep / charcoal */
}
@media (max-width: 600px) { :root { --gut: 16px; --hdr: 60px; } }

/* ---------- 2. light (default) ---------- */
:root, html[data-mode="light"] {
  color-scheme: light;
  /* surfaces */
  --canvas: #F4F5F7;        /* page */
  --sf: #FFFFFF;            /* cards, current rail item, header base */
  --surface: #FFFFFF;       /* alias of --sf (brand-guide name) */
  --bg: #F6F7F9;            /* recessed: chips, card footers, segmented tracks */
  --raise: #FFFFFF;         /* popovers, menus, dialogs */
  --line: #E4E7EB; --line-2: #D3D8DE;
  --hair: rgba(31,35,40,.08); --hair-2: rgba(31,35,40,.13);
  --divider: #E3E6E9;       /* 6n list dividers */
  --hover: rgba(31,35,40,.05);
  /* ink */
  --ink: #1F2328; --ink-2: #454C55; --ink-3: #5F6873; --ph: #5F6873;
  --trk: #767E88;           /* switch track off (3:1 on white) */
  --logo-ink: #1F2328; --logo-rule: #D3D8DE;
  /* header (6m–6p): icons, pill, mode toggle, burger and account circle in logo ink */
  --hdr-bg: rgba(255,255,255,.86);
  --hdr-ink: #1F2328; --hdr-tint: #EEF0F2;
  --hdr-ring: rgba(31,35,40,.18); --hdr-ring-hover: rgba(31,35,40,.32);
  --me-bg: #1F2328; --me-ink: #FFFFFF;
  /* selection slab (settings sub-tabs, "dark" buttons, strong tags) */
  --sel-bg: #23272B; --sel-ink: #FFFFFF;
  /* overlays */
  --scrim: rgba(31,35,40,.32); --backdrop: rgba(31,35,40,.42);
  --toast-bg: #23272B; --toast-ring: rgba(255,255,255,.08);
  --hero: #23272B;          /* the one charcoal strip (trial / promo) */
  /* shadow channel (rgba(var(--shd), a)) */
  --shd: 31,35,40; --sh: 31,35,40;
  /* elevations */
  --e1: 0 0 0 1px rgba(31,35,40,.075), 0 1px 2px rgba(31,35,40,.05), 0 2px 6px -2px rgba(31,35,40,.05);
  --e2: 0 0 0 1px rgba(31,35,40,.09), 0 2px 4px rgba(31,35,40,.05), 0 14px 30px -12px rgba(31,35,40,.18);
  --e3: 0 0 0 1px rgba(31,35,40,.08), 0 8px 20px -6px rgba(31,35,40,.14), 0 28px 60px -18px rgba(31,35,40,.26);
  --e-dark: 0 0 0 1px rgba(31,35,40,.9), 0 18px 40px -22px rgba(31,35,40,.55);

  /* Grow green: the one action accent (dark ink on the fill, never white) */
  --acc: #BFE478; --acc-hover: #B2DB61; --acc-on: #1F2328;
  --acc-edge: #A6CC5C;      /* 6o: softer lime edge on the primary button */
  --acc-glow: rgba(109,148,30,.30);
  --acc-ink: #4B6D0B;       /* green text / links, 6.6:1 on white */
  --acc-ring: #5E8117;      /* focus rings, 5.2:1 on white */
  --acc-soft: #F5F8E9;
  --accent: #5E8117;        /* selected tab bar, switch on, checkbox on */
  --focus-glow: rgba(94,129,23,.22);

  /* unread / new (6m): SYCU blue dots and counts, dark numerals, no outline. Never red. */
  --unread: #3ABDD5; --unread-on: #1F2328; --unread-ink: #0B6B7D; --unread-soft: #E3F6F9;
  /* 6o filled fields: focus underline + glow */
  --fbar: #3ABDD5; --fglow: rgba(58,189,213,.40);
  --fld: #ECEEF0; --fld-hover: #E5E7EB; --fld-on: #FFFFFF;
  --fld-sh: 0 1px 2px rgba(31,35,40,.08), 0 6px 18px -8px rgba(31,35,40,.22);

  /* alert (destructive actions only) */
  --alert: #C83535; --alert-hover: #AF3334; --alert-ink: #B41818; --alert-soft: #FCE7E7;

  /* strategy inks / softs / solids */
  --disc-ink: #A94F0C; --teach-ink: #B41818; --env-ink: #635910; --evt-ink: #515E17; --vol-ink: #1D616C; --fam-ink: #AE1140;
  --lead-ink: #434A50; --games-ink: #4650C8; --music-ink: #8A2BB8; --sycu-ink: #0B6B7D;
  --disc-soft: #FDEEE3; --teach-soft: #FCE7E7; --env-soft: #FBF7DA; --evt-soft: #F2F8DF; --vol-soft: #E5F6F8; --fam-soft: #FDE9F0;
  --lead-soft: #ECEEF0; --games-soft: #EEF0FF; --music-soft: #F8EDFF; --sycu-soft: #E3F6F9;
  --disc-solid: #A94F0C; --teach-solid: #B41818; --env-solid: #635910; --evt-solid: #515E17; --vol-solid: #1D616C;
  --fam-solid: #AE1140; --lead-solid: #434A50; --games-solid: #4650C8; --music-solid: #8A2BB8; --sycu-solid: #0B6B7D;
}

/* ---------- 3. dark (the brand charcoal ramp, precomputed) ---------- */
html[data-mode="dark"] {
  color-scheme: dark;
  --canvas: #1C1F22;        /* Charcoal 3 deepened 20% */
  --sf: #2F3439; --surface: #2F3439;
  --bg: #373C42; --raise: #33383E;
  --line: #3A4046; --line-2: #434A50;
  --hair: rgba(255,255,255,.08); --hair-2: rgba(255,255,255,.14);
  --divider: rgba(255,255,255,.09);
  --hover: rgba(255,255,255,.05);
  --ink: #F4F5F7; --ink-2: #D4D8DC; --ink-3: #BAC0C5; --ph: #BAC0C5;
  --trk: #7E858A;
  --logo-ink: #F4F5F7; --logo-rule: #434A50;
  --hdr-bg: rgba(28,31,34,.84);
  --hdr-ink: #F4F5F7; --hdr-tint: #3A4046;
  --hdr-ring: rgba(255,255,255,.22); --hdr-ring-hover: rgba(255,255,255,.22);
  --me-bg: #F4F5F7; --me-ink: #1F2328;
  --sel-bg: #F4F5F7; --sel-ink: #1F2328;
  --scrim: rgba(0,0,0,.55); --backdrop: rgba(0,0,0,.62);
  --toast-bg: #434A50; --toast-ring: rgba(255,255,255,.10);
  --hero: #23272B;
  --shd: 0,0,0; --sh: 255,255,255;
  --e1: 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.5), 0 6px 16px -8px rgba(0,0,0,.6);
  --e2: 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.05), 0 2px 6px rgba(0,0,0,.45), 0 18px 36px -14px rgba(0,0,0,.8);
  --e3: 0 0 0 1px rgba(255,255,255,.10), 0 12px 28px -8px rgba(0,0,0,.6), 0 32px 64px -24px rgba(0,0,0,.7);
  --e-dark: 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px -22px rgba(0,0,0,.9);

  --acc: #BFE478; --acc-hover: #B2DB61; --acc-on: #1F2328;
  --acc-edge: transparent;
  --acc-glow: rgba(191,228,120,.18);
  --acc-ink: #BFE478; --acc-ring: #FFFFFF; --acc-soft: #434D42;
  --accent: #BFE478;
  --focus-glow: rgba(255,255,255,.22);

  --unread: #3ABDD5; --unread-on: #1F2328; --unread-ink: #7FD6E5; --unread-soft: #23434A;
  --fbar: #5FC9DC; --fglow: rgba(58,189,213,.28);
  --fld: #383E43; --fld-hover: #3C4248; --fld-on: #3E454A;
  --fld-sh: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px -8px rgba(0,0,0,.6);

  --alert: #C83535; --alert-hover: #AF3334; --alert-ink: #F19191; --alert-soft: #4D383C;

  --lead: #BAC0C5;
  --disc-ink: #F4AA73; --teach-ink: #F19191; --env-ink: #E4D353; --evt-ink: #BED65A; --vol-ink: #82D1DD; --fam-ink: #F6A2BB;
  --lead-ink: #D4D8DC; --games-ink: #A5AFFF; --music-ink: #E1A1FF; --sycu-ink: #3ABDD5;
  --disc-soft: #4E4239; --teach-soft: #4D383C; --env-soft: #4C4D3D; --evt-soft: #464E3E; --vol-soft: #3C4D53; --fam-soft: #4E3F49;
  --lead-soft: #3E444A; --games-soft: #3C4259; --music-soft: #4A4159; --sycu-soft: #314A52;
  --disc-solid: #F0893C; --teach-solid: #E84E4E; --env-solid: #E4D353; --evt-solid: #BED65A; --vol-solid: #82D1DD;
  --fam-solid: #F27A9E; --lead-solid: #BAC0C5; --games-solid: #7F8CFF; --music-solid: #D986FF; --sycu-solid: #3ABDD5;
}

/* ---------- 4. raised surfaces in dark: popovers, menus and dialogs sit one step above the cards ---------- */
html[data-mode="dark"] :is(.pop, .ctx, dialog.dlg) {
  --sf: #373C42; --bg: #3E444A; --line: #434A50; --line-2: #61676D; --fld: #3E444A; --fld-hover: #434A50; --fld-on: #454C52;
}

/* ---------- 5. themes: [data-theme] sets the local strategy accent (chips, icon tiles, bars) ---------- */
[data-theme] { --a-fill: var(--a); --a-on: #1F2328; }
[data-theme="disc"]  { --a: var(--disc);  --a-ink: var(--disc-ink);  --a-soft: var(--disc-soft);  --a-solid: var(--disc-solid); }
[data-theme="teach"] { --a: var(--teach); --a-ink: var(--teach-ink); --a-soft: var(--teach-soft); --a-solid: var(--teach-solid); --a-fill: #C83535; --a-on: #FFFFFF; }
[data-theme="env"]   { --a: var(--env);   --a-ink: var(--env-ink);   --a-soft: var(--env-soft);   --a-solid: var(--env-solid); }
[data-theme="evt"]   { --a: var(--evt);   --a-ink: var(--evt-ink);   --a-soft: var(--evt-soft);   --a-solid: var(--evt-solid); }
[data-theme="vol"]   { --a: var(--vol);   --a-ink: var(--vol-ink);   --a-soft: var(--vol-soft);   --a-solid: var(--vol-solid); }
[data-theme="fam"]   { --a: var(--fam);   --a-ink: var(--fam-ink);   --a-soft: var(--fam-soft);   --a-solid: var(--fam-solid); }
[data-theme="lead"]  { --a: var(--lead);  --a-ink: var(--lead-ink);  --a-soft: var(--lead-soft);  --a-solid: var(--lead-solid); --a-fill: #434A50; --a-on: #FFFFFF; }
[data-theme="games"] { --a: var(--games); --a-ink: var(--games-ink); --a-soft: var(--games-soft); --a-solid: var(--games-solid); }
[data-theme="music"] { --a: var(--music); --a-ink: var(--music-ink); --a-soft: var(--music-soft); --a-solid: var(--music-solid); }
[data-theme="sycu"]  { --a: var(--sycu);  --a-ink: var(--sycu-ink);  --a-soft: var(--sycu-soft);  --a-solid: var(--sycu-solid); }
html[data-mode="dark"] [data-theme="lead"] { --a-fill: #BAC0C5; --a-on: #1F2328; }

/* ---------- 6. identity art: one colour family per Grow area ([data-area]) ----------
   Tiles (rail/list marks, badges): a 145° light→fill gradient with auto ink (--id-tl/--id-td/--id-on).
   Badges in dark: a dimmed pair with a light ink (--id-da/--id-db/--id-don).
   Default banners (Hubs 6m: "make the default for all the banners one of the gradients"): the area's two-colour
   gradient --id-c1→--id-c2 with a light bloom --id-c3 and a deep corner --id-c4; initials --id-con (white where it
   reaches 2.6:1 on the gradient's middle, else charcoal; the initials are decorative, aria-hidden). */
[data-area="disc"]  { --id-tl: #F39D5D; --id-td: #F0893C; --id-on: #1F2328; --id-da: #52433A; --id-db: #78543A; --id-don: #F7BE94;
                      --id-c1: #E4D353; --id-c2: #F0893C; --id-c3: #EFE59B; --id-c4: #AD632B; --id-con: #1F2328; }
[data-area="teach"] { --id-tl: #C83535; --id-td: #AF3334; --id-on: #FFFFFF; --id-da: #50393D; --id-db: #753E41; --id-don: #F29E9E;
                      --id-c1: #E84E4E; --id-c2: #F2B33D; --id-c3: #F29898; --id-c4: #AE812C; --id-con: #FFFFFF; }
[data-area="env"]   { --id-tl: #E9DA6E; --id-td: #E4D353; --id-on: #1F2328; --id-da: #50513E; --id-db: #747043; --id-don: #F0E7A0;
                      --id-c1: #E4D353; --id-c2: #F0893C; --id-c3: #EFE59B; --id-c4: #AD632B; --id-con: #1F2328; }
[data-area="evt"]   { --id-tl: #C8DD75; --id-td: #BED65A; --id-on: #1F2328; --id-da: #49513F; --id-db: #657246; --id-don: #DBE8A4;
                      --id-c1: #2B6C44; --id-c2: #3ABDD5; --id-c3: #84AA93; --id-c4: #2A8899; --id-con: #FFFFFF; }
[data-area="vol"]   { --id-tl: #96D8E2; --id-td: #82D1DD; --id-on: #1F2328; --id-da: #3E5057; --id-db: #4F7077; --id-don: #BAE6EC;
                      --id-c1: #3ABDD5; --id-c2: #BFE478; --id-c3: #8DD9E7; --id-c4: #8AA456; --id-con: #1F2328; }
[data-area="fam"]   { --id-tl: #F490AE; --id-td: #F27A9E; --id-on: #1F2328; --id-da: #52414B; --id-db: #794F5F; --id-don: #F8B6CA;
                      --id-c1: #FF9A5A; --id-c2: #F27A9E; --id-c3: #FFC49F; --id-c4: #AE5872; --id-con: #1F2328; }
[data-area="lead"]  { --id-tl: #434A50; --id-td: #23272B; --id-on: #FFFFFF; --id-da: #393F45; --id-db: #434A50; --id-don: #D4D8DC;
                      --id-c1: #2B3A67; --id-c2: #3ABDD5; --id-c3: #848DA7; --id-c4: #2A8899; --id-con: #FFFFFF; }
[data-area="games"] { --id-tl: #95A0FF; --id-td: #7F8CFF; --id-on: #1F2328; --id-da: #3D445D; --id-db: #4D5584; --id-don: #B9C0FF;
                      --id-c1: #5ED6A9; --id-c2: #7F8CFF; --id-c3: #A2E7CD; --id-c4: #5B65B8; --id-con: #1F2328; }
[data-area="music"] { --id-tl: #DF9BFF; --id-td: #D986FF; --id-on: #1F2328; --id-da: #4E435D; --id-db: #705384; --id-don: #EABCFF;
                      --id-c1: #7F8CFF; --id-c2: #D986FF; --id-c3: #B5BCFF; --id-c4: #9C60B8; --id-con: #FFFFFF; }
[data-area="sycu"]  { --id-tl: #5CC8DC; --id-td: #3ABDD5; --id-on: #1F2328; --id-da: #314D55; --id-db: #336874; --id-don: #93DBE8;
                      --id-c1: #3ABDD5; --id-c2: #2294A9; --id-c3: #8DD9E7; --id-c4: #186B7A; --id-con: #FFFFFF; }

/* ---------- 7. product hook: html[data-product] → the product's own identity colour (small places only) ----------
   Hubs = Volunteers blue; Slides + Lesson Builder = Teaching red; Grow dashboard + free trial = Leadership charcoal
   (SYCU Design System §4.3 and the universal Grow Tools menu). */
:root { --product: var(--lead); --product-ink: var(--lead-ink); --product-soft: var(--lead-soft); --product-fill: #434A50; --product-on: #FFFFFF; }
html[data-product="hubs"]    { --product: var(--vol);   --product-ink: var(--vol-ink);   --product-soft: var(--vol-soft);   --product-fill: #82D1DD; --product-on: #1F2328; }
html[data-product="slides"],
html[data-product="builder"] { --product: var(--teach); --product-ink: var(--teach-ink); --product-soft: var(--teach-soft); --product-fill: #C83535; --product-on: #FFFFFF; }
html[data-mode="dark"][data-product="dashboard"], html[data-mode="dark"][data-product="trial"],
html[data-mode="dark"]:not([data-product]) { --product-fill: #BAC0C5; --product-on: #1F2328; }

/* ---------- 8. print: always light ---------- */
@media print {
  html[data-mode] { color-scheme: light; --canvas: #FFFFFF; --sf: #FFFFFF; --surface: #FFFFFF; --bg: #F6F7F9; --raise: #FFFFFF;
    --line: #E4E7EB; --line-2: #D3D8DE; --ink: #1F2328; --ink-2: #454C55; --ink-3: #5F6873; --logo-ink: #1F2328; --hdr-ink: #1F2328;
    --e1: 0 0 0 1px #E4E7EB; --e2: 0 0 0 1px #E4E7EB; --e3: 0 0 0 1px #E4E7EB; }
}