/* ============================================================
   DESIGN TOKENS — Spritzschutzglas (kitchen splashback)
   COLOR is the product hero. Site = warm charcoal gallery-wall
   base so the colour swatches pop. Accent: warm coral.
   Font: Space Grotesk (display) + Inter (body).

   Token names match the approved demo so the Phase 2 colour
   picker and Phase 3 configurator drop in unchanged.
   ============================================================ */
:root {
  /* Base — warm graphite/charcoal (gallery wall) */
  --char:           #1c1a18;   /* deepest, near-black warm */
  --char-2:         #262320;   /* card surface */
  --char-3:         #322e2a;   /* lifted surface */
  --char-line:      rgba(255, 252, 248, 0.10);
  --char-line-soft: rgba(255, 252, 248, 0.06);

  /* Accent — warm coral / clay */
  --coral:          #e76f51;   /* primary accent (AA on dark surfaces) */
  --coral-bright:   #f4845f;
  --coral-text:     #a83a18;   /* deeper coral for text on LIGHT surfaces (AA on cream) */
  --coral-soft:     rgba(231, 111, 81, 0.14);

  /* Warm cream for light sections (Phase 2+) */
  --cream:          #f5f0e8;
  --cream-2:        #ece4d8;
  --white:          #ffffff;

  /* Text on dark */
  --on-dark:        #f5f0e8;
  --on-dark-mut:    rgba(245, 240, 232, 0.62);
  --on-dark-faint:  rgba(245, 240, 232, 0.55); /* was .40 in demo — raised for WCAG AA on small labels */

  /* Text on light */
  --on-light:       #1c1a18;
  --on-light-mut:   #6b635a;

  /* Brand swatch accents (decorative mark) */
  --brand-swatch-1: var(--coral);
  --brand-swatch-2: #4a90a4;
  --brand-swatch-3: #e8e2d6;

  /* Type */
  --display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radius */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Shadow */
  --sh-md: 0 10px 36px rgba(0, 0, 0, 0.28);
  --sh-lg: 0 26px 64px rgba(0, 0, 0, 0.40);

  /* Transitions */
  --t-fast: 190ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 360ms cubic-bezier(.4, 0, .2, 1);

  /* Layout */
  --max: 1280px;
  --header-h: 78px;
}