/* style-library/theme-classic-sage.css — the "classic-sage" variant kit.
   CLASSIC SAGE — the field-green plate. Derived from theme-qals-classic.css by scripts/gen_classic_variants.py.
   Tokens + .mat- primitives + shared page bindings. RWF app bindings
   (fg / bd classes) live in design/themes.css. Name/label/provenance: README.md.

   ═══════════════════════════════════════════════════════════════════════
   THE 9AM POSTER BASE — founder-chosen 2026-09-12 — with the founder's
   beloved PURPLE primary (theme-qalarc.css --lime renders rgb(109,79,163),
   i.e. #6d4fa3 — verified button colour).
   Mined from themegallery/landing-9am.html (+ its source kit
   theme-neobrut-locker.css): putty cream #e6e2d4 bg, ink #26221a text,
   cream surfaces #f4f1e6, ink 2px visible borders, hard offset shadows
   (solid ink, no blur), press = compress. Accents: tape-blue #1f4f8f,
   sage #2e5e50, brass #7c5a10, jersey cardinal #b3242c held as the
   effort accent. Archivo display / Inter body / JetBrains Mono.
   Describe it as: the club noticeboard at 9AM — putty paper under a faint
   mortar grid, cream cards pinned with hard ink offset shadows, purple
   jersey buttons that press in, tape-blue links, sage and brass labels,
   everything stamped in mono.
   Variants (same structure, one primary swap + tiny accents):
   theme-classic-cardinal.css · theme-classic-ink.css · theme-classic-sage.css
   (generated by scripts/gen_classic_variants.py).
   ═══════════════════════════════════════════════════════════════════════ */

:root[data-theme="classic-sage"] {
  --bg: #e6e2d4;                 /* painted cinderblock putty */
  --surface: #f4f1e6;            /* cream cubby board */
  --surface-2: #d9d4c2;          /* pressed board */
  --line: #26221a;               /* ink-brown */
  --line-bright: #4a4436;
  --text: #26221a;
  --muted: #4b463a;
  --faint: #585243;              /* 5.3:1 on bg */
  --faint-deco: #8b8574;

  --lime: #2e5e50;               /* SAGE — the field-green primary plate */
  --lime-dim: #234a3f;
  --lime-glow: rgba(46, 94, 80, 0.18);
  --coral: #b3242c;              /* JERSEY CARDINAL — effort accent (the exact 9AM primary) */
  --coral-glow: rgba(179, 36, 44, 0.14);
  --amber: #7c5a10;              /* bench-wood brass */
  --sky: #1f4f8f;                /* TAPE BLUE — links + secondary */

  --success: #2e5e50;            /* sage tape */
  --danger: #99201d;
  --urgency: #8a3a00;

  --energy: #4a3a8f;             /* violet echo for the --violet slot */
  --energy-light: #3e2f7a;
  --energy-tint: #e7e4f2;

  --dz-bg: #ddd6c2;
  --dz3-surface: #f0d2b4;
  --dz-hero: #f7e2c5;

  --font-display: 'Archivo', system-ui, sans-serif;   /* varsity block */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius: 10px;                /* the cubby cut */
  --radius-sm: 6px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --pill: 999px;

  --on-accent: #fdf9ef;          /* 7.0:1 on sage */
  --primary-hover: #234a3f;      /* darker press of the same plate */
  --on-warn: #fdf9ef;            /* 6.9:1 on urgency */

  --on-gold: var(--on-accent);

  /* CLASSIC EXTRAS — the taped-up gym floor, as named accents */
  --tape: #1f4f8f;               /* tape-blue */
  --sage: #2e5e50;               /* sage tape */
  --brass: #7c5a10;              /* bench-wood brass */
  --cardinal: #b3242c;           /* jersey cardinal */
  --pop-shadow: #26221a;         /* hard offset shadow ink */
  --paper: #fdf9ef;              /* the brightest cream (nameplates, inputs) */
}

/* ── qals-classic · MATERIAL — the noticeboard at 9AM ─────────────────── */
:root[data-theme="classic-sage"] {
  /* cinderblock mortar grid + paper grain + putty wash (from landing-9am) */
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.13 0 0 0 0 0.10 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(38, 34, 26, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 34, 26, 0.05) 1px, transparent 1px),
    linear-gradient(#e6e2d4, #ded9c8);
  background-size: 160px 160px, 26px 26px, 61px 61px, auto;
}
:root[data-theme="classic-sage"] body,
:root[data-theme="classic-sage"] .mat-page {
  background-size: 160px 160px, 26px 26px, 61px 61px, auto;
}
:root[data-theme="classic-sage"] ::selection {
  background: var(--lime);
  color: var(--on-accent);
}

