/* Steve Design System - CSS Custom Properties */
/* BraightLegal - Paper & Ink Aesthetic */

:root {
  /* Colors - Paper & Ink */
  --paper: #fbf8f3;
  --paper-2: #f5f0e6;
  --paper-3: #faf6ee;
  --ink: #1a1814;
  --ink-2: #2d2a24;
  --ink-3: #3d3a34;

  /* Body & Text */
  --body: #4a4540;
  --body-2: #5a554e;
  --muted: #7a736a;
  --muted-2: #9a948a;

  /* Lines & Borders */
  --line: #e6dfd1;
  --line-2: #d8cfbb;
  --line-3: #c8c0ad;

  /* Accents */
  --accent: #1e3a8a;
  --accent-2: #2563eb;
  --accent-soft: #dbe4f5;
  --accent-ring: rgba(30, 58, 138, 0.15);

  /* Gold */
  --gold: #b45309;
  --gold-2: #d97706;
  --gold-soft: #f5e6c8;
  --gold-ring: rgba(180, 83, 9, 0.15);

  /* Surfaces */
  --surface: #ffffff;
  --surface-2: #faf6ee;
  --surface-3: #f5f0e6;

  /* Status Colors */
  --success: #15803d;
  --success-soft: #dcfce7;
  --warning: #a16207;
  --warning-soft: #fef3c7;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --info: #1e3a8a;
  --info-soft: #dbe4f5;

  /* Dark Mode Tokens */
  --dark-paper: #12100e;
  --dark-paper-2: #1a1814;
  --dark-ink: #fbf8f3;
  --dark-body: #c8c0ad;
  --dark-muted: #9a948a;
  --dark-line: #2d2a24;
  --dark-surface: #1a1814;

  /* Spacing Scale */
  --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 */

  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Border Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(26, 24, 20, 0.04), 0 1px 3px rgba(26, 24, 20, 0.04);
  --shadow: 0 4px 16px rgba(26, 24, 20, 0.06), 0 1px 3px rgba(26, 24, 20, 0.04);
  --shadow-lg: 0 24px 48px -12px rgba(26, 24, 20, 0.18), 0 4px 12px rgba(26, 24, 20, 0.06);
  --shadow-glow: 0 0 20px rgba(30, 58, 138, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index Scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

/* Dark mode class */
[data-theme="dark"] {
  --paper: var(--dark-paper);
  --paper-2: var(--dark-paper-2);
  --ink: var(--dark-ink);
  --body: var(--dark-body);
  --muted: var(--dark-muted);
  --line: var(--dark-line);
  --surface: var(--dark-surface);
}