/* ============================================================================
   GreenReach runtime design tokens — canonical raw values and profiles.
   @gr-foundation 2026-09-27
   Brand authority: docs/domains/commerce/marketing/GREENREACH_BRAND_BOOK.md.
   Public aliases retain their values. LE imports this file in a lower cascade
   layer so existing unlayered legacy overrides are preserved. New general
   cloud/admin surfaces explicitly adopt cloud-light; dark is specialized only.
   ----------------------------------------------------------------------------
   Every public-light marketing surface takes its colours from here. Nothing in
   this file is layout: it is tokens only, so a page can adopt the palette
   WITHOUT inheriting the component rules in community.css (whose
   `body { padding-top:56px }` assumes the injected .site-nav and opens a gap on
   a page that has its own header).

   WHY IT EXISTS: the token block used to be copy-pasted inline into each
   marketing page. Six copies drifted — about.html never took one at all and
   grew a private emerald palette (#10b981), and privacy.html inherited that by
   being copied from it, adding a third green. Three greens on one site.
   HARD RULE 0ad U2 forbids a private palette; HARD RULE 0z says fix the class
   by extracting the primitive rather than patching the instance.

   HOW A PAGE USES IT:
     <link rel="stylesheet" href="/styles/marketing-tokens.css">   <-- FIRST
     <style> ... page layout only, referencing var(--*) ... </style>
   The link goes BEFORE the page's inline <style> so page rules win ties.

   DO NOT re-declare these values in a page. Add a token here instead.
   community.css @imports this file, so its 25 consumers are unaffected.
============================================================================ 
   ── U12 contrast roles (HARD RULE 0ad) ────────────────────────────────────
   Roles are declared here rather than inferred from names, because a name-based
   rule invents pairs that never render together and misses text that is called
   something else. Ratios computed with scripts/audit/lib/wcag-contrast.mjs, not
   by eye (control: #000 on #fff = 21.00):

     --text         on --bg 16.28:1   on --surface 16.83:1
     --text-light   on --bg  5.66:1   on --surface  5.85:1
     --primary      on --bg  8.95:1   on --surface  9.25:1
     --primary-dark on --bg 12.16:1   on --surface 12.57:1

   --accent (2.07:1) and --accent-dark (2.86:1) are in NO role, deliberately.
   They are FILL colours — a dark label sits on them, they do not sit on a
   surface — and at those ratios neither could be text (4.5) or a glyph (3).
   That is not an assumption: of the 11 files that consume this token file,
   ZERO use `color: var(--accent)` or `color: var(--accent-dark)`. They appear
   only as background, border-color and fill. If a future page sets one as a
   text colour, it is a WCAG defect at 2.07:1 and the fix is a darker token,
   not a role change here.

   @le-contrast-profile public-light
   @base    --bg
   @surface --bg --surface
   @text    --text --text-light --primary --primary-dark
   @glyph
*/

:root {
  /* Canonical marketing tokens (identical values to purchase.html). */
  --gr-brand-primary: #2d5016;
  --primary: var(--gr-brand-primary);
  --gr-brand-primary-dark: #1f3a0f;
  --primary-dark: var(--gr-brand-primary-dark);
  --gr-brand-accent: #82c341;
  --accent: var(--gr-brand-accent);
  --gr-brand-accent-dark: #6aa634;
  --accent-dark: var(--gr-brand-accent-dark);
  --gr-brand-text: #1d1d1f;
  --text: var(--gr-brand-text);
  --gr-brand-text-light: #5c6670;
  --text-light: var(--gr-brand-text-light);
  --gr-brand-bg: #fbfbfd;
  --bg: var(--gr-brand-bg);
  --gr-brand-surface: #ffffff;
  --surface: var(--gr-brand-surface);
  --gr-brand-surface-2: #f5f7f2;
  --surface-2: var(--gr-brand-surface-2);
  --gr-brand-border: #e6e6eb;
  --border: var(--gr-brand-border);

  /* Aliases — so pages authored with the old dark-theme variable names resolve
     to BRAND values the moment their inline dark :root override is removed. */
  --gr-bg: var(--bg);
  --gr-surface: var(--surface);
  --gr-surface-2: var(--surface-2);
  --gr-border: var(--border);
  --gr-text: var(--text);
  --gr-muted: var(--text-light);
  --gr-accent: var(--primary);
  --gr-accent-2: var(--accent);
  --green: var(--primary);
  --card: var(--surface);
  --bg2: var(--surface-2);
  --muted: var(--text-light);
  --accent2: var(--accent);
  /* Builder-console var names (TEA-394) — alias to brand tokens so the organizer
     console renders on-brand instead of falling back to UA defaults. */
  --bg-secondary: var(--surface-2);
  --text-primary: var(--text);
  --text-readable: var(--text);
  --text-secondary: var(--text-light);
  --accent-green: var(--accent);
}

/* Legacy operator values, moved verbatim from le-foundation.css.
   Type floors are safety floors, not cloud defaults. */