/* ── .mat- primitives (gallery / app vocabulary) ────────────────────────── */
:root[data-theme="classic-sage"] .mat-surface {        /* cream card, hard pin shadow */
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 4px 5px 0 var(--pop-shadow);
}
:root[data-theme="classic-sage"] .mat-btn {            /* the JERSEY — purple plate */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--on-accent);
  background: var(--lime);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 12px 26px;
  box-shadow: 4px 4px 0 var(--pop-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
:root[data-theme="classic-sage"] .mat-btn:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 5px 5px 0 var(--pop-shadow); }
:root[data-theme="classic-sage"] .mat-btn:active { transform: translateY(2px); box-shadow: 1px 1px 0 var(--pop-shadow); }   /* press = compress */
:root[data-theme="classic-sage"] .mat-btn--ghost {
  background: var(--surface);
  color: var(--text);
}
:root[data-theme="classic-sage"] .mat-btn--ghost:hover { background: var(--surface-2); }
:root[data-theme="classic-sage"] .mat-num {            /* the stamped numeral */
  display: inline-block;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 50px;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 6px 18px 10px;
  text-shadow: 3px 3px 0 var(--lime-glow);
}
:root[data-theme="classic-sage"] .mat-divider {        /* the SPORTS TAPE */
  height: 9px;
  border: 0;
  margin: 13px 0;
  background: repeating-linear-gradient(-45deg, rgba(31, 79, 143, 0.75) 0 9px, rgba(253, 249, 239, 0.6) 9px 13px);
  border-radius: 2px;
  opacity: 0.85;
}
:root[data-theme="classic-sage"] .mat-progress {       /* the tape measure */
  height: 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
:root[data-theme="classic-sage"] .mat-progress i {     /* purple tape with tick marks */
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(253, 249, 239, 0.55) 9px 10.5px),
    var(--lime);
  transition: width 0.6s ease;
}
:root[data-theme="classic-sage"] .mat-chip {           /* the taped label */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  box-shadow: 2px 3px 0 var(--pop-shadow);
}
:root[data-theme="classic-sage"] .mat-chip.is-on {
  background: var(--lime);
  color: var(--on-accent);
}
:root[data-theme="classic-sage"] .mat-input {          /* the label-maker strip */
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 9px;
  padding: 11px 14px;
}
:root[data-theme="classic-sage"] .mat-input:focus { outline: none; box-shadow: 0 0 0 3px var(--lime-glow); }
:root[data-theme="classic-sage"] .mat-avatar {         /* the cubby tag */
  border-radius: 11px;
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: 3px 4px 0 rgba(38, 34, 26, 0.25);
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
}
:root[data-theme="classic-sage"] .mat-dialog {         /* the pinned notice */
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 16px;
  box-shadow: 6px 7px 0 var(--pop-shadow);
}
:root[data-theme="classic-sage"] .mat-dialog__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
:root[data-theme="classic-sage"] .mat-badge {          /* the NAMEPLATE */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  box-shadow: 0 2px 0 rgba(38, 34, 26, 0.35);
}
:root[data-theme="classic-sage"] .mat-dz {             /* the coach's board */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-warn);
  background:
    repeating-linear-gradient(-45deg, rgba(253, 249, 239, 0.14) 0 10px, transparent 10px 20px),
    var(--danger);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
}

/* ── PAGE BINDINGS — the shared site vocabulary, 9AM-hardened ────────────
   Specificity (0,3,0) beats each page's html[data-theme] bridge (0,2,1),
   wherever the kit is loaded after or before the inline <style>.        */
:root[data-theme="classic-sage"] h1,
:root[data-theme="classic-sage"] h2,
:root[data-theme="classic-sage"] h3,
:root[data-theme="classic-sage"] h4,
:root[data-theme="classic-sage"] nav b {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text);
}
:root[data-theme="classic-sage"] h1 em,
:root[data-theme="classic-sage"] h1 i,
:root[data-theme="classic-sage"] nav b i { color: var(--lime); }

:root[data-theme="classic-sage"] nav {
  background: rgba(244, 241, 230, 0.94);
  border-bottom: 2px solid var(--line);
  box-shadow: 0 4px 0 var(--line);
}

