/*
  CentralHub design tokens.

  Each theme overrides a SUPERSET of variables — not just colour, but typography,
  spacing, radii, shadows, and component-level switches. Components read these
  vars; theme-specific component tweaks live at the bottom of components.css
  under [data-theme="..."] selectors.

  Themes:
    aurora         — modern SaaS, dark gradient sidebar, soft cards (default)
    aurora-dark    — Aurora in dark mode
    slate-pro      — dense enterprise, hairline borders, mono numerals, sharp corners
    editorial      — warm magazine, cream paper, serif display, generous spacing
    midnight       — cyberpunk dark, neon cyan/magenta, glowing edges
*/

:root {
  /* Font stacks (each theme picks which display/numeric to use) */
  --f-inter: 'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-fraunces: 'Fraunces', 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-display: var(--f-inter);
  --f-body:    var(--f-inter);
  --f-num:     var(--f-inter);
  --num-feat:  'tnum', 'lnum';

  /* Brand & accents (themes override) */
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-grad-from: #3b82f6;
  --brand-grad-to:   #8b5cf6;

  --accent-violet: #8b5cf6;
  --accent-cyan: #06b6d4;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;
  --accent-indigo: #6366f1;

  /* Sidebar */
  --side-bg-1: #0b1220;
  --side-bg-2: #050912;
  --side-fg: #cbd5e1;
  --side-fg-muted: #64748b;
  --side-border: rgba(255,255,255,0.06);
  --side-active-bg: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(139,92,246,0.18));
  --side-active-fg: #ffffff;
  --side-hover-bg: rgba(255,255,255,0.04);
  --side-active-rule: linear-gradient(180deg, var(--brand-grad-from), var(--brand-grad-to));
  --side-style: gradient;        /* gradient | flat | paper | matrix */

  /* Spacing scale (themes can rescale density) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 380ms;

  /* Layout */
  --side-w: 252px;
  --side-w-rail: 72px;
  --top-h: 64px;

  /* Shadow primitives (themes redefine) */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 14px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 40px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.06);
  --glow: none;

  /* Card style switches */
  --card-border-w: 1px;
  --card-bg: var(--bg-elevated);
  --card: var(--bg-elevated);   /* legacy alias — some components read var(--card) */
  --card-shadow: var(--shadow-sm);
  --card-radius: var(--r-lg);

  /* Heading weight + tracking */
  --h-weight: 600;
  --h-tracking: -0.02em;
  --num-weight: 700;
  --num-tracking: -0.03em;
}

/* ─── Aurora light (default) ──────────────────────────────────── */
:root,
[data-theme="aurora"],
[data-theme="aurora-light"] {
  --bg: #f7f8fb;
  --bg-elevated: #ffffff;
  --bg-soft: #f1f3f8;
  --fg: #0f172a;
  --fg-muted: #475569;
  --fg-subtle: #94a3b8;
  --border: #e5e9f1;
  --border-strong: #d4dae6;
  --tint-blue: #eff6ff;
  --tint-amber: #fffbeb;
  --tint-rose: #fff1f2;
  --tint-emerald: #ecfdf5;
  --tint-violet: #f5f3ff;
  --tint-cyan: #ecfeff;
  --tint-slate: #f1f5f9;
}

/* ─── Aurora dark ─────────────────────────────────────────────── */
[data-theme="aurora-dark"] {
  --bg: #0a0e1a;
  --bg-elevated: #111827;
  --bg-soft: #0f172a;
  --fg: #e2e8f0;
  --fg-muted: #94a3b8;
  --fg-subtle: #64748b;
  --border: #1f2937;
  --border-strong: #2d3748;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
  --tint-blue: rgba(59,130,246,0.10);
  --tint-amber: rgba(245,158,11,0.10);
  --tint-rose: rgba(244,63,94,0.10);
  --tint-emerald: rgba(16,185,129,0.10);
  --tint-violet: rgba(139,92,246,0.10);
  --tint-cyan: rgba(6,182,212,0.10);
  --tint-slate: rgba(148,163,184,0.08);
}

