/* ==========================================================================
   tokens.css — design tokens and CSS custom properties
   All colour, spacing, type, and motion values live here.
   ========================================================================== */

:root {
  /* --- Colour: dark theme (default) --- */
  --color-bg:              #0C1018;
  --color-surface:         rgba(242, 237, 228, 0.03);
  --color-border:          rgba(242, 237, 228, 0.08);
  --color-border-hover:    rgba(196, 114, 74, 0.4);

  --color-text-primary:    #F2EDE4;
  --color-text-secondary:  rgba(242, 237, 228, 0.6);
  --color-text-muted:      rgba(242, 237, 228, 0.5);
  --color-text-hero-muted: rgba(242, 237, 228, 0.4);

  --color-accent:          #C4724A;
  --color-accent-soft:     rgba(196, 114, 74, 0.4);
  --color-sage:            #7B9B8A;

  --color-card-bg-hover:   rgba(242, 237, 228, 0.05);
  --color-card-number:     rgba(242, 237, 228, 0.04);
  --color-divider:         rgba(242, 237, 228, 0.06);
  --color-status-text:     rgba(242, 237, 228, 0.5);

  --color-btn-primary-bg:  #C4724A;
  --color-btn-primary-fg:  #F2EDE4;
  --color-btn-ghost-fg:    rgba(242, 237, 228, 0.5);
  --color-nav-link:        rgba(242, 237, 228, 0.5);
  --color-nav-link-hover:  #F2EDE4;

  /* --- Grain / glow opacity (theme-aware) --- */
  --grain-opacity:         0.4;
  --glow-opacity:          0.12;

  /* --- Typography --- */
  --font-display:          'Syne', sans-serif;
  --font-body:             'DM Sans', sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  clamp(40px, 6vw, 64px);
  --text-hero: clamp(52px, 8vw, 80px);

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

  /* --- Border radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 40px;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.3s ease;

  /* --- Layout --- */
  --container-max:  1200px;
  --container-pad:  40px;
}

/* Light theme overrides */
[data-theme="light"] {
  --color-bg:              #FDFBF8;
  --color-surface:         rgba(10, 15, 26, 0.02);
  --color-border:          rgba(10, 15, 26, 0.06);
  --color-border-hover:    rgba(196, 114, 74, 0.4);

  --color-text-primary:    #0A0F1A;
  --color-text-secondary:  rgba(10, 15, 26, 0.65);
  --color-text-muted:      rgba(10, 15, 26, 0.6);
  --color-text-hero-muted: rgba(10, 15, 26, 0.48);

  /* Deeper terracotta so accent-coloured text passes WCAG AA on the light bg
     (the dark theme keeps #C4724A, which already passes there). */
  --color-accent:          #A15D3D;

  --color-card-bg-hover:   rgba(10, 15, 26, 0.03);
  --color-card-number:     rgba(10, 15, 26, 0.04);
  --color-divider:         rgba(10, 15, 26, 0.06);
  --color-status-text:     rgba(10, 15, 26, 0.6);

  --color-btn-primary-fg:  #FDFBF8;
  --color-btn-ghost-fg:    rgba(10, 15, 26, 0.5);
  --color-nav-link:        rgba(10, 15, 26, 0.5);
  --color-nav-link-hover:  #0A0F1A;

  --grain-opacity:         0.25;
  --glow-opacity:          0.06;
}

@media (max-width: 768px) {
  :root {
    --container-pad: 20px;
    --space-24: 60px;
    --space-20: 40px;
  }
}