/* ============================================================
   CUTIE NAILS — Design tokens
   ------------------------------------------------------------
   MIRROR OF marketing/brand/brand-kit.css.

   brand-kit.css is the source of truth for every brand primitive.
   It lives outside landing/ (which publishes verbatim to
   cutienails.app), so it cannot be <link>ed — the values below are
   a deliberate copy. If a hex changes there, change it here.
   docs/landing.md carries a drift check that greps for each hex.

   Nothing in this file is a component. Components live in
   base.css / chrome.css / home.css / pages.css and must never write
   a raw hex or rgba() — use a semantic token, or
   rgb(var(--x-rgb) / <alpha>) for a genuine one-off tint.
   ============================================================ */

:root {
  /* ---------- Brand primitives (from brand-kit.css) ---------- */
  --petal-pink:    #FFB6C1;
  --lavender-mist: #C8A2C8;
  --rose-gold:     #B76E79;
  --deep-rose:     #8B4A6B;

  --blush-white:   #FFF8F9;
  --warm-gray:     #9E9095;
  --deep-plum:     #2D1B2E;
  --white:         #FFFFFF;

  --success-mint:  #A8D8A8;
  --warning-peach: #FFD4A3;
  --error-coral:   #FF7F7F;
  --info-sky:      #A8C8E8;

  /* ---------- RGB triplets ----------
     Space-separated for the rgb(R G B / A) syntax. These exist so no
     component ever hard-codes a tint: rgb(var(--pink-rgb) / 0.16).
     Chosen over color-mix() because they are greppable, have zero
     support risk, and behave identically inside gradients and shadows. */
  --pink-rgb:  255 182 193;
  --lav-rgb:   200 162 200;
  --rose-rgb:  183 110 121;
  --plum-rgb:   45  27  46;
  --blush-rgb: 255 248 249;
  --white-rgb: 255 255 255;

  /* ---------- Type families ---------- */
  --font-display: 'Playfair Display', Georgia, serif;   /* Recoleta substitute */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------- Named gradients (135°) ---------- */
  --gradient-hero:    linear-gradient(135deg, var(--petal-pink), var(--lavender-mist));
  --gradient-premium: linear-gradient(135deg, var(--rose-gold), var(--deep-rose));
  --gradient-text:    linear-gradient(135deg, var(--petal-pink), var(--rose-gold));
  --gradient-soft:    linear-gradient(135deg, var(--blush-white), rgb(var(--pink-rgb) / 0.16));

  /* ---------- Semantic surfaces & text ----------
     The theme seam. A future dark theme would be one
     :root[data-theme="dark"] block overriding only these — no
     component changes. See the "no dark mode" note in docs/landing.md
     before adding one: the iOS app is light-mode only by design. */
  --surface-page:    var(--blush-white);
  --surface-card:    var(--white);
  --surface-sunk:    rgb(var(--pink-rgb) / 0.06);
  --surface-inverse: var(--deep-plum);

  --text-primary:       var(--deep-plum);
  --text-secondary:     var(--warm-gray);
  --text-body:          #4A3550;
  --text-inverse:       var(--blush-white);
  --text-inverse-muted: rgb(var(--blush-rgb) / 0.62);
  --text-inverse-faint: rgb(var(--blush-rgb) / 0.32);

  --border-subtle:  rgb(var(--pink-rgb) / 0.18);
  --border-strong:  rgb(var(--pink-rgb) / 0.34);
  --border-inverse: rgb(var(--blush-rgb) / 0.10);

  --focus-ring: 0 0 0 3px rgb(var(--rose-rgb) / 0.55);

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --space-section:  clamp(64px, 8vw, 112px);
  --container-max:  1140px;
  --container-pad:  clamp(20px, 4vw, 32px);

  /* ---------- Type scale ---------- */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   1.0625rem;
  --text-xl:   clamp(1.15rem, 1.4vw, 1.35rem);
  --text-2xl:  clamp(1.45rem, 2.2vw, 1.85rem);
  --text-3xl:  clamp(1.75rem, 3.5vw, 2.625rem);
  --text-4xl:  clamp(2.4rem, 4.5vw, 3.75rem);

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

  --tracking-display: -0.015em;
  --tracking-caps:     0.09em;

  /* ---------- Z-index ---------- */
  --z-base:    0;
  --z-raised:  1;
  --z-sticky:  10;
  --z-nav:     100;
  --z-menu:    110;
  --z-overlay: 200;

  /* ---------- Radii ---------- */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   40px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 2px 8px   rgb(var(--plum-rgb) / 0.08);
  --shadow-md: 0 8px 32px  rgb(var(--plum-rgb) / 0.12);
  --shadow-lg: 0 24px 64px rgb(var(--plum-rgb) / 0.18);

  /* ---------- Chrome ---------- */
  --nav-height: 68px;

  /* ---------- Motion ---------- */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}