/* ============================================================
   KOKA PEARLS — Design Tokens
   Modern minimal-luxe · pearl-forward · sapphire signature · platinum metallic
   ============================================================ */

:root {
  /* ---- Brand: Neutrals (pearl / champagne base) ---- */
  --pearl-000: #FFFFFF;
  --pearl-050: #FBF9F5;   /* page base — soft pearl ivory */
  --pearl-100: #F4F0E9;   /* card / section tint */
  --pearl-150: #ECE6DB;   /* champagne tint */
  --pearl-200: #E2DACB;   /* hairline / borders warm */
  --greige-300: #C9C2B4;
  --greige-400: #A89F8E;
  --greige-500: #7C7466;  /* muted text */

  /* ---- Brand: Ink (deep sapphire-black for text) ---- */
  --ink-900: #11162C;     /* primary text — near-black navy */
  --ink-700: #2A3050;
  --ink-500: #4A5070;

  /* ---- Signature jewel tone: Royal Sapphire ---- */
  --sapphire-900: #0C1438;
  --sapphire-800: #14224F;  /* hero velvet backdrop */
  --sapphire-700: #1B2A6B;  /* primary brand blue */
  --sapphire-600: #283A86;
  --sapphire-500: #3A4FA0;
  --sapphire-400: #6B79BE;
  --sapphire-300: #9FA9D2;
  --sapphire-200: #C5CCE6;  /* tint */
  --sapphire-050: #EDF0F8;

  /* ---- Metallic: Platinum / Silver (dominant) ---- */
  --platinum-50:  #F6F7F9;
  --platinum-100: #E7E9EE;
  --platinum-300: #C9CDD6;
  --platinum-500: #9AA0AD;
  --platinum-700: #6E7480;
  /* silver foil gradient */
  --silver-foil: linear-gradient(135deg, #EAECF1 0%, #C9CDD6 28%, #F4F5F8 50%, #AEB4C0 74%, #DCDEE4 100%);

  /* ---- Metallic: Champagne Gold (whisper accent only) ---- */
  --gold-400: #D9BE84;
  --gold-500: #C9A24B;
  --gold-600: #A9863A;
  --gold-foil: linear-gradient(135deg, #F1E2BC 0%, #C9A24B 42%, #E9D49B 60%, #A9863A 100%);

  /* ---- Semantic ---- */
  --success-600: #2F7D5B;
  --success-050: #E8F2EC;
  --danger-600:  #A23B3B;
  --danger-050:  #F6EBEB;
  --cod-600:     #1B5E4A;   /* cash-on-delivery green */
  --cod-050:     #E7F1ED;
  --info-600:    var(--sapphire-700);

  /* ---- Typography ---- */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* type scale (fluid where useful) */
  --fs-display: clamp(2.6rem, 1.6rem + 4.6vw, 5.5rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 1.3rem + 1.7vw, 2.6rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
  --fs-h4: 1.18rem;
  --fs-lead: 1.18rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-2xs: 0.69rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.7;

  --tracking-label: 0.22em;   /* tracked caps for luxe labels */
  --tracking-wide: 0.08em;

  /* ---- Spacing scale (8px base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---- Radius ---- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---- Elevation (soft, restrained) ---- */
  --sh-1: 0 1px 2px rgba(17,22,44,0.05), 0 1px 3px rgba(17,22,44,0.04);
  --sh-2: 0 4px 14px rgba(17,22,44,0.06), 0 2px 6px rgba(17,22,44,0.05);
  --sh-3: 0 12px 34px rgba(17,22,44,0.10), 0 4px 12px rgba(17,22,44,0.06);
  --sh-blue: 0 18px 48px rgba(20,34,79,0.22);

  /* ---- Layout ---- */
  --maxw: 1280px;
  --maxw-narrow: 880px;
  --gutter: clamp(20px, 5vw, 56px);
  --header-h: 116px;
  --header-h-scrolled: 74px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}