/* ==========================================================================
   Pixel Parlour — Design tokens
   Only CSS custom properties live here. Change the brand from one place.
   ========================================================================== */

:root {
  /* ---------- Colour: neutrals ---------- */
  --color-bg: #FFF9FC;            /* soft warm off-white */
  --color-surface: #FFFFFF;
  --color-text: #2B2433;          /* deep plum-charcoal */
  --color-text-muted: #5E546C;    /* 6.6:1 on bg; was #6B6178, darkened so it still passes AA over hero blobs (≥4.7:1) */
  --color-border: #F0E4EE;
  --color-plum: #2B2433;          /* footer / dark surfaces */
  --color-on-plum: #FFFFFF;
  --color-on-plum-muted: #D9D0E3; /* 10:1 on plum */

  /* ---------- Colour: brand ---------- */
  --color-pink-100: #FFE3EF;
  --color-pink-300: #FFB3D3;
  --color-pink-400: #FF8DBF;      /* CTA hover (7.0:1 with dark text) */
  --color-pink-500: #FF6FAE;      /* primary accent / CTA background */
  --color-pink-700: #B0306A;      /* pink text on light bgs (5:1+) */

  --color-lilac-100: #EEE6FF;
  --color-lilac-300: #CDB8FF;
  --color-lilac-500: #8B6BE8;     /* decorative / large text only */
  --color-lilac-700: #5B3FC4;     /* lilac text on light bgs (5.9:1+) */

  --color-mint-100: #DDF7EC;
  --color-mint-300: #BFF0DC;
  --color-mint-500: #3CC9A0;      /* decorative only */
  --color-mint-700: #17745A;      /* mint text on light bgs (5:1+) */

  /* CTA: pink-500 bg + dark text = 5.80:1 (WCAG AA). White text fails (2.58:1). */
  --color-cta-bg: var(--color-pink-500);
  --color-cta-bg-hover: var(--color-pink-400);
  --color-cta-text: var(--color-text);

  --color-focus: var(--color-lilac-700);

  /* Forms */
  --color-input-border: #8F829F;  /* 3.58:1 on white (WCAG 1.4.11 non-text contrast) */
  --color-error: var(--color-pink-700);
  --color-success: var(--color-mint-700);

  /* ---------- Gradients ---------- */
  --gradient-pink-lilac: linear-gradient(135deg, var(--color-pink-300) 0%, var(--color-lilac-300) 100%);
  --gradient-lilac-mint: linear-gradient(135deg, var(--color-lilac-300) 0%, var(--color-mint-300) 100%);
  --gradient-mint-pink: linear-gradient(135deg, var(--color-mint-300) 0%, var(--color-pink-300) 100%);
  --gradient-soft: linear-gradient(180deg, var(--color-bg) 0%, var(--color-pink-100) 100%);
  --gradient-cta: linear-gradient(120deg, var(--color-pink-300) 0%, #E8B9F0 45%, var(--color-lilac-300) 100%);

  /* ---------- Typography ---------- */
  --font-heading: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type scale (≈ 320px → 1440px) */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.375rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.6rem, 1.38rem + 1.1vw, 2.3rem);
  --step-4: clamp(1.95rem, 1.6rem + 1.8vw, 3rem);
  --step-5: clamp(2.3rem, 1.7rem + 3vw, 4.25rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.65;

  /* ---------- Spacing (8px scale) ---------- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 2.5rem;   /* 40px */
  --space-8: 3rem;     /* 48px */
  --space-9: 4rem;     /* 64px */
  --space-10: 5rem;    /* 80px */
  --space-11: 6rem;    /* 96px */

  --section-pad: clamp(var(--space-9), 6vw + 1rem, var(--space-11));

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2rem);
  --header-height: 72px;

  /* ---------- Shape ---------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* ---------- Shadows (soft, colour-tinted, layered) ---------- */
  --shadow-sm: 0 1px 2px rgba(139, 107, 232, 0.08), 0 2px 6px rgba(255, 111, 174, 0.06);
  --shadow-md: 0 2px 4px rgba(139, 107, 232, 0.06), 0 8px 24px rgba(255, 111, 174, 0.12);
  --shadow-lg: 0 4px 8px rgba(139, 107, 232, 0.08), 0 18px 48px rgba(139, 107, 232, 0.18);
  --shadow-pink: 0 6px 20px rgba(255, 111, 174, 0.35);
  --shadow-header: 0 6px 24px rgba(139, 107, 232, 0.12);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 700ms;

  /* ---------- Layers ---------- */
  --z-base: 1;
  --z-header: 100;
  --z-skip: 1000;
}