/* Feonix SkinLab design tokens.
 *
 * Our own set, written from the Feonix brand spec. This replaces the 25 Horizon
 * tokens the old build consumed (DEFECTS R-004). Nothing here derives from that
 * theme - the palette and type are Feonix's, the scale is chosen for this shop.
 *
 * Both families are variable fonts, self-hosted, SIL Open Font Licence 1.1.
 * One file each covers every weight we use.
 */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/static/fonts/cormorant-garamond-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/static/fonts/montserrat-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── palette ─────────────────────────────────────────────────────────── */
  --sl-dark: #17121F;
  --sl-cream: #F7F3EF;
  --sl-rg-mid: #8B6842;
  --sl-rg-dark: #885030;
  --sl-rg-light: #F4BF9D;
  --sl-border: #DDD6CF;

  --sl-paper: #FFFFFF;          /* cards and product media sit above the cream */
  --sl-muted: #6B6472;          /* secondary copy - dark, lightened, still AA */

  /* ── type ────────────────────────────────────────────────────────────── */
  --sl-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sl-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid from 390px to 1440px, so nothing needs a breakpoint to be readable.
     Cormorant is optically small at a given px, so display sizes run large -
     the brief asked for it at real size. */
  --sl-step-hero: clamp(2.75rem, 1.6rem + 5.4vw, 5.5rem);
  --sl-step-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --sl-step-h2: clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);
  --sl-step-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  --sl-step-body: 1rem;
  --sl-step-sm: 0.875rem;
  --sl-step-xs: 0.78125rem;

  --sl-leading-display: 1.08;
  --sl-leading-body: 1.65;
  --sl-tracking-wide: 0.14em;    /* small caps labels, nav, buttons */

  /* ── space ───────────────────────────────────────────────────────────── */
  --sl-space-2xs: 0.25rem;
  --sl-space-xs: 0.5rem;
  --sl-space-sm: 0.75rem;
  --sl-space-md: 1.25rem;
  --sl-space-lg: 2rem;
  --sl-space-xl: 3.25rem;
  --sl-space-2xl: clamp(4rem, 2rem + 7vw, 8rem);   /* between page sections */

  --sl-measure: 68ch;            /* readable line length for policy pages */
  --sl-page-max: 1360px;
  --sl-gutter: clamp(1.5rem, 0.75rem + 3vw, 4rem);   /* 24px mobile -> 64px desktop */

  /* ── detail ──────────────────────────────────────────────────────────── */
  --sl-radius: 2px;              /* nearly square; the brand is not soft-cornered */
  --sl-rule: 1px solid var(--sl-border);
  --sl-rule-accent: 1px solid var(--sl-rg-mid);
  --sl-shadow-lift: 0 1px 2px rgb(23 18 31 / 0.04), 0 8px 24px rgb(23 18 31 / 0.06);
  --sl-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sl-dur: 180ms;
}

/* Restrained motion, and honoured properly. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}