/* ==========================================================================
   BOOOST Design System — Tokens
   Generated by Seurat (Hybrid Mode)

   Visual world: Bloomberg terminal moderna, LinkedIn ecosystem, growth hacking
   Palette: LinkedIn Extended Palette (brand.linkedin.com) on dark navy backgrounds
   Factor X: LinkedIn's own palette inverted — their colors, our dark canvas

   Logo colors: #96c8db (blue base), #e5959d/#d37b86 (rose), #422631 (burgundy)
   Fonts: Space Grotesk (display) + IBM Plex Sans (body) + JetBrains Mono (data)
   Grid: 4px base
   ========================================================================== */

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

:root {
  /* Font families — distinctive, never generic */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* Type scale (modular, ratio ~1.25) */
  --text-2xs: 0.6875rem;   /* 11px — micro labels */
  --text-xs: 0.75rem;      /* 12px — captions, badges */
  --text-sm: 0.8125rem;    /* 13px — secondary text */
  --text-base: 0.875rem;   /* 14px — body (dense dashboard) */
  --text-md: 1rem;         /* 16px — emphasis body */
  --text-lg: 1.125rem;     /* 18px — section titles */
  --text-xl: 1.375rem;     /* 22px — page subtitles */
  --text-2xl: 1.75rem;     /* 28px — page titles */
  --text-3xl: 2.25rem;     /* 36px — hero / display */

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.03em;  /* large display text */
  --tracking-tight: -0.015em;   /* headings */
  --tracking-normal: 0;         /* body */
  --tracking-wide: 0.025em;     /* small labels, caps */
  --tracking-mono: -0.01em;     /* monospace data */
}

/* ==========================================================================
   SPACING (4px grid — no exceptions)
   ========================================================================== */

:root {
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
}

/* ==========================================================================
   LINKEDIN EXTENDED PALETTE — Reference colors
   Source: brand.linkedin.com/content/dam/brand/site/brand-assets/linkedin-palette-print.pdf
   Marketing Base Colors (PMS spot colors)
   ========================================================================== */

:root {
  /* LinkedIn Brand Blue — the primary */
  --li-blue: #0A66C2;         /* PMS 299 — LinkedIn primary */
  --li-blue-dark: #004182;    /* PMS 641 — LinkedIn dark blue */
  --li-blue-light: #70B5F9;   /* lighter blue for text on dark */
  --li-blue-pale: #D0E8FF;    /* very light blue for light theme tints */

  /* Extended palette — Marketing Base Colors */
  --li-teal: #008C95;         /* PMS 7466 */
  --li-green: #44A833;        /* PMS 368 */
  --li-orange: #E7842C;       /* PMS 152 */
  --li-gold: #C38822;         /* PMS 124 */
  --li-red: #D1342F;          /* PMS 179 */
  --li-pink: #BF1D6A;        /* PMS 7424 */
  --li-purple: #7847B2;       /* PMS 265 */
  --li-gray: #86888A;         /* PMS Cool Gray 7 */

  /* Logo colors — for reference and special elements */
  --logo-blue: #96C8DB;
  --logo-rose: #E5959D;
  --logo-rose-dark: #D37B86;
  --logo-burgundy: #422631;

  /* Cyberpunk palette — Business landing rock/cyber aesthetic */
  --cyber-magenta: #FF2D6B;
  --cyber-magenta-dim: #B8204D;
  --cyber-cyan: #00F0FF;
  --cyber-cyan-dim: #0099A8;
  --cyber-green: #39FF14;
  --cyber-yellow: #FFE600;
  --cyber-purple: #BF5AF2;
  --cyber-black: #07070A;
  --cyber-surface: #0D0D12;
  --cyber-surface-raised: #131318;
  --cyber-border: #1A1A24;
  --cyber-border-glow: rgba(255, 45, 107, 0.3);
  --cyber-text: #E0E0EC;
  --cyber-text-muted: #8E8EA3;
}

/* ==========================================================================
   COLOR — DARK THEME (default)
   LinkedIn Blue on cold navy-black — their palette, our dark canvas
   ========================================================================== */

:root {
  /* Backgrounds — cold navy-black spectrum */
  --bg-base: #0B0D13;          /* deepest: app background */
  --bg-raised: #111319;        /* elevated: sidebar, panels */
  --bg-overlay: #181B25;       /* cards, modals */
  --bg-subtle: #1F2333;        /* hover states, wells */
  --bg-emphasis: #282D40;      /* active states, selections */

  /* Borders */
  --border-default: #252A3A;
  --border-subtle: #1C2030;
  --border-strong: #353B50;
  --border-accent: rgba(10, 102, 194, 0.35);

  /* Text */
  --text-primary: #E8ECF4;     /* warm white, high contrast */
  --text-secondary: #8B92A8;   /* readable muted */
  --text-tertiary: #555B72;    /* subtle labels */
  --text-inverse: #FFFFFF;     /* text on accent backgrounds */

  /* Accent — LINKEDIN BLUE (the signature) */
  --accent: #0A66C2;           /* PMS 299: primary accent */
  --accent-hover: #004182;     /* PMS 641: hover/pressed */
  --accent-subtle: rgba(10, 102, 194, 0.14);  /* tinted backgrounds */
  --accent-muted: rgba(10, 102, 194, 0.30);   /* borders, outlines */
  --accent-text: #70B5F9;      /* light blue: accent text on dark */

  /* Secondary accent — Gold for premium highlights */
  --secondary: #C38822;        /* PMS 124: premium, trust score, upgrades */
  --secondary-subtle: rgba(195, 136, 34, 0.14);
  --secondary-text: #E4A82B;

  /* Semantic — from LinkedIn extended palette */
  --success: #44A833;          /* PMS 368 green */
  --success-subtle: rgba(68, 168, 51, 0.14);
  --success-text: #5CC44A;

  --warning: #E7842C;          /* PMS 152 orange */
  --warning-subtle: rgba(231, 132, 44, 0.14);
  --warning-text: #F09B4F;

  --danger: #D1342F;           /* PMS 179 red */
  --danger-subtle: rgba(209, 52, 47, 0.14);
  --danger-text: #E85B56;

  --info: #008C95;             /* PMS 7466 teal */
  --info-subtle: rgba(0, 140, 149, 0.14);
  --info-text: #2BB5BD;
}

