/* ============================================
   KITLY — DESIGN TOKENS
   Every color, font, spacing, and radius value
   used across the site lives here. Never
   hardcode a hex value anywhere else.
   ============================================ */

:root {
  /* ---- Raw brand colors ---- */
  --raw-crimson: #E1004E;
  --raw-teal: #156873;
  --raw-ink: #000000;
  --raw-white: #FFFFFF;
  --raw-charcoal: #312F31;

  /* ---- Semantic — LIGHT theme (default) ---- */
  --bg-page: var(--raw-white);
  --bg-surface: #FAFAFA;
  --bg-surface-2: #F1F1F2;
  --text-primary: #16151A;
  --text-muted: #5B5A5E;
  --border-soft: #E4E3E5;

  --color-primary: var(--raw-crimson);
  --color-primary-hover: #C4003F;
  --color-primary-text-on: var(--raw-white);

  --color-secondary: var(--raw-teal);
  --color-secondary-hover: #10535C;
  --color-secondary-text-on: var(--raw-white);

  --color-success: #1B8A5A;
  --color-error: #C4003F;

  /* ---- Shape ---- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(22, 21, 26, 0.06);
  --shadow-md: 0 4px 16px rgba(22, 21, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(22, 21, 26, 0.12);

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Type ---- */
  --font-heading: 'Outfit', 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;

  --fs-h1: clamp(2.25rem, 1.9rem + 1.6vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.55rem + 0.9vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --header-height: 72px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 450ms;
}

/* ---- Semantic — DARK theme ---- */
[data-theme="dark"] {
  --bg-page: var(--raw-ink);
  --bg-surface: #17161A;
  --bg-surface-2: var(--raw-charcoal);
  --text-primary: var(--raw-white);
  --text-muted: #9C9B9E;
  --border-soft: rgba(255, 255, 255, 0.08);

  --color-primary: var(--raw-crimson);
  --color-primary-hover: #FF2D71;
  --color-primary-text-on: var(--raw-white);

  --color-secondary: var(--raw-teal);
  --color-secondary-hover: #1E8A97;
  --color-secondary-text-on: var(--raw-white);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}