/* cards & panels — cream, 2px ink, hard offset shadow (no blur) */
:root[data-theme="classic-sage"] .card,
:root[data-theme="classic-sage"] .hero-card,
:root[data-theme="classic-sage"] .svc,
:root[data-theme="classic-sage"] .table-wrap,
:root[data-theme="classic-sage"] .band,
:root[data-theme="classic-sage"] .intro,
:root[data-theme="classic-sage"] .flagship,
:root[data-theme="classic-sage"] .rail,
:root[data-theme="classic-sage"] .section,
:root[data-theme="classic-sage"] .frameCard,
:root[data-theme="classic-sage"] .galleryItem,
:root[data-theme="classic-sage"] .panel,
:root[data-theme="classic-sage"] .tableCard,
:root[data-theme="classic-sage"] .pc,
:root[data-theme="classic-sage"] .summary,
:root[data-theme="classic-sage"] .num,
:root[data-theme="classic-sage"] .phoneCard,
:root[data-theme="classic-sage"] .stat,
:root[data-theme="classic-sage"] .leg,
:root[data-theme="classic-sage"] .agent,
:root[data-theme="classic-sage"] .moment,
:root[data-theme="classic-sage"] .wallet,
:root[data-theme="classic-sage"] .provider,
:root[data-theme="classic-sage"] .channel,
:root[data-theme="classic-sage"] .trade,
:root[data-theme="classic-sage"] .search,
:root[data-theme="classic-sage"] .msg {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 4px 5px 0 var(--pop-shadow);
  color: var(--text);
}
/* dense dashboard tiles keep the 8px cut so grids stay readable */
:root[data-theme="classic-sage"] .stat,
:root[data-theme="classic-sage"] .leg,
:root[data-theme="classic-sage"] .agent,
:root[data-theme="classic-sage"] .moment,
:root[data-theme="classic-sage"] .wallet,
:root[data-theme="classic-sage"] .provider,
:root[data-theme="classic-sage"] .channel,
:root[data-theme="classic-sage"] .trade,
:root[data-theme="classic-sage"] .svc { border-radius: var(--radius); }

/* buttons — varsity plates that compress on press */
:root[data-theme="classic-sage"] .btn,
:root[data-theme="classic-sage"] button {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 4px 4px 0 var(--pop-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
:root[data-theme="classic-sage"] .btn:hover,
:root[data-theme="classic-sage"] button:hover {
  transform: translateY(-2px);
  box-shadow: 5px 5px 0 var(--pop-shadow);
}
:root[data-theme="classic-sage"] .btn:active,
:root[data-theme="classic-sage"] button:active {
  transform: translateY(2px);
  box-shadow: 1px 1px 0 var(--pop-shadow);   /* press = compress */
}
:root[data-theme="classic-sage"] .btn.p,
:root[data-theme="classic-sage"] .btn.gold,
:root[data-theme="classic-sage"] .chip.hot,
:root[data-theme="classic-sage"] .chip.live,
:root[data-theme="classic-sage"] .chip.demo,
:root[data-theme="classic-sage"] button[type=submit],
:root[data-theme="classic-sage"] .buy {
  background: var(--lime);
  color: var(--on-accent);
  border-color: var(--line);
}
:root[data-theme="classic-sage"] .btn.p:hover,
:root[data-theme="classic-sage"] .btn.gold:hover,
:root[data-theme="classic-sage"] button[type=submit]:hover,
:root[data-theme="classic-sage"] .buy:hover { background: var(--primary-hover); }
:root[data-theme="classic-sage"] .btn.g {
  background: var(--surface);
  color: var(--text);
}
:root[data-theme="classic-sage"] .btn.g:hover { border-color: var(--lime); }

/* taped labels — chips, tags, badges, eyebrows */
:root[data-theme="classic-sage"] .chip,
:root[data-theme="classic-sage"] .tag,
:root[data-theme="classic-sage"] .badge,
:root[data-theme="classic-sage"] .kind,
:root[data-theme="classic-sage"] .fee,
:root[data-theme="classic-sage"] .pill,
:root[data-theme="classic-sage"] .countPill,
:root[data-theme="classic-sage"] .eyebrow,
:root[data-theme="classic-sage"] .theme-picker {
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  box-shadow: 2px 3px 0 var(--pop-shadow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
:root[data-theme="classic-sage"] .theme-picker { text-transform: none; letter-spacing: 0; }
:root[data-theme="classic-sage"] .theme-picker select {
  background: var(--paper);
  color: var(--text);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
}

/* tables — ink rules on cream */
:root[data-theme="classic-sage"] th,
:root[data-theme="classic-sage"] td { border-color: var(--line); }
:root[data-theme="classic-sage"] th { background: var(--surface-2); color: var(--text); }
:root[data-theme="classic-sage"] .table-wrap { background: var(--surface); }

/* accents */
:root[data-theme="classic-sage"] .stat .n { color: var(--lime); }
:root[data-theme="classic-sage"] .aud-card { border-left: 6px solid var(--tape); }
:root[data-theme="classic-sage"] .dot { background: var(--success); box-shadow: none; }