/* ==========================================================================
   RareFinds theme — BASE TOKENS (same for every shop)
   Directions (assets/css/directions/*.css) only override these variables
   plus a few scoped "flourishes". The owner's brand colour arrives as
   --brand / --on-brand / --brand-ink-light / --brand-ink-dark (set by
   assets/js/boot.js, in WordPress by the theme from the shop settings).
   ========================================================================== */

:root {
  /* ---- Brand (fallback; boot.js overwrites per shop) ---- */
  --brand: #2f5d50;
  --on-brand: #ffffff;
  --brand-ink-light: #2f5d50;
  --brand-ink-dark: #8fc9b6;
  --brand-ink: var(--brand-ink-light);
  --brand-soft: color-mix(in oklab, var(--brand) 10%, var(--color-bg));
  --brand-line: color-mix(in oklab, var(--brand) 35%, var(--color-border));

  /* ---- Neutral palette (directions override per mode) ---- */
  --color-bg: #f7f7f5;
  --color-surface: #ffffff;
  --color-surface-2: #efefeb;
  --color-text: #18181b;
  --color-muted: #5f6068;
  --color-border: #deded8;
  --color-mat: #ecebe6;          /* background behind card images */
  --color-overlay: rgb(10 10 12 / .55);

  /* ---- Status (never red for "Slut": sold is a normal state) ---- */
  --color-stock: #1e7a46;        /* "1 kvar" dot + text */
  --color-sold: var(--color-muted);
  --color-sold-bg: var(--color-surface-2);
  --color-notice: #8a5a00;       /* low stock on sealed, info */
  --color-error: #b42318;        /* only real errors: form validation */
  --color-focus: #2563eb;

  /* ---- Type ---- */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
  --font-num: var(--font-body);   /* card numbers & prices, tabular */
  --display-weight: 600;
  --display-tracking: -0.015em;
  --display-case: none;
  --display-leading: 1.05;
  --label-case: uppercase;
  --label-tracking: .08em;
  --label-weight: 600;
  --body-leading: 1.55;

  --fs-2xs: .6875rem;  /* 11 */
  --fs-xs: .75rem;     /* 12 */
  --fs-s: .875rem;     /* 14 */
  --fs-m: 1rem;        /* 16 */
  --fs-l: 1.125rem;    /* 18 */
  --fs-xl: clamp(1.25rem, 1.12rem + .55vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.45rem + 2.6vw, 3.5rem);
  --fs-4xl: clamp(2.5rem, 1.6rem + 4.4vw, 5.25rem);

  /* ---- Space (4 px grid) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1320px;
  --section-gap: clamp(48px, 7vw, 96px);
  --tap: 44px;                    /* minimum touch target */

  /* ---- Shape ---- */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-pill: 999px;
  --radius-btn: var(--radius-m);
  --border-w: 1px;

  /* ---- Product card switches ---- */
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--radius-l);
  --card-pad: var(--space-3);
  --card-shadow: none;
  --card-shadow-hover: 0 8px 24px rgb(0 0 0 / .08);
  --media-ratio: 4 / 5;           /* frame fits card 63×88, slab and box */
  --media-pad: 9%;
  --media-bg: var(--color-mat);
  --media-radius: var(--radius-m);
  --grid-min: 168px;              /* product grid column min width */

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .06), 0 1px 1px rgb(0 0 0 / .04);
  --shadow-2: 0 10px 30px rgb(0 0 0 / .12);
  --shadow-art: 0 10px 22px rgb(0 0 0 / .18), 0 2px 4px rgb(0 0 0 / .12);

  /* ---- Motion ---- */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 520ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-flip: cubic-bezier(.45, .05, .2, 1);

  /* ---- Layers ---- */
  --z-header: 30;
  --z-buybar: 40;
  --z-toast: 60;

  color-scheme: light;
}

:root[data-mode="dark"] {
  --brand-ink: var(--brand-ink-dark);
  --color-stock: #4ade80;
  --color-notice: #f5b84b;
  --color-error: #f97066;
  --color-focus: #7fb0ff;
  --color-overlay: rgb(0 0 0 / .65);
  --card-shadow-hover: 0 10px 30px rgb(0 0 0 / .45);
  --shadow-2: 0 14px 40px rgb(0 0 0 / .5);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}