/* ==========================================================================
   THE SUIT STUDIO — Design Tokens
   Single source of truth for colour, type, spacing, radii, shadows & motion.
   Every other stylesheet consumes these variables; never hard-code a value.
   ========================================================================== */

:root {
  /* ---------- Brand palette ---------- */
  --blush: #f8dde5;          /* primary   — soft blush pink            */
  --blush-50: #fdeff3;       /* lightest tint, section backgrounds     */
  --blush-100: #fbe7ed;
  --rose: #e78ca8;           /* secondary — rose pink, interactive     */
  --rose-dark: #dd7a99;
  --deep-rose: #c65a7c;      /* accent    — headings, CTAs, links      */
  --deep-rose-dark: #ad4a6a;
  --plum: #7e3b52;           /* deepest brand tone, footer            */

  /* ---------- Neutrals ---------- */
  --ink: #3e3a3a;            /* body copy                              */
  --ink-soft: #6b6363;       /* secondary copy                         */
  --ink-muted: #9b9292;      /* meta, captions, disabled               */
  --line: #f0e2e7;           /* hairline borders                       */
  --line-strong: #e4d0d7;
  --white: #ffffff;
  --cream: #fffaf9;

  /* ---------- Status ---------- */
  --success: #3f8f6b;
  --warning: #d99b2f;
  --danger: #c0483f;
  --star: #f0a83c;

  /* ---------- Gradients ---------- */
  --grad-blush: linear-gradient(135deg, var(--blush-50) 0%, var(--blush) 100%);
  --grad-rose: linear-gradient(135deg, var(--rose) 0%, var(--deep-rose) 100%);
  --grad-soft: linear-gradient(180deg, var(--white) 0%, var(--blush-50) 100%);
  --grad-hero: radial-gradient(120% 90% at 80% 10%, var(--blush) 0%, var(--blush-50) 45%, var(--white) 100%);
  --grad-footer: linear-gradient(160deg, var(--deep-rose) 0%, var(--plum) 100%);

  /* ---------- Typography ---------- */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: 0.75rem;      /* 12px */
  --fs-sm: 0.8125rem;    /* 13px */
  --fs-base: 0.9375rem;  /* 15px */
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: clamp(1.75rem, 3vw, 2.5rem);
  --fs-4xl: clamp(2.25rem, 5vw, 3.75rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.7;

  --ls-wide: 0.08em;
  --ls-wider: 0.18em;

  /* ---------- Spacing scale ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5.5rem;

  --section-y: clamp(3rem, 7vw, 5.5rem);   /* vertical rhythm between sections */
  --container: 1280px;
  --container-narrow: 960px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* ---------- Radii ---------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-arch: 240px 240px 22px 22px;  /* boutique arch shape */
  --r-pill: 999px;

  /* ---------- Shadows (soft, luxury) ---------- */
  --sh-xs: 0 2px 8px rgba(198, 90, 124, 0.06);
  --sh-sm: 0 6px 18px rgba(198, 90, 124, 0.08);
  --sh-md: 0 14px 34px rgba(198, 90, 124, 0.12);
  --sh-lg: 0 24px 60px rgba(198, 90, 124, 0.16);
  --sh-glow: 0 10px 30px rgba(231, 140, 168, 0.35);

  /* ---------- Glassmorphism ---------- */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-border: 1px solid rgba(255, 255, 255, 0.75);
  --glass-blur: blur(14px) saturate(140%);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s var(--ease);
  --t-base: 0.32s var(--ease);
  --t-slow: 0.6s var(--ease-out);

  /* ---------- Layout constants ---------- */
  --header-h: 82px;
  --announce-h: 38px;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}