/* ClubFoundry Design System — tokens.css
 *
 * Two-layer structure:
 *
 *   1. THEME (surfaces / text / borders / status):
 *        html[data-theme="soft|light|dark"]   — production SPA uses this directly
 *        [data-dir="A|B|C"][data-theme]       — design-canvas override per direction
 *
 *   2. SURFACE (which accent hue wins):
 *        html[data-surface="landing|account|admin|app"]
 *        [data-surface="..."]                 — works on any element in the subtree
 *
 * Token keys match frontend/src/theme/tokens.ts — no cf-/color- prefix.
 *
 * Theme defaults to `soft` when data-theme is absent (handled below).
 * data-dir is DEMO-ONLY — production SPAs should not set it.
 */

:root {
  /* Geometry — shared across all directions & themes */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --unit: 4px;

  /* Default typography stack (overridden per direction) */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

/* ═══════════════════════════════════════════════════════════════════════
 * THEME BLOCKS
 *
 * Two selectors per theme — unprefixed (catches production `html[data-theme]`
 * OR any `[data-theme]` element) and direction-prefixed (for the canvas).
 * Direction-prefixed blocks override palette per direction.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ───── Default palette — used when no data-dir is present (production SPAs)
 *       Matches Direction A (Linear/Vercel) — the baseline we ship.
 * ───── */

html[data-theme="soft"],
[data-theme="soft"]:not([data-dir]) {
  color-scheme: light;
  --bg-main:        #f4f1eb;
  --bg-sidebar:     #ebe7df;
  --bg-card:        #faf8f3;
  --bg-secondary:   #e5e1d8;
  --bg-elevated:    #ffffff;
  --text-primary:   #18181b;
  --text-secondary: #52525b;
  --text-tertiary:  #7a7266;
  --text-muted:     #a8a294;
  --border-color:   #d9d4c7;
  --status-healthy:   #15803d;
  --status-attention: #b45309;
  --status-warning:   #c2410c;
  --status-error:     #b91c1c;
  --status-neutral:   #6b7280;
  --status-paused:    #7c4a9e;
  --accent-landing:   #0891b2; --accent-hover-landing: #0e7490;
  --accent-account:   #2563eb; --accent-hover-account: #1d4ed8;
  --accent-admin:     #0891b2; --accent-hover-admin:   #0e7490;
  --accent-app:       #16a34a; --accent-hover-app:     #15803d;
  --accent:           var(--accent-landing);
  --accent-hover:     var(--accent-hover-landing);
}

html[data-theme="light"],
[data-theme="light"]:not([data-dir]) {
  color-scheme: light;
  --bg-main:        #ffffff;
  --bg-sidebar:     #fafafa;
  --bg-card:        #ffffff;
  --bg-secondary:   #f4f4f5;
  --bg-elevated:    #ffffff;
  --text-primary:   #09090b;
  --text-secondary: #52525b;
  --text-tertiary:  #71717a;
  --text-muted:     #a1a1aa;
  --border-color:   #e4e4e7;
  --status-healthy:   #16a34a;
  --status-attention: #ca8a04;
  --status-warning:   #ea580c;
  --status-error:     #dc2626;
  --status-neutral:   #71717a;
  --status-paused:    #9333ea;
  --accent-landing:   #0891b2; --accent-hover-landing: #0e7490;
  --accent-account:   #2563eb; --accent-hover-account: #1d4ed8;
  --accent-admin:     #0891b2; --accent-hover-admin:   #0e7490;
  --accent-app:       #16a34a; --accent-hover-app:     #15803d;
  --accent:           var(--accent-landing);
  --accent-hover:     var(--accent-hover-landing);
}

html[data-theme="dark"],
[data-theme="dark"]:not([data-dir]) {
  color-scheme: dark;
  --bg-main:        #08090b;
  --bg-sidebar:     #0c0d10;
  --bg-card:        #101114;
  --bg-secondary:   #161719;
  --bg-elevated:    #1c1d20;
  --text-primary:   #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-tertiary:  #71717a;
  --text-muted:     #52525b;
  --border-color:   #26272b;
  --status-healthy:   #22c55e;
  --status-attention: #eab308;
  --status-warning:   #f97316;
  --status-error:     #ef4444;
  --status-neutral:   #71717a;
  --status-paused:    #a855f7;
  --accent-landing:   #22d3ee; --accent-hover-landing: #67e8f9;
  --accent-account:   #60a5fa; --accent-hover-account: #93c5fd;
  --accent-admin:     #22d3ee; --accent-hover-admin:   #67e8f9;
  --accent-app:       #4ade80; --accent-hover-app:     #86efac;
  --accent:           var(--accent-landing);
  --accent-hover:     var(--accent-hover-landing);
}

/* Default theme = soft when data-theme is missing entirely */
html:not([data-theme]),
[data-theme=""] {
  color-scheme: light;
  --bg-main:        #f4f1eb;
  --bg-sidebar:     #ebe7df;
  --bg-card:        #faf8f3;
  --bg-secondary:   #e5e1d8;
  --bg-elevated:    #ffffff;
  --text-primary:   #18181b;
  --text-secondary: #52525b;
  --text-tertiary:  #7a7266;
  --text-muted:     #a8a294;
  --border-color:   #d9d4c7;
}

/* ═══════════════════════════════════════════════════════════════════════
 * DIRECTION A — LINEAR / VERCEL
 *   Tight, monochrome, one confident accent. Near-black canvas, hairline
 *   borders, Inter + Geist Mono. Accent used sparingly.
 * ═══════════════════════════════════════════════════════════════════════ */

[data-dir="A"] {
  --font-sans:    'Inter', -apple-system, system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
}

[data-dir="A"][data-theme="soft"] {
  color-scheme: light;
  --bg-main:       #f4f1eb;  --bg-sidebar: #ebe7df;  --bg-card: #faf8f3;
  --bg-secondary:  #e5e1d8;  --bg-elevated: #ffffff;
  --text-primary:  #18181b;  --text-secondary: #52525b;
  --text-tertiary: #7a7266;  --text-muted: #a8a294;
  --border-color:  #d9d4c7;
  --status-healthy: #15803d; --status-attention: #b45309;
  --status-warning: #c2410c; --status-error: #b91c1c;
  --status-neutral: #6b7280; --status-paused: #7c4a9e;
  --accent-landing: #0891b2; --accent-hover-landing: #0e7490;
  --accent-account: #2563eb; --accent-hover-account: #1d4ed8;
  --accent-admin:   #0891b2; --accent-hover-admin:   #0e7490;
  --accent-app:     #16a34a; --accent-hover-app:     #15803d;
}

[data-dir="A"][data-theme="light"] {
  color-scheme: light;
  --bg-main:       #ffffff;  --bg-sidebar: #fafafa;  --bg-card: #ffffff;
  --bg-secondary:  #f4f4f5;  --bg-elevated: #ffffff;
  --text-primary:  #09090b;  --text-secondary: #52525b;
  --text-tertiary: #71717a;  --text-muted: #a1a1aa;
  --border-color:  #e4e4e7;
  --status-healthy: #16a34a; --status-attention: #ca8a04;
  --status-warning: #ea580c; --status-error: #dc2626;
  --status-neutral: #71717a; --status-paused: #9333ea;
  --accent-landing: #0891b2; --accent-hover-landing: #0e7490;
  --accent-account: #2563eb; --accent-hover-account: #1d4ed8;
  --accent-admin:   #0891b2; --accent-hover-admin:   #0e7490;
  --accent-app:     #16a34a; --accent-hover-app:     #15803d;
}

[data-dir="A"][data-theme="dark"] {
  color-scheme: dark;
  --bg-main:       #08090b;  --bg-sidebar: #0c0d10;  --bg-card: #101114;
  --bg-secondary:  #161719;  --bg-elevated: #1c1d20;
  --text-primary:  #f4f4f5;  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;  --text-muted: #52525b;
  --border-color:  #26272b;
  --status-healthy: #22c55e; --status-attention: #eab308;
  --status-warning: #f97316; --status-error: #ef4444;
  --status-neutral: #71717a; --status-paused: #a855f7;
  --accent-landing: #22d3ee; --accent-hover-landing: #67e8f9;
  --accent-account: #60a5fa; --accent-hover-account: #93c5fd;
  --accent-admin:   #22d3ee; --accent-hover-admin:   #67e8f9;
  --accent-app:     #4ade80; --accent-hover-app:     #86efac;
}

/* ═══════════════════════════════════════════════════════════════════════
 * DIRECTION B — STRIPE DASHBOARD
 *   Data-dense but calm. Clean cool neutrals, indigo-purple accent.
 * ═══════════════════════════════════════════════════════════════════════ */

[data-dir="B"] {
  --font-sans:    'Inter', -apple-system, system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

[data-dir="B"][data-theme="soft"] {
  color-scheme: light;
  --bg-main:       #f6f5f1;  --bg-sidebar: #ffffff;  --bg-card: #ffffff;
  --bg-secondary:  #efede7;  --bg-elevated: #ffffff;
  --text-primary:  #1a1f36;  --text-secondary: #556073;
  --text-tertiary: #6b7a94;  --text-muted: #8792a2;
  --border-color:  #e3e0d8;
  --status-healthy: #0e8b4d; --status-attention: #b07a00;
  --status-warning: #c45217; --status-error: #cf1322;
  --status-neutral: #697386; --status-paused: #6e5aa8;
  --accent-landing: #00a39d; --accent-hover-landing: #008782;
  --accent-account: #0570de; --accent-hover-account: #0559b8;
  --accent-admin:   #00a39d; --accent-hover-admin:   #008782;
  --accent-app:     #00a368; --accent-hover-app:     #008555;
}

[data-dir="B"][data-theme="light"] {
  color-scheme: light;
  --bg-main:       #f6f9fc;  --bg-sidebar: #ffffff;  --bg-card: #ffffff;
  --bg-secondary:  #eff3f8;  --bg-elevated: #ffffff;
  --text-primary:  #1a1f36;  --text-secondary: #425466;
  --text-tertiary: #697386;  --text-muted: #8792a2;
  --border-color:  #e3e8ee;
  --status-healthy: #059669; --status-attention: #d97706;
  --status-warning: #ea580c; --status-error: #e11d48;
  --status-neutral: #697386; --status-paused: #7c3aed;
  --accent-landing: #00a39d; --accent-hover-landing: #008782;
  --accent-account: #0570de; --accent-hover-account: #0559b8;
  --accent-admin:   #00a39d; --accent-hover-admin:   #008782;
  --accent-app:     #00a368; --accent-hover-app:     #008555;
}

[data-dir="B"][data-theme="dark"] {
  color-scheme: dark;
  --bg-main:       #0a0e1a;  --bg-sidebar: #0f1320;  --bg-card: #141827;
  --bg-secondary:  #1a1f31;  --bg-elevated: #1f2539;
  --text-primary:  #f5f7fa;  --text-secondary: #a3acc2;
  --text-tertiary: #7b8599;  --text-muted: #586173;
  --border-color:  #272d42;
  --status-healthy: #26c281; --status-attention: #e8b04f;
  --status-warning: #f58b4b; --status-error: #ef5d7d;
  --status-neutral: #8792a2; --status-paused: #a78bfa;
  --accent-landing: #4ac4be; --accent-hover-landing: #6ed4ce;
  --accent-account: #3690f6; --accent-hover-account: #5ba5f9;
  --accent-admin:   #4ac4be; --accent-hover-admin:   #6ed4ce;
  --accent-app:     #3ec689; --accent-hover-app:     #5fd69e;
}

/* ═══════════════════════════════════════════════════════════════════════
 * DIRECTION C — DATADOG / GRAFANA
 *   Status-forward operator console. Moody, desaturated neutrals so status
 *   dots earn attention. IBM Plex Mono.
 * ═══════════════════════════════════════════════════════════════════════ */

[data-dir="C"] {
  --font-sans:    'Inter', -apple-system, system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
}

[data-dir="C"][data-theme="soft"] {
  color-scheme: light;
  --bg-main:       #ece8df;  --bg-sidebar: #e3dfd5;  --bg-card: #f1eee6;
  --bg-secondary:  #dcd7cc;  --bg-elevated: #f7f5ef;
  --text-primary:  #23211c;  --text-secondary: #605c52;
  --text-tertiary: #807a6d;  --text-muted: #a09a8b;
  --border-color:  #c9c3b5;
  --status-healthy: #1d7a3f; --status-attention: #b08015;
  --status-warning: #c45500; --status-error: #b8342e;
  --status-neutral: #6e7580; --status-paused: #6a4e9a;
  --accent-landing: #06b6d4; --accent-hover-landing: #0891b2;
  --accent-account: #3b82f6; --accent-hover-account: #2563eb;
  --accent-admin:   #06b6d4; --accent-hover-admin:   #0891b2;
  --accent-app:     #10b981; --accent-hover-app:     #059669;
}

[data-dir="C"][data-theme="light"] {
  color-scheme: light;
  --bg-main:       #f5f6f7;  --bg-sidebar: #ffffff;  --bg-card: #ffffff;
  --bg-secondary:  #edeef0;  --bg-elevated: #ffffff;
  --text-primary:  #12151a;  --text-secondary: #5a6472;
  --text-tertiary: #7b8491;  --text-muted: #9ba3af;
  --border-color:  #dee1e5;
  --status-healthy: #1a9850; --status-attention: #d4a017;
  --status-warning: #e07000; --status-error: #e02e3e;
  --status-neutral: #6b7280; --status-paused: #7c3aed;
  --accent-landing: #06b6d4; --accent-hover-landing: #0891b2;
  --accent-account: #3b82f6; --accent-hover-account: #2563eb;
  --accent-admin:   #06b6d4; --accent-hover-admin:   #0891b2;
  --accent-app:     #10b981; --accent-hover-app:     #059669;
}

[data-dir="C"][data-theme="dark"] {
  color-scheme: dark;
  --bg-main:       #0b0e12;  --bg-sidebar: #12151b;  --bg-card: #171b22;
  --bg-secondary:  #1d2129;  --bg-elevated: #242932;
  --text-primary:  #ebedf0;  --text-secondary: #9199a5;
  --text-tertiary: #6c7381;  --text-muted: #4a505b;
  --border-color:  #2a2f39;
  --status-healthy: #3dd67a; --status-attention: #f5b942;
  --status-warning: #ff8a3d; --status-error: #ff5a5a;
  --status-neutral: #8892a0; --status-paused: #b589f0;
  --accent-landing: #22d3ee; --accent-hover-landing: #67e8f9;
  --accent-account: #60a5fa; --accent-hover-account: #93c5fd;
  --accent-admin:   #22d3ee; --accent-hover-admin:   #67e8f9;
  --accent-app:     #34d399; --accent-hover-app:     #6ee7b7;
}

/* ═══════════════════════════════════════════════════════════════════════
 * SURFACE → --accent RESOLUTION
 *
 * Placed AFTER every [data-dir] block so it wins on same-element cascades.
 * Works at any level: outermost [data-surface] wrapper sets --accent for
 * itself and all descendants. html[data-surface] form is for production.
 *
 * Higher specificity (2,0,0 and 1,1,0) + later position guarantees this
 * overrides any per-direction --accent defaults.
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-surface="landing"],
[data-surface="landing"] { --accent: var(--accent-landing); --accent-hover: var(--accent-hover-landing); }

html[data-surface="account"],
[data-surface="account"] { --accent: var(--accent-account); --accent-hover: var(--accent-hover-account); }

html[data-surface="admin"],
[data-surface="admin"]   { --accent: var(--accent-admin);   --accent-hover: var(--accent-hover-admin); }

html[data-surface="app"],
[data-surface="app"]     { --accent: var(--accent-app);     --accent-hover: var(--accent-hover-app); }

/* ═══════════════════════════════════════════════════════════════════════
 * Base reset + utility atoms (canvas only — production SPAs style html/body
 * themselves; these only apply inside data-dir or data-theme regions).
 * ═══════════════════════════════════════════════════════════════════════ */

[data-dir],
[data-theme] {
  font-family: var(--font-sans);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[data-dir] *,
[data-dir] *::before,
[data-dir] *::after { box-sizing: border-box; }

.cf-mono    { font-family: var(--font-mono); font-variant-ligatures: none; }
.cf-display { font-family: var(--font-display); }
.cf-num     { font-variant-numeric: tabular-nums; }

[data-dir] ::-webkit-scrollbar       { width: 6px; height: 6px; }
[data-dir] ::-webkit-scrollbar-track { background: transparent; }
[data-dir] ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }