/* ==========================================================================
   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 ------------------------------------------------------------ */
  /* SimOptions brand purple (owner, 2026-08-13). Drives h1–h5, the hero/footer
     band backing, struck prices and the outline button. NOT body text — that is
     `--color-text` below, which stays petrol navy for legibility. */
  --color-primary:        #8357f9;
  --color-secondary:      #5195ff;
  --color-primary-alt:    #5479ff;
  --color-secondary-alt:  #51c5ff;
  /* Buttons, links and toggles. These were International SIM's action teal
     (#0c7b91 / #0a6e81) and its accent (#009bcd), inherited with the duplicate
     — 53 rules reference --color-action, which is why teal links kept turning
     up across the storefront long after the rebrand. They are the SimOptions
     purple now, matching the supplied designs, which use #8357F9 → #5195FF
     throughout. Fixed HERE rather than rule by rule: one token, every use. */
  --color-action:         var(--color-primary);
  --color-action-hover:   #734ddb;  /* --color-primary darkened ~12% */
  --color-accent:         var(--color-secondary);  /* .section-title em highlight */

  /* Headings are BLACK, never the brand colour. Every h1-h5 used to resolve to
     --color-primary; that was fine while primary was the old petrol navy, but
     the SimOptions repoint made primary purple and turned every heading on the
     site purple with it. Purple is a HIGHLIGHT — links, glyphs, accents — not
     the colour of text. This is the design's own heading black. */
  --color-heading:        var(--ink-800);

  /* --- 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:        var(--color-surface);  /* 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.

     The band was navy -> teal, again International SIM's. The designs band is
     the brand gradient, purple -> blue. */
  --band-grad-start:      var(--color-primary);
  --band-grad-end:        var(--color-secondary);

  /* --- Type FAMILIES (branding) -------------------------------------------
     Poppins carries the whole theme — body AND headings (owner, 2026-08-13).
     Bouygues Read / Speak are Bouygues Telecom's fonts, licensed to
     International SIM and NOT to SimOptions: they remain declared in fonts.css
     for Bouygues Telecom-branded documents, and must never be named here. */
  --font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Poppins", var(--font-body);
  --font-mono:    "Menlo", ui-monospace, SFMono-Regular, monospace;

  /* Weights belong WITH the family, not with the structural scale: which
     numerals exist is a property of the typeface a site ships. Poppins carries
     300/400/500/600 here (see fonts.css) and stops at 600 — a `<b>` would
     otherwise be synthesised into a faux bold, so `--weight-bold` maps onto the
     real SemiBold rather than 700. A site with a different family sets its own. */
  --weight-light:  300;
  --weight-body:   400;
  --weight-medium: 500;
  --weight-bold:   600;

  /* The type SCALE, the weight scale and the line-height scale are STRUCTURE,
     not branding, and now live once in `src/styles/foundation/scale.css` —
     shared by the storefront, the partner pages, the admin and the affiliate
     portal. They were here, in px-at-a-stepping-root, and the storefront could
     therefore never use rem for structure. Do not restate them. */

  /* ---- ink ------------------------------------------------------------
     Text opacities over a light ground. The design used 27 different black
     alphas; these are the seven they cluster into. Shadow and border alphas
     are NOT part of this scale and stay where they are written. */
  --ink-900: rgba(0, 0, 0, .88);
  --ink-800: rgba(0, 0, 0, .80);  /* headings — see --color-heading */
  --ink-700: rgba(0, 0, 0, .72);
  --ink-600: rgba(0, 0, 0, .60);
  --ink-500: rgba(0, 0, 0, .50);
  --ink-400: rgba(0, 0, 0, .40);
  --ink-300: rgba(0, 0, 0, .32);

  /* ---- purple tints + lines -------------------------------------------
     The four lilac fills and four greys the design reuses everywhere. */
  --tint-1: var(--so-tint);   /* section backgrounds */
  --tint-2: #f4f0fe;  /* chips, table headers, active cards */
  --tint-3: var(--so-chip);  /* avatars, icon discs */
  --tint-4: #ede7fb;  /* image placeholders */
  --line-card:   var(--color-border);  /* card borders */
  --line-tinted: var(--so-border-soft);  /* card borders on a tint */
  --line-hair:   #f0f0f0;  /* table rows, dividers */
  --line-field:  #e5e0f0;  /* input + control borders */
  --color-primary-deep: var(--so-purple-hover);  /* pressed / darker purple */
  /* The star gold already had a name; this is an alias, not a second source. */
  --color-star: var(--so-star);

  /* ---- radii ----------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   14px;
  --r-xl:   var(--so-radius-md);
  --r-2xl:  20px;
  --r-3xl:  25px;
  --r-pill: var(--radius-pill);

  /* Container widths are STRUCTURE — `src/styles/foundation/scale.css`. */

  /* --- Shape ---------------------------------------------------------------- */
  /* Theme-level radius. Two values on purpose (owner, 2026-08-14): controls and
     containers should NOT share a corner. Buttons and form inputs keep the full
     2.5rem pill; the white containers behind them sit ~20% tighter at 2rem, so
     the card reads as a surface rather than competing with the controls on it.
     Change them HERE, never per rule. */
  --radius-btn:   2.5rem;
  /* Form controls are HALF the button radius (owner, 2026-09-18): the same
     2.5rem on a 3em-tall input drew a lozenge, and a field is not a button.
     Inputs, textareas and selects only — buttons keep --radius-btn. */
  --radius-input: 1.25rem;
  --radius-card:  2rem;
  --radius-pill:  999px;

  /* THE brand gradient — every button background, and the Coming Soon page.
     Left → right, purple into blue, matching the live site's buttons. */
  --brand-gradient: linear-gradient(90deg, #8359f9 0%, #52c3ff 100%);

  /* The spacing scale is STRUCTURE — `src/styles/foundation/scale.css`. It was
     px here, so it could not scale with the root, which is why the mobile block
     at the foot of this file had to tighten --space-6/7/8 by hand. That
     tightening is preserved in the foundation as a continuous ramp. */

  --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;
}