/* ==========================================================================
   COLOR — LIGHT THEME
   Closer to LinkedIn's own aesthetic — clean, professional
   ========================================================================== */

[data-theme="light"] {
  /* Backgrounds */
  --bg-base: #F3F2EF;          /* LinkedIn's actual BG color */
  --bg-raised: #FFFFFF;
  --bg-overlay: #FFFFFF;
  --bg-subtle: #EAE9E5;
  --bg-emphasis: #DDD9D5;

  /* Borders */
  --border-default: #D0CDC8;
  --border-subtle: #E2DFD9;
  --border-strong: #B8B4AE;
  --border-accent: rgba(10, 102, 194, 0.25);

  /* Text */
  --text-primary: #191919;     /* LinkedIn's text black */
  --text-secondary: #666666;
  --text-tertiary: #86888A;    /* PMS Cool Gray 7 */
  --text-inverse: #FFFFFF;

  /* Accent — LinkedIn Blue (already WCAG AA on white) */
  --accent: #0A66C2;
  --accent-hover: #004182;
  --accent-subtle: rgba(10, 102, 194, 0.08);
  --accent-muted: rgba(10, 102, 194, 0.18);
  --accent-text: #0A66C2;

  /* Secondary — Gold darkened for contrast */
  --secondary: #915F0A;
  --secondary-subtle: rgba(145, 95, 10, 0.08);
  --secondary-text: #7A500A;

  /* Semantic */
  --success: #378030;
  --success-subtle: rgba(55, 128, 48, 0.08);
  --success-text: #2E6B28;

  --warning: #C06B1D;
  --warning-subtle: rgba(192, 107, 29, 0.08);
  --warning-text: #A35A15;

  --danger: #B52520;
  --danger-subtle: rgba(181, 37, 32, 0.08);
  --danger-text: #9B1F1A;

  --info: #007078;
  --info-subtle: rgba(0, 112, 120, 0.08);
  --info-text: #005F66;
}

/* ==========================================================================
   BORDERS & RADIUS
   ========================================================================== */

:root {
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
}

/* ==========================================================================
   SHADOWS — layered for depth
   ========================================================================== */

:root {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);

  /* Accent glow — LinkedIn blue glow for CTAs */
  --shadow-accent: 0 0 0 1px rgba(10, 102, 194, 0.25), 0 2px 8px rgba(10, 102, 194, 0.2);
  --shadow-accent-lg: 0 0 0 1px rgba(10, 102, 194, 0.3), 0 4px 16px rgba(10, 102, 194, 0.25);
}

[data-theme="light"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-accent: 0 0 0 1px rgba(10, 102, 194, 0.15), 0 2px 8px rgba(10, 102, 194, 0.1);
  --shadow-accent-lg: 0 0 0 1px rgba(10, 102, 194, 0.2), 0 4px 16px rgba(10, 102, 194, 0.15);
}

/* ==========================================================================
   TRANSITIONS
   ========================================================================== */

:root {
  --duration-fast: 100ms;
  --duration-base: 150ms;
  --duration-slow: 250ms;
  --duration-slower: 400ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast: var(--duration-fast) var(--ease-default);
  --transition-base: var(--duration-base) var(--ease-default);
  --transition-slow: var(--duration-slow) var(--ease-out);
}

/* ==========================================================================
   Z-INDEX SCALE
   ========================================================================== */

:root {
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

:root {
  --sidebar-width: 240px;
  --sidebar-collapsed: 48px;
  --content-max-width: 960px;
  --content-wide-max-width: 1200px;
  --header-height: 52px;
}

/* ==========================================================================
   FOCUS RING (accessibility — never skip)
   ========================================================================== */

:root {
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);
  --focus-ring-danger: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--danger);
}

/* ==========================================================================
   COMPONENT TOKENS (semantic)
   ========================================================================== */

:root {
  /* Buttons */
  --btn-height-sm: 28px;
  --btn-height-md: 36px;
  --btn-height-lg: 44px;
  --btn-padding-sm: var(--space-2) var(--space-3);
  --btn-padding-md: var(--space-2) var(--space-4);
  --btn-padding-lg: var(--space-3) var(--space-6);

  /* Inputs */
  --input-height: 36px;
  --input-padding: var(--space-2) var(--space-3);
  --input-bg: var(--bg-base);
  --input-border: var(--border-default);

  /* Cards */
  --card-padding: var(--space-4);
  --card-padding-lg: var(--space-6);
  --card-gap: var(--space-4);
  --card-bg: var(--bg-overlay);
  --card-border: var(--border-default);
  --card-radius: var(--radius-lg);

  /* Tables */
  --table-row-height: 40px;
  --table-cell-padding: var(--space-2) var(--space-3);

  /* Badges */
  --badge-padding: var(--space-1) var(--space-2);
  --badge-radius: var(--radius-sm);

  /* Progress bars */
  --progress-height: 6px;
  --progress-radius: var(--radius-full);
  --progress-bg: var(--bg-subtle);
}