/* ===========================================================================
   Design tokens — derived from the Sky Pearl logo.
   Logo "pearl" wordmark sampled = #201B6F (deep royal indigo). Gold accent
   pulled to complement (premium cosmetics feel). Replace hex values here only
   if the logo is ever swapped — every component reads from these variables.
   =========================================================================== */
:root{
  /* derived from logo */
  --color-primary:#201B6F;
  --color-primary-hover:#181258;   /* ~10% darker */
  --color-accent:#C9A24B;          /* gold complement */
  --color-accent-hover:#a9842f;

  --color-bg:#ffffff;
  --color-surface:#ffffff;
  --color-surface-alt:#f7f5f3;     /* warm neutral, not pure gray */
  --color-surface-deep:#181258;    /* dark CTA band */
  --color-text:#1f1b18;
  --color-text-muted:#6b6460;
  --color-text-inverse:#ffffff;
  --color-border:#e7e2dd;
  --color-border-strong:#cfc7c0;

  /* semantic */
  --color-success:#2e7d4f;
  --color-warning:#b8860b;
  --color-danger:#c0392b;
  --color-sale:#d1453b;
  --color-sale-bg:color-mix(in srgb, var(--color-sale) 12%, transparent);
  --color-stock-low:var(--color-warning);
  --color-stock-out:var(--color-text-muted);

  /* type */
  --font-sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-display:"Playfair Display",Georgia,serif;
  --price-font:var(--font-sans);
  --text-xs:clamp(0.72rem,0.7rem + 0.1vw,0.78rem);
  --text-sm:clamp(0.86rem,0.84rem + 0.1vw,0.92rem);
  --text-base:clamp(1rem,0.98rem + 0.1vw,1.06rem);
  --text-lg:clamp(1.15rem,1.1rem + 0.3vw,1.3rem);
  --text-xl:clamp(1.35rem,1.25rem + 0.5vw,1.6rem);
  --text-2xl:clamp(1.7rem,1.5rem + 1vw,2.2rem);
  --text-3xl:clamp(2.1rem,1.8rem + 1.5vw,2.8rem);
  --text-5xl:clamp(2.8rem,2.2rem + 3vw,4.2rem);

  /* 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-24:96px;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 14px 40px rgba(24,18,88,.12);
  --duration-fast:150ms; --duration-slow:350ms;
  --ease:cubic-bezier(.4,0,.2,1);

  --wrap:1240px;
  --header-h:74px;
}