/* AUTOGENERATED — DO NOT EDIT.
   Synced from honeybun-dashboard/frontend/tools/css/tokens.css via scripts/sync-tokens.mjs.
   Canonical source: https://github.com/andrewcruz101/honeybun-dashboard/blob/main/frontend/tools/css/tokens.css
   Edit canonical in honeybun-dashboard and re-run scripts/sync-tokens.mjs. */
/* ═══════════════════════════════════════════════════════════════════════════
   HoneyBun — Canonical Design Tokens
   ═══════════════════════════════════════════════════════════════════════════
   Single source of truth for theme tokens across every HB surface.

   Consumed by:
     - honeybun-dashboard      (this repo — canonical home)
     - honeybun-sales          (synced via scripts/sync-tokens.mjs → _styles/honeybun-tokens.css)
     - honeybun-audits         (synced via scripts/sync-tokens.mjs → _styles/honeybun-tokens.css)

   Surface scoping
   ─────────────────────────────────────────────────────────────────────────────
   The three surfaces share token NAMES (--bg, --surface, --text, --green, …)
   with DIFFERENT VALUES. To keep one canonical file without cascade collisions,
   each namespace is scoped by an attribute on <html>:

     <html data-hb-surface="dashboard">  ← default, attribute optional
     <html data-hb-surface="sales">
     <html data-hb-surface="audits">

   Backward-compat: pages with no attribute inherit dashboard tokens (the
   :where(html) zero-specificity selector). Sales and audits pages MUST set the
   attribute on <html> or their styling falls back to dashboard values.

   Board task: 681364ad (board review e28fb60c, Vogels concern). Originating
   incident: dashboard light-theme --text-secondary at #86868B = 3.5:1 AA fail.
   Gate: tests/a11y-contrast.spec.js (71c892aa).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ Namespace 1 — Dashboard (Apple HIG, dark default) ═══════ */
:where(html),
html[data-hb-surface="dashboard"] {
  --bg-primary: #000000;
  --bg-secondary: #1c1c1e;
  --bg-tertiary: #2c2c2e;
  --bg-elevated: #2c2c2e;
  --bg-grouped: #1c1c1e;
  --text-primary: #ffffff;
  --text: var(--text-primary);
  --text-secondary: #86868B;
  --text-tertiary: #636366;
  --accent: #007AFF;
  --accent-dim: rgba(0,122,255,0.12);
  --green: #30D158;
  --orange: #FF9F0A;
  --red: #FF453A;
  --yellow: #FFD60A;
  --purple: #BF5AF2;
  --teal: #64D2FF;
  --pink: #FF375F;
  --separator: rgba(255,255,255,0.08);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-elevated: 0 4px 12px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
  --radius: 12px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-lg: 16px;
  --sidebar-w: 220px;
  --topbar-h: 52px;
  --subtitle-h: 30px;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, 'Fira Code', monospace;
  --col-intake: #007AFF;
  --col-provisioning: #FF9F0A;
  --col-generating: #BF5AF2;
  --col-review: #64D2FF;
  --col-live: #30D158;
  --col-managed: #0A84FF;
  --col-error: #FF453A;
  --tier-foundation: rgba(255,255,255,0.08);
  --tier-starter: rgba(255,255,255,0.12);
  --tier-growth: rgba(0,122,255,0.15);
  --tier-authority: rgba(255,214,10,0.15);
  --card-bg: #1c1c1e;
  --bg-card: var(--card-bg);
  --surface: var(--card-bg);
  --surface-secondary: var(--card-bg);
  --error: var(--red);
  --hover-bg: #2c2c2e;
  --fill-secondary: rgba(120,120,128,0.12);
  --fill-tertiary: rgba(120,120,128,0.06);
  --fill-quaternary: rgba(120,120,128,0.08);
  --fg: var(--text-primary);
  --secondary-label: var(--text-secondary);
  --destructive: var(--red);
  --bg: var(--bg-secondary);
  --surface-2: var(--bg-elevated);
  --text-quaternary: rgba(255,255,255,0.18);
  --z-base: 1;
  --z-sticky: 10;
  --z-sidebar: 100;
  --z-dropdown: 200;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-tooltip: 3000;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 15px;
  --font-size-xl: 17px;
  --font-size-2xl: 20px;
  --font-size-3xl: 28px;
}

/* Dashboard light mode (WCAG-AA verified — gated by a11y-contrast.spec.js). */
:where(html[data-theme="light"]),
html[data-hb-surface="dashboard"][data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #F5F5F7;
  --bg-tertiary: #ffffff;
  --bg-elevated: #ffffff;
  --bg-grouped: #F5F5F7;
  --text-primary: #1D1D1F;
  --text-secondary: #636366; /* was #86868B — fails WCAG AA (3.5:1); #636366 = 5.7:1 */
  --text-tertiary: #6e6e73;  /* was #aeaeb2 — fails WCAG AA (3.2:1); #6e6e73 = 5.5:1 */
  --separator: rgba(0,0,0,0.06);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-elevated: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.03);
  --tier-foundation: rgba(0,0,0,0.04);
  --tier-starter: rgba(0,0,0,0.06);
  --tier-growth: rgba(0,122,255,0.08);
  --tier-authority: rgba(255,214,10,0.1);
  --card-bg: #ffffff;
  --hover-bg: #F5F5F7;
  --fill-secondary: rgba(120,120,128,0.12);
  --fill-tertiary: rgba(120,120,128,0.06);
  --text-quaternary: rgba(60,60,67,0.18);
}

