/*
  Design tokens transcribed from DESIGN_SYSTEM.md.
  This file is the single source of truth for CSS custom properties.
  Do not hardcode values in feature CSS when a token exists here.
*/

:root {
  /* Brand */
  --brand-950: #080D2A;
  --brand-900: #0F1A53;
  --brand-800: #16246D;
  --brand-700: #1E3190;
  --brand-600: #2943B8;
  --brand-500: #3B5CE1;
  --brand-400: #6F89F6;
  --brand-300: #9FB2FF;
  --brand-200: #C9D4FF;
  --brand-100: #E8ECFF;
  --brand-50: #F4F6FF;

  /* Neutral */
  --neutral-950: #0A0A0F;
  --neutral-900: #111217;
  --neutral-800: #1B1D24;
  --neutral-700: #2B2F3A;
  --neutral-600: #4A5160;
  --neutral-500: #697180;
  --neutral-400: #8B93A1;
  --neutral-300: #CBD0D8;
  --neutral-200: #E4E7EC;
  --neutral-100: #F1F3F6;
  --neutral-50: #F7F8FA;
  --white: #FFFFFF;

  /* Semantic */
  --success-700: #047857;
  --success-600: #059669;
  --success-100: #D1FAE5;
  --success-50: #ECFDF5;

  --warning-700: #B45309;
  --warning-600: #D97706;
  --warning-100: #FEF3C7;
  --warning-50: #FFFBEB;

  --danger-700: #B91C1C;
  --danger-600: #DC2626;
  --danger-100: #FEE2E2;
  --danger-50: #FEF2F2;

  --info-700: #0369A1;
  --info-600: #0284C7;
  --info-100: #E0F2FE;
  --info-50: #F0F9FF;

  /* Status accent palette — shared, application-wide 3-state visual
     language (target/complete/incomplete). Not module-specific: used by
     KPI cards, the My Hours calendar, and any future module that needs
     the same states. Distinct from the Semantic scale above (success/
     warning/danger/info), which serves badges/alerts and must not be
     repurposed here. */
  --status-target: #3B5CE1;
  --status-target-soft: #8FB1FF;
  --status-complete: #2EBD85;
  --status-complete-soft: #7BE0B6;
  --status-incomplete: #E76F51;
  --status-incomplete-soft: #F3A08B;

  /* Very subtle background tints derived from the status colors above,
     for gradient fills (e.g. calendar day cards). */
  --status-complete-tint: rgba(46, 189, 133, 0.07);
  --status-incomplete-tint: rgba(231, 111, 81, 0.07);

  /* Subtle glow/shadow derived from the "soft" status colors, for small
     icon badges (e.g. KPI cards). */
  --status-target-glow: rgba(143, 177, 255, 0.35);
  --status-complete-glow: rgba(123, 224, 182, 0.35);
  --status-incomplete-glow: rgba(243, 160, 139, 0.35);

  /* KPI text roles — reusable wherever a KPI-style stat is displayed. */
  --kpi-text-title: #555555;
  --kpi-text-value: #1F2A44;

  /* Main theme tokens */
  --app-bg: #F7F8FA;
  --app-surface: #FFFFFF;
  --app-surface-subtle: #F9FAFB;
  --app-border: #E4E7EC;
  --app-border-strong: #CBD0D8;
  --app-divider: #EEF0F3;

  --text-primary: #111217;
  --text-secondary: #4A5160;
  --text-muted: #697180;
  --text-disabled: #A4ABB7;
  --text-inverse: #FFFFFF;

  --focus-ring: rgba(59, 92, 225, 0.28);

  /* Accent */
  --accent: #0F1A53;
  --accent-hover: #16246D;
  --accent-active: #080D2A;
  --accent-soft: #E8ECFF;
  --accent-border: #C9D4FF;

  /* Sidebar (dark surfaces) */
  --sidebar-bg: #080D2A;
  --sidebar-surface: #0F1A53;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-text: rgba(255, 255, 255, 0.86);
  --sidebar-text-muted: rgba(255, 255, 255, 0.58);
  --sidebar-active-bg: rgba(255, 255, 255, 0.10);
  --sidebar-active-text: #FFFFFF;
  --sidebar-hover-bg: rgba(255, 255, 255, 0.07);

  /* Sidebar active-nav accent (glass), derived from --brand-400 (#6F89F6) */
  --sidebar-active-accent-bg: rgba(111, 137, 246, 0.16);
  --sidebar-active-accent-border: rgba(111, 137, 246, 0.55);

  /* Sidebar & topbar dimensions */
  --sidebar-width: 248px;
  --sidebar-collapsed-width: 72px;
  --topbar-height: 56px;

  /* Content */
  --content-max-width: none;
  --content-padding-x: 24px;
  --content-padding-y: 20px;

  /* Typography */
  --font-family-base: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --font-size-2xs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;

  --line-height-tight: 1.2;
  --line-height-normal: 1.45;
  --line-height-relaxed: 1.6;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Border radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(10, 10, 15, 0.05);
  --shadow-sm: 0 4px 10px rgba(10, 10, 15, 0.06);
  --shadow-md: 0 12px 30px rgba(10, 10, 15, 0.10);
  --shadow-lg: 0 24px 60px rgba(10, 10, 15, 0.16);

  /* Motion */
  --transition-fast: 120ms ease;
  --transition-normal: 180ms ease;
  --transition-slow: 240ms ease;
}