/* SportSupplements.uk design tokens — transcribed from design_handoff_woocommerce_store/README.md
   plus additional colours found in the .dc.html markup. Source of truth for all styling. */

@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/barlow-v13-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/barlow-v13-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-v13-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-v13-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/barlow-condensed-v13-latin-700.woff2') format('woff2'); }

:root {
  /* Light palette (launch default) */
  --ss-page: #faf9f6;
  --ss-surface: #fff;
  --ss-panel: #f4f2ee;
  --ss-panel-hover: #ece9e2;
  --ss-border: #e8e5df;
  --ss-border-strong: #d9d5cd;
  --ss-divider: #f0ede7;          /* light row divider inside cards */
  --ss-text: #141414;
  --ss-body: #565149;
  --ss-muted: #8a857c;
  --ss-faint: #a8a399;
  --ss-accent: #d7261d;
  --ss-accent-hover: #b81d15;
  --ss-accent-soft: #ff6a60;

  /* Notice / warning / success */
  --ss-notice-bg: #fff8e6;  --ss-notice-border: #e8d9a8;  --ss-notice-text: #7a6320;
  --ss-warn-bg: #fff4f3;    --ss-warn-border: #f0c5c2;    --ss-warn-text: #a03530;
  --ss-ok-bg: #eaf5ea;      --ss-ok-border: #bcd9bc;      --ss-ok-text: #2e6b2e;
  --ss-paypal: #ffc439;     --ss-paypal-hover: #f0b62d;

  /* Dark-band UI (dark sections on light pages) */
  --ss-dark-page: #121110;  --ss-dark-surface: #171614;  --ss-dark-panel: #1b1917;
  --ss-dark-border: #26231f; --ss-dark-border-strong: #3a352f;
  --ss-dark-text: #f4f2ee;  --ss-dark-body: #b8b3aa;     --ss-dark-muted: #c9c4ba;
  --ss-dark-accent-hover: #ff3b30;

  /* Radii */
  --ss-r-btn: 8px;
  --ss-r-btn-lg: 10px;
  --ss-r-card: 14px;
  --ss-r-card-sm: 12px;
  --ss-r-panel: 18px;
  --ss-r-panel-sm: 16px;
  --ss-r-pill: 999px;

  /* Type */
  --ss-font: 'Barlow', system-ui, sans-serif;
  --ss-font-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --ss-fs-h1: clamp(44px, 5vw, 72px);       /* home hero */
  --ss-fs-h1-pdp: clamp(30px, 3.5vw, 42px);
  --ss-fs-h2: 34px;
  --ss-fs-h2-sm: 26px;
  --ss-fs-body: 15px;
  --ss-fs-body-sm: 14.5px;
  --ss-fs-meta: 12.5px;
  --ss-fs-meta-sm: 12px;
  --ss-fs-legal: 11.5px;

  /* Shadows */
  --ss-shadow-card-hover: 0 8px 24px rgba(0,0,0,.1);   /* markup value wins over README */
  --ss-shadow-cutout: drop-shadow(0 16px 20px rgba(0,0,0,.14));

  /* Layout */
  --ss-pad-x: 48px;
  --ss-max-w: 1440px;
}

/* Dark theme (not enabled at launch; parity with "Homepage Dark" direction) */
[data-theme="dark"] {
  --ss-page: var(--ss-dark-page);
  --ss-surface: var(--ss-dark-surface);
  --ss-panel: var(--ss-dark-panel);
  --ss-border: var(--ss-dark-border);
  --ss-border-strong: var(--ss-dark-border-strong);
  --ss-text: var(--ss-dark-text);
  --ss-body: var(--ss-dark-body);
  --ss-muted: var(--ss-dark-muted);
  --ss-accent-hover: var(--ss-dark-accent-hover);
}

/* Hatched placeholder treatment (fulfilment TBC, awaited assets) */
.ss-hatched {
  background: repeating-linear-gradient(45deg, #f4f2ee, #f4f2ee 8px, #efece6 8px, #efece6 16px);
  border: 1px dashed #c9c4ba;
}

@media (max-width: 900px) { :root { --ss-pad-x: 24px; } }
@media (max-width: 640px) { :root { --ss-pad-x: 16px; --ss-fs-h2: 26px; } }