/* ==========================================================================
   Design Tokens — Clearwork Guides
   Dark-mode-first custom properties. Every visual value lives here.
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     Colors — Background & Surface
     ----------------------------------------------------------------------- */
  --bg:               #0f0f1a;
  --surface:          #1a1a2e;
  --surface-elevated: #252540;

  /* Light-mode surface tokens (used in alternating sections) */
  --bg-light:         #faf9f7;
  --surface-light:    #ffffff;

  /* -----------------------------------------------------------------------
     Colors — Text
     ----------------------------------------------------------------------- */
  --text:       #e8e6e3;
  --text-muted: #9b9baa;
  --text-light: #6b6b7b;

  /* -----------------------------------------------------------------------
     Colors — Borders
     ----------------------------------------------------------------------- */
  --border:       rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.15);

  /* -----------------------------------------------------------------------
     Colors — Brand Accent (warm amber)
     ----------------------------------------------------------------------- */
  --accent:       #d4915e;
  --accent-dark:  #b87844;
  --accent-light: #e5a878;
  --accent-glow:  rgba(212, 145, 94, 0.15);

  /* -----------------------------------------------------------------------
     Colors — Semantic
     ----------------------------------------------------------------------- */
  --success: #6aab8e;
  --error:   #d45f5f;
  --warning: #c9a84c;
  --white:   #ffffff;

  /* -----------------------------------------------------------------------
     Colors — Product Accent Groups (5 hues)
     Each product card can carry an accent class to tint its hover state.
     ----------------------------------------------------------------------- */
  --accent-blue: #5b8fb9;
  --accent-teal: #4ecdc4;
  --accent-warm: #d4915e;
  --accent-gold: #c9a84c;
  --accent-green: #6aab8e;

  /* -----------------------------------------------------------------------
     Typography — Font Families
     ----------------------------------------------------------------------- */
  --font-display: 'Fraunces', serif;
  --font-body:    'Instrument Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* -----------------------------------------------------------------------
     Typography — Font Size Scale
     ----------------------------------------------------------------------- */
  --text-hero: clamp(3rem, 7vw, 5.5rem);
  --text-5xl:  3rem;
  --text-4xl:  2.25rem;
  --text-3xl:  1.875rem;
  --text-2xl:  1.5rem;
  --text-xl:   1.25rem;
  --text-lg:   1.125rem;
  --text-base: 1rem;
  --text-sm:   0.875rem;
  --text-xs:   0.75rem;

  /* -----------------------------------------------------------------------
     Typography — Font Weight
     ----------------------------------------------------------------------- */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* -----------------------------------------------------------------------
     Typography — Line Height
     ----------------------------------------------------------------------- */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* -----------------------------------------------------------------------
     Typography — Letter Spacing
     ----------------------------------------------------------------------- */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;

  /* -----------------------------------------------------------------------
     Spacing Scale
     ----------------------------------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* -----------------------------------------------------------------------
     Layout — Containers & Header
     ----------------------------------------------------------------------- */
  --container-max:    1120px;
  --container-narrow: 720px;
  --container-wide:   1280px;
  --header-height:    72px;

  /* -----------------------------------------------------------------------
     Border Radius
     ----------------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
     Shadows (warm-tinted)
     ----------------------------------------------------------------------- */
  --shadow-sm:     0 2px 8px rgba(15, 15, 26, 0.3);
  --shadow-md:     0 4px 16px rgba(15, 15, 26, 0.4);
  --shadow-lg:     0 8px 32px rgba(15, 15, 26, 0.5);
  --shadow-accent: 0 8px 32px rgba(212, 145, 94, 0.2);
  --shadow-card:   0 4px 24px rgba(15, 15, 26, 0.3);

  /* -----------------------------------------------------------------------
     Transitions
     ----------------------------------------------------------------------- */
  --transition-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -----------------------------------------------------------------------
     Z-Index Scale
     ----------------------------------------------------------------------- */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   50;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;
}