/* The mobile type/spacing step-down that lived here is GONE — not dropped, but
   folded into the fluid ramps in `src/styles/foundation/scale.css`.
   It set --text-h1/h2/h3/lg/2xl/xl and --space-6/7/8 to smaller values below
   768px. Its min values are now the small end of each clamp() and the design
   values are the large end, so the same design is reached at both extremes and
   interpolated between them instead of jumping at one breakpoint. */

/* ==========================================================================
   SimOptions storefront design set (2026-08-18)

   Measured from the reference theme (.local/simoptions.com). This is the rule
   for new storefront work: SimOptions is its own product, not International
   SIM, and where these values disagree with the older tokens above, THESE win.

   The older tokens are still live because pages built before this set consume
   them. Repoint each page to the tokens below as it is rebuilt, then delete the
   value it left behind. Do not add a third set.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------- */
  --so-purple:        var(--color-primary);
  --so-purple-hover:  #6c3be8;
  --so-purple-deep:   #5b34c9;
  --so-blue:          var(--color-secondary);

  /* Hero/footer band runs left→right; buttons and pills run on the diagonal.
     Two gradients, not one — the angle is the difference, keep them apart. */
  --so-grad-band:     linear-gradient(90deg, #8357f9 0%, #5195ff 100%);
  --so-grad-btn:      linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);

  /* --- Ink ---------------------------------------------------------------
     The design writes body copy as alpha-black over white rather than as named
     greys, so text sits on whatever surface it lands on. Keep using these
     rather than inventing opaque equivalents. */
  --so-ink:           #211a46;  /* body default */
  --so-ink-strong:    rgba(0, 0, 0, 0.8);   /* headings */
  --so-ink-body:      rgba(0, 0, 0, 0.7);
  --so-ink-muted:     rgba(0, 0, 0, 0.6);
  --so-ink-meta:      rgba(0, 0, 0, 0.45);
  --so-ink-faint:     rgba(0, 0, 0, 0.35);  /* icon strokes, placeholders */
  --so-ink-alt:       #3a3556;  /* opaque body, used in review/lead copy */
  --so-meta:          #8a86a3;
  --so-muted:         #6b6785;

  /* --- Surfaces / tints --------------------------------------------------- */
  --so-surface:       var(--color-surface);
  --so-tint:          #f8f6fe;  /* section backing */
  /* Stripe's Embedded Checkout paints its own frame this colour — the Stripe
     account's branding, set in the Stripe dashboard, one account for every
     storefront. Our container around the iframe must match it or the padding
     reads as a second box. Not derivable from our palette: sampled from the
     rendered embed (#f8f5ff, main and Bouygues alike). Keep in step by hand if
     the Stripe branding changes. */
  --stripe-embed-bg:  #f8f5ff;
  --so-tint-2:        #f4f2fa;  /* inactive control chips */
  --so-chip:          #f1ecfe;  /* icon plates, country chips, ghost numerals */
  --so-avatar:        #ede6fe;
  --so-hairline:      #f0edf8;
  --so-border:        #edeaf6;  /* card borders */
  --so-border-soft:   #efeafb;

  /* --- Status ------------------------------------------------------------- */
  --so-star:          #ffb800;
  --so-strike:        #ff2121;  /* struck "was" price */

  /* --- Shape -------------------------------------------------------------- */
  /* Radius climbs with the size of the thing: control → card → panel. Pills
     are always half the height, so they take a literal, not a token. */
  --so-radius-sm:     9px;
  --so-radius-md:     18px;
  --so-radius-lg:     26px;
  --so-radius-xl:     32px;
  --so-radius-panel:  44px;

  /* --- Elevation ---------------------------------------------------------- */
  /* Shadows are purple-tinted, never neutral black — they read as the brand
     light rather than as grime. */
  --so-shadow-card:   0 10px 26px rgba(70, 50, 140, 0.05);
  --so-shadow-deal:   10px 10px 17px 0 rgba(0, 0, 0, 0.06);
  --so-shadow-phone:  0 16px 44px rgba(70, 50, 140, 0.13);
  --so-shadow-device: 0 26px 60px rgba(70, 50, 140, 0.24);
  --so-shadow-search: 0 24px 60px rgba(94, 58, 190, 0.18);
  --so-shadow-tile:   0 12px 20px 0 rgba(0, 0, 0, 0.05);

  /* --- Layout ------------------------------------------------------------- */
  /* Section width is chosen per band, widest first: full-bleed grids take xl,
     text-led bands take lg so the measure stays readable. */
  --so-w-sm:          1040px;
  --so-w-md:          1080px;
  --so-w-lg:          1140px;
  --so-w-xl:          1240px;
  --so-gutter:        24px;
}