/* ========================================================================== Swipe — design tokens (single source of truth) See docs/swipe/design-system.md. Loaded FIRST (head.php, before black.css) so every sheet — black.css, header_new.css, magazini_new.css, future pages — can consume var(--sw-*). NAMESPACE NOTE: header_new.css owns a few :root --sw-* names for the dark header (--sw-surface:#0c0c0c, --sw-teal:#2bccbb, --sw-radius:8px). We do NOT redefine those here (last-loaded would win and shift the header). We only reuse names whose VALUE is identical (--sw-purple). Everything else uses a distinct name. Teal is split by context per the design system: --sw-teal-bright = teal on DARK surfaces + decorative on light --sw-teal-ink = teal for TEXT / links / teal buttons on light --sw-teal-deep = the darker teal, for when contrast actually has to hold ========================================================================== */ :root { /* ---- Brand ---- */ --sw-purple: #7735d5; /* primary brand · primary buttons · active state */ --sw-purple-d: #650ce4; /* primary hover */ --sw-teal-bright: #00dfcd; /* teal on DARK surfaces only (header/footer) + decorative on light */ --sw-teal-ink: #2bbbbc; /* THE teal — text, links, and teal buttons (white label) on light. Owner decision 2026-07-31: this is the brand teal and it stays. Known trade-off, recorded so nobody "fixes" it by accident: white-on-#2bbbbc is 2.35:1 and #2bbbbc-on-white is 2.35:1, both below WCAG AA. A darker teal (#0f7f7c) was trialled and rejected as too far from the logo. If accessibility is ever raised, the options are: darken to --sw-teal-deep, or keep bright teal with a DARK label (#00dfcd + ink = 10.3:1). Do not silently swap. */ --sw-teal: #2bbbbc; /* same value — kept as an alias for non-text accents */ --sw-teal-deep: #0f7f7c; /* the ONLY teal that carries white text at AA (4.83:1). Use where contrast actually matters — dense UI, small labels on teal fills. Already in product_new.css as a white-label button. */ --sw-grad: linear-gradient(120deg, #7735d5, #00dfcd); /* signature accent (headline word, rules) */ /* Header CTA gradients. The stops (#9b5ff0 #8a4de3 #6525c0) are a deliberate purple RAMP, not stray duplicates of --sw-purple — do not collapse them or the gradient goes flat. Tokenised because each was written out twice in header_new.css (296/368, 307/377). */ --sw-grad-cta: linear-gradient(135deg, #8a4de3 0%, #7735d5 50%, #6525c0 100%); --sw-grad-cta-h: linear-gradient(135deg, #9b5ff0 0%, #8a4de3 50%, #7735d5 100%); --sw-price: #fb7b24; /* product price · discount */ /* ---- Semantic accents (were hardcoded across sheets) ---- */ --sw-success: #15803d; /* in-stock / open now / savings. WAS #0a9b8a — which is HUE 173, i.e. teal, not green. It only looked green next to purple, and it blurred with --sw-teal-ink because they were the same colour doing two jobs. Now hue 142 — 36 deg clear of teal. White on it 5.02:1. NOTE: success no longer speaks for buy or sell. Those are: teal = BUY (customer buys from us) purple = SELL (customer sells to us) per templates/index/index_new.php:89. Green is stock state only. */ --sw-success-d: #116a33; /* success hover — white on it 6.70:1 */ --sw-warn: #d97706; /* repair/attention orange */ --sw-warn-d: #b45309; /* warn hover */ --sw-surface-dark: #0c0c0c;/* dark bands (CTA/stats/header) — one near-black */ /* ---- Soft tint fills (icon chips / badges) ---- Each tint is paired with ONE text colour. Measured on the CURRENT tokens: --sw-tint-purple + --sw-purple 5.37:1 PASS AA --sw-tint-green + --sw-success 4.59:1 PASS AA --sw-tint-teal + --sw-teal-ink 2.15:1 BELOW AA — accepted trade-off, see the --sw-teal-ink note above. Use --sw-teal-deep (4.57:1) where the label must be legible. --sw-tint-orange + --sw-warn */ --sw-tint-purple: #f0e6ff; --sw-tint-teal: #e7fdfc; --sw-tint-green: #defce9; --sw-tint-orange: #fff3e6; /* ---- Brand-colored shadows (primary button glow) ---- */ --sw-sh-purple: 0 4px 16px rgba(119,53,213,.25); --sw-sh-purple-lg: 0 8px 24px rgba(119,53,213,.35); /* ---- Neutrals ---- */ /* ONE neutral ramp: Tailwind GRAY (blue-tinted). Do not mix in zinc (#71717a #a1a1aa #3f3f46) — it is cooler and the two never quite agree. Hand-typed neutrals (#333 #666 #888) are also out: they are pure grey and drift away from this ramp. Always reach for a token. */ --sw-ink: #1a1a1a; /* headlines, primary text */ --sw-ink-2: #374151; /* mid-dark — the step that was MISSING between ink and grey, which is why #333/#444/#3f3f46 kept getting typed by hand */ --sw-grey: #6b7280; /* sub-copy, secondary text */ --sw-muted: #9ca3af; /* labels, captions */ --sw-line: #eaeaea; /* card borders / hairlines */ --sw-line-2: #d4d4d8; /* pill / control borders */ --sw-line-lav: #d7d2e8; /* lavender-cast border — deliberate, used on purple-adjacent surfaces (prodai, remonti2, home). Named so it stops re-appearing as #e7e3ef / #ececf2 / #b9b4c7. */ --sw-bg: #ffffff; /* page background, cards */ --sw-bg-soft: #f5f5f7; /* tinted section background (hero, card grids) */ --sw-footer: #000000; /* footer surface */ /* ---- Radius scale ---- */ --sw-r-sm: 8px; /* inputs, small chips */ --sw-r-btn: 10px; /* buttons */ --sw-r-card: 16px; /* cards */ --sw-r-pill: 100px; /* pills, badges */ /* ---- Shadow scale ---- */ --sw-sh-sm: 0 5px 10px rgba(0,0,0,.10); /* resting */ --sw-sh-lg: 0 16px 48px rgba(0,0,0,.10); /* elevated / hover */ /* ---- Type ---- */ --sw-font: 'Montserrat', sans-serif; --sw-font-num: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* money figures & stats — the "deal" voice; load 600 via per-page */ /* ---- Type scale ---- There was no type scale, which is exactly why the sheets accumulated 57 distinct sizes — a sane ramp plus ~40 one-off nudges around it (14.5px next to 14px, 15.2px next to 15px, 16.32px next to 16px). Nobody can see half a pixel in body copy; it was all noise. UNIT IS px. The codebase is 395 px vs 151 rem, so px is the existing convention and matching it changes the fewest declarations. NOTE: px does not scale with the reader's browser font-size setting. If accessibility is ever prioritised the correct move is converting EVERYTHING to rem — not adding rem values next to these. Steps are named for their job, and sized from actual usage counts in the redesigned sheets. DO NOT invent values between steps — that is the exact habit this scale exists to stop. Hero type keeps its clamp() and is deliberately outside the ramp. */ --sw-fs-micro: 10px; /* legal text, tiny captions (12 uses) */ --sw-fs-tiny: 11px; /* badges, chips (29 uses) */ --sw-fs-xs: 12px; /* labels, meta, eyebrow (50 uses) */ --sw-fs-sm: 13px; /* dense UI, secondary text MOST USED (69 uses) */ --sw-fs-md: 14px; /* buttons, standard UI (62 uses) */ --sw-fs-base: 15px; /* body copy (67 uses) */ --sw-fs-lg: 16px; /* emphasised body (28 uses) */ --sw-fs-xl: 18px; /* small headings (16 uses) */ --sw-fs-2xl: 20px; /* card titles (11 uses) */ --sw-fs-3xl: 24px; /* section subheads (8 uses) */ --sw-fs-4xl: 32px; /* page headings (3 uses) */ --sw-fs-5xl: 40px; /* display (1 use) */ }