/* Art direction: iCS Job Tracker v4 — Solvior Theme
   Dark charcoal/slate base, selective teal accent, GSAP-powered motion
   Libre Franklin headlines, Lato body text
   "Confident handshake" — stable, dynamically engaging, high-performance consulting */

:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.813rem);
  --text-sm:   clamp(0.813rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.85rem + 0.15vw, 0.938rem);
  --text-lg:   clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-3xl:  clamp(2rem, 1.5rem + 1.5vw, 2.5rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem;

  /* Solvior Typography */
  --font-display: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 9999px;
  --transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* iCS Brand Colors — Solvior interpretation */
  --navy: #1B365D;
  --navy-light: #234575;
  --navy-dark: #122440;
  --navy-deep: #0D1A2E;

  /* Solvior Accent — Selective teal */
  --teal: #1A9AB5;
  --teal-hover: #21B5D4;
  --teal-subtle: rgba(26, 154, 181, 0.12);
  --teal-glow: rgba(26, 154, 181, 0.25);

  /* Gold retained for star ratings & key highlights */
  --gold: #C5A258;
  --gold-light: #D4B66E;
  --gold-dark: #A88B42;

  /* Sidebar */
  --sidebar-width: 230px;
}

/* ===== SOLVIOR DARK MODE (Primary) ===== */
:root, [data-theme="dark"] {
  --color-bg: #14171f;
  --color-surface: #1a1e2a;
  --color-surface-2: #1f2433;
  --color-surface-offset: #171b25;
  --color-surface-dynamic: #242836;
  --color-surface-elevated: #252a3a;
  --color-divider: #2a3042;
  --color-border: #313852;
  --color-border-subtle: #262d40;
  --color-text: #e2e5ec;
  --color-text-muted: #8892a4;
  --color-text-faint: #505872;
  --color-text-inverse: #0D1117;
  --color-primary: var(--teal);
  --color-primary-hover: var(--teal-hover);
  --color-primary-active: #178BA0;
  --color-primary-highlight: rgba(26, 154, 181, 0.08);
  --color-error: #E06B5C;
  --color-error-hover: #D05545;
  --color-error-highlight: #3A1F1A;
  --color-success: #4CAF6E;
  --color-success-highlight: #1E2E1F;
  --color-warning: #E0A84A;
  --color-warning-highlight: #2E2415;

  /* Board background — deep charcoal with subtle teal undertone */
  --board-bg: #111420;
  --board-column-bg: rgba(255,255,255,0.03);
  --board-column-header: rgba(255,255,255,0.05);
  --board-text: #e2e5ec;
  --board-text-muted: rgba(226,229,236,0.55);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.45);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 20px rgba(26, 154, 181, 0.1);
}

/* ===== LIGHT MODE ===== */
[data-theme="light"] {
  --color-bg: #F0F2F5;
  --color-surface: #FFFFFF;
  --color-surface-2: #F8F9FA;
  --color-surface-offset: #EBEDF0;
  --color-surface-dynamic: #DFE1E5;
  --color-surface-elevated: #FFFFFF;
  --color-divider: #D0D3D9;
  --color-border: #C4C8D0;
  --color-border-subtle: #E0E2E6;
  --color-text: #1A1D24;
  --color-text-muted: #5F6573;
  --color-text-faint: #9DA3AE;
  --color-text-inverse: #F5F6F8;
  --color-primary: #1A7A8A;
  --color-primary-hover: #15687A;
  --color-primary-active: #115A6A;
  --color-primary-highlight: #D4ECF0;
  --color-error: #C44536;
  --color-error-hover: #A33828;
  --color-error-highlight: #F2DCD8;
  --color-success: #2E7D32;
  --color-success-highlight: #D4EDDA;
  --color-warning: #D4932F;
  --color-warning-highlight: #FFF3CD;

  --board-bg: linear-gradient(135deg, #1A7A8A 0%, #1B365D 50%, #122440 100%);
  --board-column-bg: rgba(255,255,255,0.08);
  --board-column-header: rgba(255,255,255,0.15);
  --board-text: #FFFFFF;
  --board-text-muted: rgba(255,255,255,0.7);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.15);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-glow: 0 0 20px rgba(26, 122, 138, 0.08);
}