/* ============================================================
   SanSal Home Solutions — Design Tokens
   Single source of truth for color, type, spacing, motion.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --color-navy: #1B2733;
  --color-navy-soft: #24323F;
  --color-navy-deep: #131C24;
  --color-gold: #CDA15B;
  --color-gold-hover: #B98B44;
  --color-gold-soft: #E4C896;
  --color-gold-deep: #8A6425; /* WCAG AA-compliant gold for text on cream/white (4.5:1+) */
  --color-cream: #F7F4EE;
  --color-cream-card: #FFFFFF;

  /* ---- Text ---- */
  --color-text-on-navy: #F7F4EE;
  --color-text-on-navy-soft: rgba(247, 244, 238, 0.72);
  --color-text-on-navy-faint: rgba(247, 244, 238, 0.5);
  --color-text-ink: #1B2733;
  --color-text-muted: #5B6670;
  --color-text-faint: #8A929A;

  /* ---- Structural ---- */
  --color-border: #E6E1D6;
  --color-border-on-navy: rgba(247, 244, 238, 0.15);

  /* ---- Feedback ---- */
  --color-success: #3F7D5A;
  --color-error: #B0452E;

  /* ---- Typography ---- */
  --font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.5rem + 2vw, 2.5rem);
  --text-hero: clamp(2.25rem, 1.6rem + 4vw, 4rem);

  /* ---- Spacing (8px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-padding-y: clamp(4rem, 6vw + 2rem, 8rem);
  --section-padding-y-compact: clamp(3rem, 4vw + 1.5rem, 5.5rem);
  --container-max: 1200px;
  --container-pad: clamp(1.5rem, 5vw, 4rem);

  /* ---- Radius / shadow / motion ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-soft: 0 4px 20px rgba(27, 39, 51, 0.08);
  --shadow-card: 0 2px 10px rgba(27, 39, 51, 0.06);
  --shadow-lifted: 0 12px 32px rgba(27, 39, 51, 0.14);
  --shadow-nav-settled: 0 4px 24px rgba(19, 28, 36, 0.18);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 500ms;
}