/*
 * Sol Beauty – prototype design tokens (source: docs/design-direction.md §3).
 * This is a replaceable PROTOTYPE system: when the client's brand colours, logo
 * and fonts arrive, they are swapped here. Components use these properties only.
 */
:root {
  /* Sol Beauty brand palette (from the client logo). Primitives — map these to
     semantic roles below; components never reference primitives directly. */
  --color-brand-cream: #E3D6C2;
  --color-brand-taupe: #716658;
  --color-brand-brown: #3A2317;

  /* 3.1 Colour (semantic roles mapped to the Sol Beauty brand palette) */
  --color-ink: var(--color-brand-brown);       /* primary text, headings, wordmark */
  --color-ink-hover: #2A180F;                   /* CTA hover — darker brown */
  --color-ink-muted: var(--color-brand-taupe);  /* secondary text */
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-sand: var(--color-brand-cream); /* soft sections / subtle surfaces */
  --color-surface-peach: #FFFFFF;
  --color-surface-dark: var(--color-brand-brown); /* promo band + dark sections */
  --color-surface-dark-raised: #3A2D26;
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #D8CCBB;               /* muted text on brown (cream tint) */
  --color-accent: var(--color-brand-brown);     /* strong promo emphasis: sale/cart badge, sale price */
  --color-accent-hover: #2A180F;
  --color-sun: var(--color-brand-cream);        /* accent on dark surfaces (was gold) */
  --color-border: #E6E6E6;
  --color-border-strong: var(--color-brand-taupe); /* interactive/control borders */
  --color-success: #2F6B45;
  --color-error: #B3261E;
  --color-warning: #8A5A00;
  --color-focus: #2B211C;
  --color-focus-on-dark: var(--color-brand-cream); /* focus ring on brown (was gold) */
  --color-scrim: rgba(43, 33, 28, 0.48);
  /* Derived helper values named in §3.6 (demo label) and C7 (sold-out veil) */
  --color-demo-label-bg: rgba(255, 255, 255, 0.88);
  --color-soldout-veil: rgba(255, 255, 255, 0.4);

  /* 3.2 Typography */
  --font-display: 'Fraunces', Georgia, "Times New Roman", serif;
  --font-body: 'Figtree', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display-variation: "SOFT" 0, "WONK" 0;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --text-display: clamp(2.5rem, 2rem + 2.2222vw, 4rem);
  --text-h2: clamp(1.875rem, 1.6667rem + 0.9259vw, 2.5rem);
  --text-h3: clamp(1.375rem, 1.2917rem + 0.3704vw, 1.625rem);
  --text-body-lg: clamp(1.125rem, 1.1042rem + 0.0926vw, 1.1875rem);
  --text-body: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
  --text-title: var(--text-body);
  --text-small: 0.875rem;
  --text-eyebrow: 0.8125rem;
  --text-label-xs: 0.75rem; /* 12 px: cart-count badge, logo pill, demo label (§3.6, C2, C3) */
  --text-quote-mark: 3rem;   /* 48 px decorative quote mark (C11) */

  --leading-display: 1.05;
  --leading-h2: 1.15;
  --leading-h3: 1.25;
  --leading-title: 1.35;
  --leading-body-lg: 1.55;
  --leading-body: 1.6;
  --leading-small: 1.45;
  --leading-eyebrow: 1.3;
  --leading-tight: 1.2;

  --tracking-display: -0.015em;
  --tracking-h2: -0.01em;
  --tracking-small: 0.005em;
  --tracking-eyebrow: 0.12em;
  --tracking-promo: 0.02em;
  --tracking-button: 0.01em;
  --tracking-wordmark: 0.01em;

  --text-wordmark: 1.375rem; /* 22 px <1080, 26 px ≥1080 (C3) */

  --measure-body: 64ch;
  --measure-intro: 56ch;
  --measure-hero: 44ch;

  /* 3.3 Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-pad-y: clamp(4rem, 3rem + 4.4444vw, 7rem);
  --section-head-gap: var(--space-6);
  --gutter: 1.25rem;

  /* 3.4 Radii, borders, shadows */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 999px;
  /*
   * Arch crop: half-circle top, --radius-md bottom. The literal value
   * "999px 999px 12px 12px" makes browsers scale ALL corners down proportionally
   * (the bottom corners end up ~2 px), so the same shape is expressed with
   * elliptical radii that are exact for the 4:5 ratio used by both arch images.
   */
  --radius-arch: 50% 50% var(--radius-md) var(--radius-md) / 40% 40% var(--radius-md) var(--radius-md);
  --border-width-hair: 1px;
  --border-width-control: 1.5px;
  --border-width-error: 2px;
  --border-hair: var(--border-width-hair) solid var(--color-border);
  --border-control: var(--border-width-control) solid var(--color-border-strong);
  --shadow-1: 0 1px 2px rgba(43, 33, 28, 0.06), 0 4px 12px rgba(43, 33, 28, 0.06);
  --shadow-2: 0 16px 48px rgba(43, 33, 28, 0.18);

  /* 3.5 Layout */
  --container-max: 1320px;
  --container-narrow: 720px;
  --grid-cols: 4;
  --grid-gap: 1rem;
  /* Breakpoints (mobile-first, min-width). CSS media queries cannot read custom
     properties, so the stylesheets repeat these literals; JS reads them from here. */
  --bp-sm: 600px;
  --bp-md: 900px;
  --bp-lg: 1080px;
  --bp-xl: 1320px;

  /* 3.7 Motion */
  --dur-instant: 120ms;
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-drawer-in: 320ms;
  --dur-drawer-out: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --promo-interval: 6000ms;

  /* 3.8 Layering */
  --z-marker: 80;
  --z-whatsapp: 90;
  --z-header: 100;
  --z-mega: 110;
  --z-scrim: 200;
  --z-drawer: 210;
  --z-skip: 300;

  /* Component dimensions (from §4 / §5 component specs) */
  --size-target: 44px;
  --size-control: 48px;
  --size-search-field: 56px;
  --size-whatsapp: 56px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 22px;
  --size-icon-xl: 24px;
  --size-icon-empty: 48px;
  --size-thumb-chip: 32px;
  --size-thumb-search: 56px;
  --size-thumb-cart: 72px;
  --size-thumb-guide: 96px;
  --size-badge-min: 18px;
  --size-dot: 8px;
  --size-dot-sm: 6px;
  --size-review-min: 280px;
  --size-drawer-header: 64px;
  --size-nav-row: 52px;
  --promo-h: 44px;
  --header-h: 60px;
  --drawer-w: min(100vw, 440px);
  --nav-drawer-w: min(88vw, 400px);
  --search-max-h: 80vh;
  --hero-min-h: min(760px, 85vh);
  --rail-fade: 24px;
  --rail-visible: 1.25;
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --inset-marker: 16px;
  --inset-whatsapp: 16px;
  --footer-safe-pad: 96px;
}

@media (min-width: 600px) {
  :root {
    --gutter: 2rem;
    --grid-cols: 8;
    --grid-gap: 1.25rem;
    --rail-visible: 2.3;
  }
}

@media (min-width: 900px) {
  :root {
    --section-head-gap: var(--space-7);
    --rail-visible: 3;
    --inset-whatsapp: 24px;
  }
}

@media (min-width: 1080px) {
  :root {
    --gutter: 3rem;
    --grid-cols: 12;
    --grid-gap: 1.5rem;
    --header-h: 72px;
    --text-wordmark: 1.625rem;
  }
}

@media (min-width: 1320px) {
  :root {
    --rail-visible: 4;
  }
}