/* ─── Slate Pro: dense enterprise dashboard ───────────────────── */
[data-theme="slate-pro"] {
  --f-display: 'Inter Tight', var(--f-inter);
  --f-num:     var(--f-mono);

  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-soft: #f8fafc;
  --fg: #0f172a;
  --fg-muted: #475569;
  --fg-subtle: #94a3b8;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  --brand-500: #4f46e5;
  --brand-600: #4338ca;
  --brand-700: #3730a3;
  --brand-grad-from: #4f46e5;
  --brand-grad-to:   #4f46e5;

  --tint-blue: #eef2ff;
  --tint-amber: #fef3c7;
  --tint-rose: #ffe4e6;
  --tint-emerald: #d1fae5;
  --tint-violet: #ede9fe;
  --tint-cyan: #cffafe;
  --tint-slate: #f1f5f9;

  /* Sidebar: light, hairline, no gradient */
  --side-bg-1: #f8fafc;
  --side-bg-2: #f8fafc;
  --side-fg: #334155;
  --side-fg-muted: #94a3b8;
  --side-border: #e2e8f0;
  --side-active-bg: #eef2ff;
  --side-active-fg: #4338ca;
  --side-hover-bg: #f1f5f9;
  --side-active-rule: var(--brand-600);
  --side-style: flat;

  /* Compact density, sharp corners */
  --sp-3: 10px; --sp-4: 14px; --sp-5: 18px; --sp-6: 20px; --sp-8: 28px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px;

  --card-radius: var(--r-md);
  --card-shadow: none;
  --card-border-w: 1px;

  --h-weight: 700;
  --h-tracking: -0.025em;
  --num-weight: 600;
  --num-tracking: 0;

  --shadow-sm: none;
  --shadow-md: 0 1px 0 rgba(15,23,42,0.04);
  --shadow-lg: 0 8px 24px rgba(15,23,42,0.10);
}

/* ─── Editorial: cream/serif/magazine ─────────────────────────── */
[data-theme="editorial"] {
  --f-display: var(--f-fraunces);
  --f-num:     var(--f-fraunces);
  --num-feat:  'tnum', 'ss01';

  --bg: #faf7f2;
  --bg-elevated: #fffdf8;
  --bg-soft: #f3ede2;
  --fg: #1a1410;
  --fg-muted: #5a4c3f;
  --fg-subtle: #9d8c7a;
  --border: #e8ddc8;
  --border-strong: #d4c4a8;

  --brand-500: #c2410c;       /* warm clay */
  --brand-600: #9a3412;
  --brand-700: #7c2d12;
  --brand-grad-from: #c2410c;
  --brand-grad-to:   #9a3412;

  --accent-violet: #6b21a8;
  --accent-cyan:   #0e7490;
  --accent-emerald:#15803d;
  --accent-amber:  #b45309;
  --accent-rose:   #be123c;
  --accent-indigo: #4338ca;

  --tint-blue: #fef3c7;       /* re-tinted to feel paper-warm */
  --tint-amber: #fde68a;
  --tint-rose: #fecdd3;
  --tint-emerald: #d1fae5;
  --tint-violet: #f3e8ff;
  --tint-cyan: #cffafe;
  --tint-slate: #ede4d3;

  /* Sidebar: cream paper, dark text */
  --side-bg-1: #f3ede2;
  --side-bg-2: #ede4d3;
  --side-fg: #3a2f25;
  --side-fg-muted: #9d8c7a;
  --side-border: #d4c4a8;
  --side-active-bg: #1a1410;
  --side-active-fg: #faf7f2;
  --side-hover-bg: #e8ddc8;
  --side-active-rule: #c2410c;
  --side-style: paper;

  /* Spacious, soft-rounded */
  --sp-4: 18px; --sp-5: 22px; --sp-6: 28px; --sp-8: 40px;
  --r-md: 8px; --r-lg: 10px; --r-xl: 14px;

  --card-bg: var(--bg-elevated);
  --card-shadow: none;
  --card-border-w: 1px;

  --h-weight: 500;       /* serif looks heavier than sans at same numeric weight */
  --h-tracking: -0.02em;
  --num-weight: 500;
  --num-tracking: -0.02em;

  --shadow-sm: 0 1px 0 rgba(116,95,68,0.08);
  --shadow-md: 0 4px 14px rgba(116,95,68,0.10);
  --shadow-lg: 0 14px 40px rgba(116,95,68,0.16);
}

/* ─── Midnight: cyberpunk neon ────────────────────────────────── */
[data-theme="midnight"] {
  --f-num: var(--f-mono);

  --bg: #050810;
  --bg-elevated: #0b101c;
  --bg-soft: #0a0f1a;
  --fg: #e6f0ff;
  --fg-muted: #8aa2c2;
  --fg-subtle: #5b6e89;
  --border: #182238;
  --border-strong: #25324d;

  --brand-500: #06b6d4;
  --brand-600: #0891b2;
  --brand-700: #0e7490;
  --brand-grad-from: #22d3ee;
  --brand-grad-to:   #d946ef;

  --accent-violet: #a855f7;
  --accent-cyan: #22d3ee;
  --accent-emerald: #34d399;
  --accent-amber: #fbbf24;
  --accent-rose: #fb7185;
  --accent-indigo: #818cf8;

  --tint-blue: rgba(34,211,238,0.10);
  --tint-amber: rgba(251,191,36,0.10);
  --tint-rose: rgba(251,113,133,0.10);
  --tint-emerald: rgba(52,211,153,0.10);
  --tint-violet: rgba(168,85,247,0.10);
  --tint-cyan: rgba(34,211,238,0.12);
  --tint-slate: rgba(139,163,194,0.08);

  /* Sidebar: pure black with cyan glow on active */
  --side-bg-1: #02050c;
  --side-bg-2: #02050c;
  --side-fg: #b8cbe5;
  --side-fg-muted: #5b6e89;
  --side-border: #0e1626;
  --side-active-bg: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(217,70,239,0.10));
  --side-active-fg: #ffffff;
  --side-hover-bg: rgba(255,255,255,0.04);
  --side-active-rule: linear-gradient(180deg, #22d3ee, #d946ef);
  --side-style: matrix;

  --card-radius: var(--r-lg);
  --card-bg: var(--bg-elevated);
  --card-shadow: 0 0 0 1px rgba(34,211,238,0.04);
  --glow: 0 0 24px rgba(34,211,238,0.15);

  --h-weight: 600;
  --num-weight: 600;
  --num-tracking: -0.02em;

  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.02);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.5), 0 0 1px rgba(34,211,238,0.18);
  --shadow-lg: 0 18px 60px rgba(0,0,0,0.7), 0 0 1px rgba(34,211,238,0.18);
}