:root {
  --gr-operator-surface-0: #0f172a;
  --gr-operator-surface-1: #1e293b;
  --gr-operator-surface-2: rgba(30, 41, 59, 0.7);
  --gr-operator-surface-3: rgba(15, 23, 42, 0.6);
  --gr-operator-text-1: #f1f5f9;
  --gr-operator-text-2: #cbd5e1;
  --gr-operator-text-3: #94a3b8;
  --gr-operator-text-4: #8695ab;
  --gr-operator-border-subtle: rgba(148, 163, 184, 0.12);
  --gr-operator-border-strong: rgba(148, 163, 184, 0.24);
  --gr-operator-border-focus: rgba(59, 130, 246, 0.55);
  --gr-operator-accent-blue: #60a5fa;
  --gr-operator-accent-green: #34d399;
  --gr-operator-accent-amber: #fbbf24;
  --gr-operator-accent-red: #f87171;
  --gr-operator-accent-purple: #a78bfa;
  --gr-operator-accent-indigo: #818cf8;
  --gr-operator-accent-teal: #5eead4;
  --gr-operator-accent-blue-soft: rgba(59, 130, 246, 0.14);
  --gr-operator-accent-green-soft: rgba(16, 185, 129, 0.14);
  --gr-operator-accent-amber-soft: rgba(245, 158, 11, 0.14);
  --gr-operator-accent-red-soft: rgba(239, 68, 68, 0.14);
  --gr-operator-accent-purple-soft: rgba(139, 92, 246, 0.14);
  --gr-operator-accent-teal-soft: rgba(94, 234, 212, 0.14);
  --gr-operator-accent-blue-edge: rgba(59, 130, 246, 0.35);
  --gr-operator-accent-green-edge: rgba(16, 185, 129, 0.35);
  --gr-operator-accent-amber-edge: rgba(245, 158, 11, 0.35);
  --gr-operator-accent-red-edge: rgba(239, 68, 68, 0.35);
  --gr-operator-accent-purple-edge: rgba(139, 92, 246, 0.35);
  --gr-operator-accent-teal-edge: rgba(94, 234, 212, 0.35);
  --gr-operator-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 1px rgba(0, 0, 0, 0.15);
  --gr-operator-elevation-2: 0 4px 12px rgba(0, 0, 0, 0.3),  0 2px 4px rgba(0, 0, 0, 0.2);
  --gr-operator-elevation-3: 0 8px 32px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.22);
  --gr-operator-radius-sm: 6px;
  --gr-operator-radius-md: 10px;
  --gr-operator-radius-lg: 16px;
  --gr-operator-radius-xl: 24px;
  --gr-operator-radius-pill: 9999px;
  --gr-operator-motion-fast: 150ms;
  --gr-operator-motion-normal: 250ms;
  --gr-operator-motion-slow: 400ms;
  --gr-operator-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --gr-operator-font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Roboto, "Segoe UI", sans-serif;
  --gr-operator-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --gr-operator-font-size-xs: 0.75rem;
  --gr-operator-font-size-sm: 0.9375rem;
  --gr-operator-font-size-md: 1rem;
  --gr-operator-font-size-lg: 1.125rem;
  --gr-operator-font-size-xl: 1.25rem;
  --gr-operator-font-size-2xl: 1.5rem;
  --gr-operator-font-size-3xl: 2rem;
  --gr-operator-line-height-tight: 1.25;
  --gr-operator-line-height-body: 1.5;
  --gr-operator-type-floor-body: 0.875rem;
  --gr-operator-type-floor-control: 0.875rem;
  --gr-operator-type-floor-label: 0.75rem;
}

/* Cloud/admin body defaults target 7:1; all normal text >=4.5, glyphs >=3.
   Approved accent greens remain fills, never body text.
   @le-contrast-profile cloud-light
   @base --gr-cloud-bg
   @surface --gr-cloud-bg --gr-cloud-surface --gr-cloud-surface-alt
   @text --gr-cloud-text --gr-cloud-muted --gr-cloud-primary --gr-cloud-success --gr-cloud-info --gr-cloud-warning --gr-cloud-critical --gr-cloud-purple
   @body --gr-cloud-text --gr-cloud-muted
   @glyph --gr-cloud-control-border
*/
:root {
  --gr-cloud-bg: var(--gr-brand-bg);
  --gr-cloud-surface: var(--gr-brand-surface);
  --gr-cloud-surface-alt: var(--gr-brand-surface-2);
  --gr-cloud-text: var(--gr-brand-text);
  --gr-cloud-muted: #3f4b56;
  --gr-cloud-border: var(--gr-brand-border);
  --gr-cloud-control-border: #788271;
  --gr-cloud-primary: var(--gr-brand-primary);
  --gr-cloud-primary-hover: var(--gr-brand-primary-dark);
  --gr-cloud-on-primary: var(--gr-brand-surface);
  --gr-cloud-success: var(--gr-brand-primary-dark);
  --gr-cloud-info: #1e40af;
  --gr-cloud-warning: #713f12;
  --gr-cloud-critical: #991b1b;
  --gr-cloud-purple: #6b21a8;
  --gr-cloud-success-soft: #eef5e9;
  --gr-cloud-info-soft: #eff6ff;
  --gr-cloud-warning-soft: #fffbeb;
  --gr-cloud-critical-soft: #fef2f2;
  --gr-cloud-purple-soft: #faf5ff;
  --gr-cloud-elevation-1: 0 1px 3px rgba(31,58,15,.08);
  --gr-cloud-elevation-2: 0 4px 16px rgba(31,58,15,.10);
  --gr-cloud-elevation-3: 0 12px 32px rgba(31,58,15,.14);
  --gr-cloud-body-size: 1.125rem;
  --gr-cloud-label-size: 1rem;
  --gr-cloud-card-size: 1.375rem;
  --gr-cloud-title-size: 2rem;
  --gr-cloud-major-size: 2.5rem;
  --gr-cloud-space-1: .25rem;
  --gr-cloud-space-2: .5rem;
  --gr-cloud-space-3: .75rem;
  --gr-cloud-space-4: 1rem;
  --gr-cloud-space-6: 1.5rem;
  --gr-cloud-space-8: 2rem;
  --gr-cloud-content-width: 75rem;
}