/* ==========================================================================
   Design tokens — single source of truth.
   Values verified against the live theme's shipped CSS (simops.upside
   styles/main.css + styles.css + header.php :root) and pixel-sampled from
   the reference screenshots. No hardcoded colors/fonts anywhere else.

   Breakpoints (CSS custom properties can't drive @media; these are the
   literals of record): 576 / 768 / 1025 (dominant desktop) / 1200 / 1510.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --color-primary:        #25465f;  /* petrol navy: headings, body text, active pills */
  --color-secondary:      #5195ff;
  --color-primary-alt:    #5479ff;
  --color-secondary-alt:  #51c5ff;
  --color-action:         #0c7b91;  /* flat teal: buttons, links, toggles */
  --color-action-hover:   #0a6e81;
  --color-accent:         #009bcd;  /* .section-title em highlight */

  /* --- Status ------------------------------------------------------------ */
  --color-sale:           #32b532;  /* green sale price */
  --color-danger:         #e00043;
  --color-warning:        #fa9004;
  --color-bestseller:     #ea5b0f;

  /* --- Text / surfaces ---------------------------------------------------- */
  --color-text:           #25465f;
  --color-text-soft:      rgba(37, 70, 95, 0.75);
  --color-bg:             #f9f9f9;
  --color-bg-alt:         #f3f4f6;
  --color-surface:        #ffffff;
  --color-border:         #ededed;
  --color-border-input:   #d8d8d8;
  --color-on-band:        #ffffff;  /* text on gradient band */

  /* --- Gradient band (hero + footer) --------------------------------------
     Recipe (from theme main.css): noise texture + organic blob pattern SVG
     over a vertical gradient, plus a 6%-opacity primary overlay.
     Applied by .band-gradient in base.css. */
  --band-grad-start:      #1b3650;
  --band-grad-end:        #109db9;

  /* --- Type ---------------------------------------------------------------
     1rem = 16px (no root scaling). Screenshot measurements ÷ 2. */
  --font-body:    "Bouygues Read", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Bouygues Speak", var(--font-body);
  --font-mono:    "Menlo", ui-monospace, SFMono-Regular, monospace;

  --text-xs:      0.75rem;    /* 12px — meta, breadcrumbs */
  --text-body:    1rem;       /* 16px — body copy (matches the card text size) */
  --text-btn:     0.9375rem;  /* 15px — buttons (weight 600) */
  --text-lg:      1.125rem;   /* 18px — leads, card titles */
  --text-h3:      1.375rem;   /* 22px */
  --text-h2:      2rem;       /* 32px — section titles */
  --text-h1:      2.1875rem;  /* 35px — page hero heading (live theme: 3.5rem @ 62.5% root) */

  /* --- Layout -------------------------------------------------------------- */
  --container-sm:  536px;
  --container-md:  728px;
  --container-lg:  985px;
  --container-xl:  1170px;
  --container-xxl: 1480px;
  --container-pad: 16px;

  /* --- Shape / spacing ------------------------------------------------------ */
  --radius-btn:   4px;
  --radius-card:  8px;
  --radius-pill:  999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  --shadow-card: 0 2px 12px rgba(37, 70, 95, 0.08);
  --shadow-pop:  0 8px 30px rgba(37, 70, 95, 0.18);

  /* Header logo width — a token so a per-site theme (sites/<x>/css/tokens.css)
     can size its own lockup; the stuck (scrolled) state scales from it. */
  --header-logo-width: 132px;
}