/* ============================================================
   PDATL_colorConstants.css
   PhoneDoc ATL — Design Token Definitions
   All CSS custom properties for the entire site.
   ============================================================ */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-primary: #E53935;
  --color-primary-dark: #C62828;
  --color-dark-bg: #1A1A1A;
  --color-dark-card: #222222;
  --color-body-bg: #FFFFFF;
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #666666;
  --color-text-on-dark: #FFFFFF;
  --color-light-gray: #F5F5F5;
  --color-border: #DDDDDD;
  --color-success: #43A047;
  --color-star: #FFC107;
  --color-error: #D32F2F;

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Bebas Neue', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-label: 'Space Mono', monospace;

  /* ── Spacing (8px base unit) ────────────────────────────── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-btn: 8px;
  --radius-card: 12px;
  --radius-input: 6px;
  --radius-pill: 20px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-nav: 0 2px 12px rgba(0, 0, 0, 0.10);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.25);

  /* ── Layout ─────────────────────────────────────────────── */
  --max-width: 1200px;
  --gutter: 24px;
  --nav-height: 80px;
  --nav-height-scrolled: 60px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.6s ease-out;
}