/**
 * Design Tokens / CSS Variables
 */

:root {
  /* Background colors */
  --color-bg: #F8FAFC;
  --color-card: #FFFFFF;
  --color-bg-hover: #F1F5F9;

  /* Text colors */
  --color-text: #0F172A;
  --color-text-secondary: #475569;
  --color-text-subtle: #64748B;

  /* Primary brand color (Part A accent) */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-subtle: #DBEAFE;

  /* Part B accent color (teal) */
  --color-partb: #0D9488;
  --color-partb-hover: #0F766E;
  --color-partb-subtle: #CCFBF1;
  --color-partb-border: #5EEAD4;

  /* Status colors */
  --color-success: #059669;
  --color-success-bg: #ECFDF5;
  --color-success-border: #A7F3D0;

  --color-warning: #D97706;
  --color-warning-bg: #FFFBEB;
  --color-warning-border: #FDE68A;

  --color-danger: #DC2626;
  --color-danger-bg: #FEF2F2;
  --color-danger-border: #FECACA;

  /* Border colors */
  --color-border: #E2E8F0;
  --color-border-hover: #94A3B8;

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

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-md: 0.9375rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.25rem;
  --font-size-3xl: 1.5rem;
  --font-size-4xl: 1.875rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

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

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -1px rgba(15, 23, 42, 0.04);

  /* Transitions */
  --transition-fast: 0.12s ease-out;
  --transition: 0.2s ease-out;
  --transition-screen: 0.25s ease-out;

  /* Layout */
  --container-max-width: 1000px;
  --progress-header-height: 60px;
  --progress-header-height-mobile: 56px;
}