/* Design tokens. The single source for every colour, radius, space, shadow and layer value (DESIGN_SYSTEM.md 2.11).
   Loaded first on every page by templates/base.html and templates/marketing/base.html.
   Tailwind (templates/base.html) reads these through var(); do not repeat a value elsewhere. */
:root {
  /* Electric Editorial Design System */
  --color-canvas: #FDFBF7; /* Warm Cream - App Background */
  --color-surface: #FFFFFF; /* Pure White - Cards/Panels */
  --color-ink-primary: #1A1A1A; /* Almost Black */
  --color-ink-secondary: #6B6760; /* Graphite */
  --color-ink-structural: #E6E2DA; /* Subtle Borders */
  --color-signal-live: #CBF300; /* Lime. Wordmark scribble and logo dot only. */
  --color-border: #E6E2DA;
  --color-error: #D32F2F;

  /* Legacy mappings for backward compatibility */
  --color-deep-teal: #1A1A1A;
  --color-warm-cream: #FDFBF7;
  --color-ivory-tusk: #FDFBF7;
  --color-bengal-gold: #1A1A1A;
  --color-spotted-rust: #1A1A1A;
  --color-bengal-tan: #E6E2DA;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-light: #1A1A1A;
  --color-cream: #FDFBF7;
  --color-teal: #1A1A1A;
  --color-teal-dark: #0D0D0D;
  --color-teal-light: #333333;
  --color-teal-hover: #0D0D0D;
  --color-teal-active: #1A1A1A;
  --color-mint: #CBF300;
  --color-mint-light: #D8F633;
  --color-mint-dark: #A8CC00;
  --color-signal: #CBF300;
  --color-surface-solid: #FFFFFF;
  --color-card-bg: #FFFFFF;
  --color-text-main: #1A1A1A;
  --color-text-muted: #6B6760;
  --color-input-bg: #FFFFFF;

  /* Electric Editorial Shapes - rounded-xl */
  --radius-card: 12px;
  --radius-btn: 4px;
  --radius-pill: 999px;
  --radius-squircle: 12px;

  /* Design system radius tokens */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Design system spacing (8px base grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --text-label: 0.6875rem;

  /* Design system border tokens */
  --border-default: 1px solid #E6E2DA;
  --border-strong: 1px solid #1A1A1A;
  --border-focus: 2px solid #1A1A1A;

  --font-display: 'Inter Tight', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-serif: 'Source Serif 4', serif;

  --color-pink-50: #FFF0FC;
  --color-pink-100: #FFDDF6;
  --color-pink-300: #FF9BE8;
  --color-pink-500: #FF4FD8;
  --color-pink-700: #B8179A;
  --color-pink-900: #6B0D5C;

  --color-aqua-50: #EAFAFE;
  --color-aqua-100: #CDF3FB;
  --color-aqua-300: #7DDFF2;
  --color-aqua-500: #20C7E8;
  --color-aqua-700: #0B7C94;
  --color-aqua-900: #064656;

  --color-cobalt-50: #EEF0FF;
  --color-cobalt-100: #D9DDFF;
  --color-cobalt-300: #8E98FA;
  --color-cobalt-500: #2F3DF0;
  --color-cobalt-700: #1F29B0;
  --color-cobalt-900: #121A6B;

  --color-status-success: #1B7D45;
  --color-status-success-tint: #E4F4EA;
  --color-status-warning: #8A5700;
  --color-status-warning-fill: #F5B531;
  --color-status-warning-tint: #FDF1D8;
  --color-status-error: #C4311E;
  --color-status-error-tint: #FBE4E0;
  --color-status-info: var(--color-aqua-700);
  --color-status-info-tint: var(--color-aqua-50);
  --color-status-neutral: #6B6760;
  --color-status-neutral-fill: #FFFFFF;
  --color-status-neutral-border: #E6E2DA;

  --color-fixed-ink: #1A1A1A;
  --color-fixed-cream: #FDFBF7;

  --color-dark-bg: #1A1A1A;
  --color-dark-surface-1: #222221;
  --color-dark-surface-2: #2B2A28;
  --color-dark-surface-3: #353431;
  --color-dark-border: rgba(253, 251, 247, 0.14);
  --color-dark-text: #FDFBF7;
  --color-dark-text-secondary: #A8A49B;

  /* Elevation. Warm ink. Not pure black. */
  --shadow-e0: none;
  --shadow-e1: 0 1px 2px rgba(26, 26, 26, 0.06), 0 1px 1px rgba(26, 26, 26, 0.04);
  --shadow-e2: 0 4px 12px -2px rgba(26, 26, 26, 0.08), 0 2px 4px rgba(26, 26, 26, 0.04);
  --shadow-e3: 0 12px 24px -6px rgba(26, 26, 26, 0.12), 0 4px 8px rgba(26, 26, 26, 0.05);
  --shadow-e4: 0 24px 48px -12px rgba(26, 26, 26, 0.18), 0 8px 16px rgba(26, 26, 26, 0.06);

  --z-below: -1;
  --z-base: 0;
  --z-above: 10;
  --z-sticky: 40;
  --z-nav: 50;
  --z-dropdown: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* Legacy aliases — warm elevation tokens */
  --shadow-subtle: var(--shadow-e1);
  --shadow-card: none;
  --shadow-card-hover: none;
  --shadow-elevated: var(--shadow-e3);
  --shadow-btn: none;

  /* Data visualization (monochrome chart scale) */
  --data-1: #1A1A1A;
  --data-2: #4A4A4A;
  --data-3: #9CA3AF;
  --data-4: #E5E5E5;

  /* Marketing-only tokens */
  --color-canvas-warm: #F5F0E8;
  --color-surface-muted: #F8F6F2;
  --color-ink-tertiary: #9E9E9E;
  --color-ink-wash: #F0EEEA;
  --color-candidate: #FF4FD8;
  --color-company: #20C7E8;
  --color-success: var(--color-status-success);
  --color-disabled: #E6E2DA;
  --font-logo: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  /* Channel versions for Tailwind opacity utilities (bg-ink-primary/10). Keep in step with the hex tokens above. */
  --rgb-ink-primary: 26 26 26;
  --rgb-teal: 26 26 26;
  --rgb-mint: 203 243 0;
  --rgb-border: 230 226 218;
}