/* ─── CoreM8: the house style (default; mirrors marketingm8/app.css) ── */
[data-theme="corem8"],
[data-theme="corem8-light"] {
  --brand-500: #7c6cff;
  --brand-grad-from: #7c6cff;
  --brand-grad-to:   #b06cff;

  --accent-violet: #9d6cff;
  --accent-cyan: #22d3ee;
  --accent-emerald: #34d399;
  --accent-amber: #fbbf24;
  --accent-rose: #fb7185;
  --accent-indigo: #818cf8;

  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 20px;
  --card-radius: 16px;

  --h-weight: 650;
  --h-tracking: -0.02em;
  --num-weight: 700;
  --num-tracking: -0.03em;
}

[data-theme="corem8"] {
  --bg: #08080c;
  --bg-elevated: #101018;
  --bg-soft: #16161f;
  --fg: #f3f3f7;
  --fg-muted: #a6a6b8;
  --fg-subtle: #6c6c80;
  --border: rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.11);

  --brand-600: #a99dff;   /* links / icon chips need the lighter violet on dark */
  --brand-700: #b7abff;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.7);
  --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.7);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.8);

  --tint-blue:    rgba(124,108,255,0.14);
  --tint-violet:  rgba(124,108,255,0.14);
  --tint-cyan:    rgba(34,211,238,0.13);
  --tint-emerald: rgba(52,211,153,0.13);
  --tint-amber:   rgba(251,191,36,0.13);
  --tint-rose:    rgba(251,113,133,0.13);
  --tint-slate:   rgba(255,255,255,0.05);

  --side-bg-1: #101018;
  --side-bg-2: #08080c;
  --side-fg: #a6a6b8;
  --side-fg-muted: #6c6c80;
  --side-border: rgba(255,255,255,0.07);
  --side-active-bg: rgba(124,108,255,0.14);
  --side-active-fg: #f3f3f7;
  --side-hover-bg: rgba(255,255,255,0.035);
  --side-active-rule: linear-gradient(180deg, #7c6cff, #b06cff 60%, #ff6cab);
  --side-style: gradient;
}

[data-theme="corem8-light"] {
  --bg: #f6f6f9;
  --bg-elevated: #ffffff;
  --bg-soft: #fbfbfd;
  --fg: #15151f;
  --fg-muted: #51515f;
  --fg-subtle: #8a8a99;
  --border: rgba(12,12,40,0.09);
  --border-strong: rgba(12,12,40,0.14);

  --brand-600: #6a5ae6;
  --brand-700: #5847d1;

  --shadow-sm: 0 1px 2px rgba(20,20,50,.06), 0 14px 34px -16px rgba(30,30,70,.22);
  --shadow-md: 0 1px 2px rgba(20,20,50,.06), 0 14px 34px -16px rgba(30,30,70,.22);
  --shadow-lg: 0 24px 60px -22px rgba(30,30,70,.28);

  --tint-blue:    rgba(124,108,255,0.12);
  --tint-violet:  rgba(124,108,255,0.12);
  --tint-cyan:    rgba(34,211,238,0.14);
  --tint-emerald: rgba(52,211,153,0.15);
  --tint-amber:   rgba(251,191,36,0.16);
  --tint-rose:    rgba(251,113,133,0.14);
  --tint-slate:   rgba(12,12,40,0.05);

  --side-bg-1: #ffffff;
  --side-bg-2: #f6f6f9;
  --side-fg: #51515f;
  --side-fg-muted: #8a8a99;
  --side-border: rgba(12,12,40,0.09);
  --side-active-bg: rgba(124,108,255,0.12);
  --side-active-fg: #15151f;
  --side-hover-bg: rgba(10,10,30,0.035);
  --side-active-rule: linear-gradient(180deg, #7c6cff, #b06cff 60%, #ff6cab);
  --side-style: gradient;
}