/* ═══════════════ Namespace 2 — Sales (pitch deck + landing) ═══════════════ */
html[data-hb-surface="sales"] {
  /* honeybun-master.css base */
  --bg:         #080808;
  --bg2:        #0E0E0E;
  --bg3:        #131313;
  --surface:    #181818;
  --surface2:   #1E1E1E;
  --border:     #252525;
  --border2:    #303030;
  --text:       #F0EDE8;
  --muted:      #888880;
  --dim:        #4A4845;
  --gold:       #C9920A;
  --gold-lt:    #F5C832;
  --gold-bg:    rgba(201,146,10,0.08);
  --gold-bd:    rgba(201,146,10,0.22);
  --blue:       #3B82F6;
  --blue-lt:    #93C5FD;
  --blue-bg:    rgba(59,130,246,0.07);
  --blue-bd:    rgba(59,130,246,0.22);
  --green:      #10B981;
  --green-lt:   #6EE7B7;
  --green-bg:   rgba(16,185,129,0.07);
  --green-bd:   rgba(16,185,129,0.22);
  --purple:     #8B5CF6;
  --purple-lt:  #C4B5FD;
  --purple-bg:  rgba(139,92,246,0.07);
  --purple-bd:  rgba(139,92,246,0.22);
  --orange:     #F59E0B;
  --orange-bg:  rgba(245,158,11,0.07);
  --orange-bd:  rgba(245,158,11,0.22);
  --red:        #EF4444;
  --red-bg:     rgba(239,68,68,0.07);
  --red-bd:     rgba(239,68,68,0.22);
  --cyan:       #06B6D4;
  --cyan-bg:    rgba(6,182,212,0.07);
  --cyan-bd:    rgba(6,182,212,0.22);
  --ff:         'Inter', system-ui, sans-serif;
  --mono:       'JetBrains Mono', monospace;
  --nav-h:      52px;
  /* styles.css deck brand-mark tokens */
  --dk:         #0D0D0D;
  --dk2:        #111111;
  --am:         #C9920A;
  --amh:        #F5C832;
  --wh:         #FFFFFF;
  --of:         #E0E0E0;
  --mu:         #AAAAAA;
  --di:         #666666;
  --br:         #242424;
  --br2:        #2C2C2C;
  --fd:         'Big Shoulders Display', sans-serif;
  --fb:         'Work Sans', sans-serif;
  --fm:         'JetBrains Mono', monospace;
}

/* Sales light-mode variant (gold-accent retained) — wired for the
   light-vs-dark A/B (board task 22f6618f). Activate by adding
   data-theme="light" to <html> alongside data-hb-surface="sales".
   All color values verified against the sales surface for WCAG-AA 4.5:1
   text contrast (--text #1F1B12 on --bg #FAF7F0 = 14.7:1). */
html[data-hb-surface="sales"][data-theme="light"] {
  --bg:         #FAF7F0;   /* warm off-white — softer than #fff so gold accents sing */
  --bg2:        #F2EDE3;
  --bg3:        #E8E1D2;
  --surface:    #FFFFFF;
  --surface2:   #FBF6EB;
  --border:     #E2D9C6;
  --border2:    #D4C8AE;
  --text:       #1F1B12;   /* near-black with warm bias to match gold */
  --muted:      #6E665A;   /* 5.6:1 on --bg */
  --dim:        #8C8472;
  --gold:       #B17E07;   /* one stop deeper than dark-mode gold (#C9920A) for AA on light */
  --gold-lt:    #D8A831;
  --gold-bg:    rgba(177,126,7,0.10);
  --gold-bd:    rgba(177,126,7,0.30);
  --blue:       #1E5FD9;
  --blue-bg:    rgba(30,95,217,0.08);
  --blue-bd:    rgba(30,95,217,0.28);
  --green:      #047857;
  --green-bg:   rgba(4,120,87,0.08);
  --green-bd:   rgba(4,120,87,0.28);
  --red:        #B91C1C;
  --red-bg:     rgba(185,28,28,0.08);
  --red-bd:     rgba(185,28,28,0.28);
  /* Deck shorthand mirrors (styles.css). */
  --dk:         #FAF7F0;
  --dk2:        #FFFFFF;
  --wh:         #1F1B12;
  --am:         #B17E07;
  --amh:        #D8A831;
  --of:         #2C2820;
  --mu:         #6E665A;
  --di:         #8C8472;
  --br:         #E2D9C6;
  --br2:        #D4C8AE;
}

/* ═══════════════ Namespace 3 — Audits (gold-strike) ═══════════════════════ */
html[data-hb-surface="audits"] {
  --gold-strike: #FFB800;
  --gold-core:   #B8952A;
  --gold-burnt:  #5A450F;
  --gradient-h:  linear-gradient(90deg, #FFB800 0%, #B8952A 50%, #5A450F 100%);
  --black:       #080808;
  --surface:     #111111;
  --surface-2:   #191919;
  --surface-3:   #202020;
  --border:      #252525;
  --border-lit:  #3A3A3A;
  --text:        #FFFFFF;
  --text-mid:    #B0B0B0;
  --text-dim:    #6A6A6A;
  --green:       #4CAF7D;
  --red:         #C0392B;
  --glow-soft:   rgba(255,184,0,0.15);
  --glow-med:    rgba(255,184,0,0.35);
  --glow-hard:   rgba(255,184,0,0.65);
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'SF Mono', Menlo, monospace;
}