/* ============================================================================ dentistaarequipa27 · design tokens GENERATED — edit the generator, not this file. The dark payload below is emitted twice from a single source (see "dark mode" note) so the two dark entry points can never drift apart. Source of truth: Documentation/_reference/dentistaarequipa_drafts/ dentistaarequipa27/"Dentista Arequipa Design System"/ (readme.md + tokens/*.css) — the CANONICAL design system (operator decision D1). Where this file and the older dentista27 tokens disagree, this file follows the DS. ARCHITECTURE — how the DS's semantic aliases survive WordPress's flat palette --------------------------------------------------------------------------- WP palettes are a flat list of slugs; the DS is a two-layer system (private ramps -> public semantic aliases). The split is: · theme.json palette = the SEMANTIC layer only (surface-*, text-*, brand-ink, on-brand, border-*, ...). Slugs are semantic, values are the resolved light hex, so the editor renders true swatches and WP emits .has--color / .has--background-color utility classes. Raw ramp steps are deliberately NOT in the palette: exposing them would invite block markup to violate the DS's own governing rule. · tokens.css (this file) = the RAMPS (private) + a one-way re-export of each semantic alias under its DS name (--surface-card, --text-body, ...) so theme CSS authors in the design system's vocabulary rather than in WP's --wp--preset--color-- prefix. Dark mode overrides the WP PRESET custom properties, so theme.json-styled blocks, the editor utility classes and this theme's CSS all flip together from one place. DARK MODE — two entry points, both required --------------------------------------------------------------------------- The DS ships NO dark tokens; dark is DERIVED from the DS teal + ink families (operator decision D1). The mechanism keeps BOTH entry points: · @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) — a visitor whose OS is dark and who never touches the toggle still gets dark; the :not() lets an explicit "light" choice win. · :root[data-theme="dark"] — the header toggle wins in both directions. TYPOGRAPHY — Manrope ONLY (operator decision D1) --------------------------------------------------------------------------- The canonical DS uses Manrope for everything (--font-core), weights 500–800, with weight 500 as the BODY default — never 400 for body copy. The dentista27-era Manrope+Fira pairing is superseded; the fira-sans / heading / body font-family SLUGS survive in theme.json as aliases resolving to the Manrope stack so published dentista26-era markup keeps rendering. The single serif in the system is the testimonial opening quote (Georgia). ACCESSIBILITY DEVIATION — documented, deliberate --------------------------------------------------------------------------- The DS paints primary buttons #2a9188 with white labels — 3.8:1, an AA fail for normal-size text. Button FILL therefore uses the DS's own one-step- deeper teal #0d8078 (4.8:1 on white labels); #2a9188 remains the accent for icons, borders, underlines and LARGE teal text (display/H2 payoff phrases, where 3:1 applies and passes). Body-size teal text uses --accent-ink (#1a7a6f, 4.9:1). Do not "restore" #2a9188 as a button fill. ========================================================================== */ :root { color-scheme: light; /* ============================ COLOUR RAMPS (private — do not reference) == */ /* primary — the slate-blue INK family. --primary-700 (#1b3648) is the DS heading ink; 500 is literally the DS body colour; 900 the DS deep ink. */ --primary-50: #f0f5f8; --primary-100: #dfe9ee; --primary-200: #b9cdd8; --primary-300: #8fb0c1; --primary-400: #64879c; --primary-500: #46596b; /* DS --da-body */ --primary-600: #2e4a5e; --primary-700: #1b3648; /* DS --da-ink */ --primary-800: #142c3c; --primary-900: #0a2540; /* DS --da-ink-deep */ --primary-950: #061a2e; /* accent — the clinic teal. 500 is THE teal (#2a9188, primary action); 600/700 the DS deep + band teals; 50–200 the DS soft fills and pale. */ --accent-50: #f1f8f7; /* DS --da-teal-soft-2 */ --accent-100: #dbe9e8; /* DS --da-teal-line */ --accent-200: #a9ded6; /* DS --da-teal-pale */ --accent-300: #6fc4b8; --accent-400: #3aa89d; --accent-500: #2a9188; /* DS --da-teal */ --accent-600: #0d8078; /* DS --da-teal-deep */ --accent-700: #087471; /* DS --da-teal-band */ /* sand — promotional / warm surfaces only */ --sand-50: #fbf6ed; --sand-100: #f5e9d2; --sand-200: #ead2a4; --sand-300: #dcb56d; --sand-400: #c9973f; --sand-500: #a97a2b; /* gold — review stars ONLY (DS: "Gold appears only in review stars") */ --rating-star: #f9bd44; /* DS --da-gold */ /* neutral — the DS's cool grey-blues: surfaces, hairlines, muted text */ --neutral-0: #ffffff; --neutral-25: #fbfcfc; /* DS --da-surface */ --neutral-50: #f8fafb; /* DS --da-bg */ --neutral-100: #eef1f3; /* DS --da-line-2 */ --neutral-200: #e4ebef; /* DS --da-line */ --neutral-300: #cbd8de; /* DS --da-line-3 */ --neutral-400: #7b8b98; /* DS --da-muted-2 */ --neutral-500: #5c6a76; /* DS --da-muted */ --neutral-600: #4a5866; --neutral-700: #3a4754; --neutral-800: #232f39; --neutral-900: #141d24; /* status */ --success-500: #2f7d5c; --success-50: #eaf5ef; --warning-500: #c9873a; --warning-50: #fbf1e4; --danger-500: #b0453c; --danger-50: #fbeceb; --info-500: var(--primary-600); --info-50: var(--primary-50); /* ============================ SEMANTIC ALIASES (the public colour API) === */ --surface-page: var(--wp--preset--color--surface-page); --surface-subtle: var(--wp--preset--color--surface-subtle); --surface-card: var(--wp--preset--color--surface-card); --surface-raised: var(--wp--preset--color--surface-raised); --surface-inverse: var(--wp--preset--color--surface-inverse); --surface-brand: var(--wp--preset--color--surface-brand); --surface-brand-hover: var(--wp--preset--color--surface-brand-hover); --surface-accent: var(--wp--preset--color--surface-accent); --surface-promo: var(--wp--preset--color--surface-promo); --surface-control: var(--wp--preset--color--surface-control); --surface-control-disabled: var(--wp--preset--color--surface-control-disabled); --surface-footer: var(--wp--preset--color--surface-footer); --text-strong: var(--wp--preset--color--text-strong); --text-body: var(--wp--preset--color--text-body); --text-muted: var(--wp--preset--color--text-muted); --text-inverse: var(--wp--preset--color--text-inverse); --text-link: var(--wp--preset--color--text-link); --text-link-hover: var(--wp--preset--color--text-link-hover); --brand-ink: var(--wp--preset--color--brand-ink); --brand-ink-hover: var(--wp--preset--color--brand-ink-hover); --accent-ink: var(--wp--preset--color--accent-ink); --brand-tint: var(--wp--preset--color--brand-tint); --on-brand: var(--wp--preset--color--on-brand); --on-accent: var(--wp--preset--color--on-accent); --border-subtle: var(--wp--preset--color--border-subtle); --border-strong: var(--wp--preset--color--border-strong); --border-brand: var(--wp--preset--color--border-brand); /* surface-header carries a theme-specific alpha, so it is not a palette slug */ --surface-header: rgba(255, 255, 255, 0.94); /* DS constants: text over a dark film/band ground — the SAME in both themes (the dark payload deliberately does not override them). Use these on the ink-gradient CTA band, never --on-brand, which pairs with the BUTTON fill and flips dark when the button fill flips light. */ --text-on-dark: #ffffff; --text-on-dark-soft: rgba(255, 255, 255, 0.88); /* the offer-card gradient — the ONE decorative gradient the DS allows */ --surface-offer: linear-gradient(135deg, #e0f2f1 0%, #eaf5f6 45%, #f0f6f9 100%); /* band grounds — DS --da-band (services band) and --da-teal-band (the "Por qué elegirnos" band). accent-strong keeps WHITE text in BOTH themes (like --text-on-dark): #087471 vs #fff ≈ 5.4:1, so the dark payload only re-grounds --surface-band, never accent-strong. */ --surface-band: #eff5f7; --surface-accent-strong: #087471; /* action tokens — the DS button family (see the ACCESSIBILITY note above) */ --action-primary: var(--accent-600); --action-primary-hover: #0a6b64; --action-primary-active: #085c56; --action-navy: #1e394a; /* DS --da-ink-navy */ --action-navy-hover: #16303f; /* status aliases, re-exported from the palette like the rest */ --status-success: var(--wp--preset--color--success); --status-warning: var(--wp--preset--color--warning); --status-danger: var(--wp--preset--color--error); --status-info: var(--wp--preset--color--info); /* ============================ TYPOGRAPHY ================================ */ /* Manrope only (D1). --font-quote is the DS's single serif exception. */ --font-display: var(--wp--preset--font-family--manrope); --font-body: var(--wp--preset--font-family--manrope); --font-quote: Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* DS scale: caption 12 · meta 13.5 · small 14 · ui 15.5 · body 16 · lead 18 · h3 20.5 · h2 24 · stat 34 · display 50/64 */ --text-xs: 12px; --text-meta: 13.5px; --text-sm: 14px; --text-ui: 15.5px; --text-base: 16px; --text-md: 18px; --text-lg: 20.5px; --text-xl: 24px; --text-2xl: 34px; --text-3xl: 40px; --text-4xl: 50px; --text-5xl: 64px; --leading-tight: 1.15; --leading-snug: 1.33; --leading-normal: 1.5; --leading-relaxed: 1.72; --tracking-tight: -0.018em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.088em; /* DS type styles. Body/lead/caption are WEIGHT 500 (never 400); headings 800; display 700 with the DS's negative tracking. */ --type-hero: var(--weight-bold) var(--text-4xl)/1.28 var(--font-display); --type-h2: var(--weight-black) var(--text-xl)/var(--leading-snug) var(--font-display); --type-h3: var(--weight-black) var(--text-lg)/1.15 var(--font-display); --type-body: var(--weight-medium) var(--text-base)/var(--leading-normal) var(--font-body); --type-lead: var(--weight-medium) var(--text-md)/1.72 var(--font-body); --type-caption: var(--weight-medium) var(--text-xs)/1.58 var(--font-body); --type-eyebrow: var(--weight-black) 11.5px/1.4 var(--font-display); --type-button: var(--weight-bold) var(--text-ui)/1 var(--font-display); --type-stat: var(--weight-black) var(--text-2xl)/1 var(--font-display); /* ============================ SPACING =================================== */ /* The DS's MEASURED rhythm — 5/7/11/14/17/20/24/27/33/42/48/59, not an 8px grid. Keep the odd numbers; don't snap them. Steps above 59 extend the rhythm for long-form section spacing (the DS measured a dense portada). theme.json exposes the same steps as spacingSizes slugs. */ --space-0: 0px; --space-1: 5px; --space-2: 7px; --space-3: 11px; --space-4: 14px; --space-5: 17px; --space-6: 20px; --space-7: 24px; --space-8: 27px; --space-10: 33px; --space-12: 42px; --space-14: 48px; --space-16: 59px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* DS component spacing — verbatim from tokens/spacing.css */ --pad-card: 28px; --pad-band: 41px; --page-gutter: 57px; --gap-cards: 13px; --gap-buttons: 24px; --gap-nav: 34px; --section-y: var(--space-16); --section-y-tight: var(--space-12); --gutter: clamp(20px, 4vw, 57px); --container-max: 1180px; --container-narrow: 760px; /* ============================ RADII ===================================== */ /* DS: 2 rules · 6 compact · 8 buttons/fields · 9 hero buttons · 12 cards · 14 floating panels · 16 stats bar · 18 bands · 19 pills · full circles. */ --radius-xs: 2px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px; --radius-pill: 999px; --radius-card: 12px; --radius-control: 8px; --radius-panel: 14px; --radius-band: 18px; --radius-media: 12px; /* ============================ ELEVATION / SCRIMS ======================== */ /* All shadows tinted slate-blue rgba(23,52,71,…) — never pure black; teal buttons carry a teal-tinted shadow. Verbatim DS values. */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(23, 52, 71, 0.05); --shadow-sm: 0 2px 8px rgba(23, 52, 71, 0.05); --shadow-md: 0 3px 12px rgba(23, 52, 71, 0.04); --shadow-lg: 0 10px 30px rgba(20, 45, 62, 0.13); --shadow-panel: 0 14px 40px rgba(20, 45, 62, 0.14); --shadow-stats: -6px 8px 26px rgba(23, 52, 71, 0.06); --shadow-brand: 0 6px 16px rgba(30, 120, 110, 0.20); --shadow-button: 0 6px 16px rgba(30, 120, 110, 0.20); --ring-focus: 0 0 0 3px rgba(42, 145, 136, 0.40); --focus-ring: var(--accent-500); --overlay-scrim: rgba(19, 30, 36, 0.55); --scrim-bottom: linear-gradient(to top, rgba(19,30,36,0.78) 0%, rgba(19,30,36,0.35) 45%, rgba(19,30,36,0) 100%); --scrim-left: linear-gradient(to right, rgba(19,30,36,0.80) 0%, rgba(19,30,36,0.20) 60%, rgba(19,30,36,0) 100%); /* photo left-edge dissolve — DS imagery rule */ --mask-photo-left: linear-gradient(90deg, transparent 0, #000 42px); /* ============================ ICON STROKES ============================== */ --stroke-icon: 1.7; --stroke-icon-bold: 2.4; /* ============================ MOTION ==================================== */ /* DS: 120–180ms colour/border transitions on cubic-bezier(.4,0,.2,1). No scale, no lift, no glow — transitions are colour-based only. */ --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 240ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition-control: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); /* ============================ BACK-COMPAT SHIM ========================== */ /* --dt-text is read by assets/endo-regen/css/style.css (section 13, the restored site header/footer on the film template). Keep it until that stylesheet is migrated; it is a plain alias, not a second source of truth. */ --dt-text: var(--text-body); } /* ========================================================================== DARK — entry point 1 of 2: OS preference, no explicit choice made. :not([data-theme="light"]) so an explicit light choice still wins. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* --- WP presets: the semantic aliases theme.json declares. Overriding the preset (not the DS alias) means theme.json-styled blocks, the editor's .has--* utility classes and this theme's CSS all flip together. */ --wp--preset--color--surface-page: #0c1a24; --wp--preset--color--surface-subtle: #10222e; --wp--preset--color--surface-card: #142a38; --wp--preset--color--surface-raised: #183246; --wp--preset--color--surface-inverse: #10222e; --wp--preset--color--surface-brand: #2fa093; --wp--preset--color--surface-brand-hover: #3db2a4; --wp--preset--color--surface-accent: #123430; --wp--preset--color--surface-promo: #16302c; --wp--preset--color--surface-control: #16303f; --wp--preset--color--surface-control-disabled:#122430; --wp--preset--color--surface-footer: #071119; --wp--preset--color--text-strong: #edf4f7; --wp--preset--color--text-body: #c3d2da; --wp--preset--color--text-muted: #93a7b3; --wp--preset--color--text-inverse: #0c1a24; --wp--preset--color--text-link: var(--accent-300); --wp--preset--color--text-link-hover: var(--accent-200); --wp--preset--color--brand-ink: var(--primary-300); --wp--preset--color--brand-ink-hover: var(--primary-200); --wp--preset--color--accent-ink: var(--accent-300); --wp--preset--color--brand-tint: rgba(111, 196, 184, 0.12); --wp--preset--color--on-brand: #06211e; --wp--preset--color--on-accent: #d9f0ec; --wp--preset--color--border-subtle: #22394a; --wp--preset--color--border-strong: #35505f; --wp--preset--color--border-brand: var(--accent-400); --wp--preset--color--success: #6cc79b; --wp--preset--color--warning: #e0ac6a; --wp--preset--color--error: #e88a80; --wp--preset--color--info: var(--primary-300); /* --- legacy compatibility slugs (see theme.json). Kept because 30+ PUBLISHED pages on this blog still carry dentista26-era markup referencing them; each is pinned to the DS alias that matches its original role. */ --wp--preset--color--base: #0c1a24; /* -> surface-page */ --wp--preset--color--base-2: #10222e; /* -> surface-subtle */ --wp--preset--color--surface: #142a38; /* -> surface-card */ --wp--preset--color--contrast: #edf4f7; /* -> text-strong */ --wp--preset--color--contrast-2: #2fa093; /* -> surface-brand */ --wp--preset--color--contrast-3: #64879c; /* mid slate: legible as large text AND as band under dark ink */ --wp--preset--color--muted: #93a7b3; /* -> text-muted */ --wp--preset--color--border: #22394a; /* -> border-subtle */ --wp--preset--color--primary: var(--primary-300); /* -> brand-ink */ --wp--preset--color--primary-dark: var(--primary-200); /* -> brand-ink-hover */ --wp--preset--color--primary-light: #1c2c34; --wp--preset--color--brand: var(--accent-300); /* -> accent-ink */ --wp--preset--gradient--primary-gradient: linear-gradient(135deg, #2fa093 0%, #1f7c72 100%); --wp--preset--gradient--soft-gradient: linear-gradient(135deg, #123430 0%, #10222e 55%, #0c1a24 100%); --wp--preset--gradient--hero-gradient: linear-gradient(135deg, #142a38 0%, #0c1a24 100%); /* --- ramp inversions so ramp-resolving aliases stay true in dark */ --neutral-100: #1c2f3b; --neutral-700: #c3d2da; --primary-50: #14242f; --accent-50: #123430; --accent-100: #1a4a44; --accent-700: #6fc4b8; --sand-100: #33280f; --sand-200: #4a3a1a; --sand-500: #e0b46a; --success-500: #6cc79b; --success-50: #14302a; --warning-500: #e0ac6a; --warning-50: #33260f; --danger-500: #e88a80; --danger-50: #3a1c1a; --info-500: var(--primary-300); --info-50: #14242f; /* --- elevation / scrims / focus (shadows deepen; tint stays ink, not black) */ --shadow-xs: 0 1px 2px rgba(3, 10, 15, 0.40); --shadow-sm: 0 2px 8px rgba(3, 10, 15, 0.45); --shadow-md: 0 3px 12px rgba(3, 10, 15, 0.50); --shadow-lg: 0 14px 40px rgba(3, 10, 15, 0.60); --shadow-panel: 0 14px 40px rgba(3, 10, 15, 0.62); --shadow-brand: 0 6px 16px rgba(10, 60, 54, 0.55); --shadow-button: 0 6px 16px rgba(10, 60, 54, 0.50); --ring-focus: 0 0 0 3px rgba(111, 196, 184, 0.45); --overlay-scrim: rgba(4, 10, 14, 0.68); --scrim-bottom: linear-gradient(to top, rgba(4, 10, 14, 0.88) 0%, rgba(4, 10, 14, 0.45) 45%, rgba(4, 10, 14, 0) 100%); --scrim-left: linear-gradient(to right, rgba(4, 10, 14, 0.90) 0%, rgba(4, 10, 14, 0.35) 60%, rgba(4, 10, 14, 0) 100%); /* --- the offer-card gradient re-grounded for dark */ --surface-offer: linear-gradient(135deg, #123430 0%, #122e33 45%, #10222e 100%); /* --- the services band re-grounded (teal-tinted ink; accent-strong stays) */ --surface-band: #10262e; /* --- surface-header is the only alias with an alpha set per theme */ --surface-header: rgba(12, 26, 36, 0.92); } } /* ========================================================================== DARK — entry point 2 of 2: explicit choice from the header toggle. Byte-identical payload to the block above (both emitted from one source). ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; /* --- WP presets: the semantic aliases theme.json declares. Overriding the preset (not the DS alias) means theme.json-styled blocks, the editor's .has--* utility classes and this theme's CSS all flip together. */ --wp--preset--color--surface-page: #0c1a24; --wp--preset--color--surface-subtle: #10222e; --wp--preset--color--surface-card: #142a38; --wp--preset--color--surface-raised: #183246; --wp--preset--color--surface-inverse: #10222e; --wp--preset--color--surface-brand: #2fa093; --wp--preset--color--surface-brand-hover: #3db2a4; --wp--preset--color--surface-accent: #123430; --wp--preset--color--surface-promo: #16302c; --wp--preset--color--surface-control: #16303f; --wp--preset--color--surface-control-disabled:#122430; --wp--preset--color--surface-footer: #071119; --wp--preset--color--text-strong: #edf4f7; --wp--preset--color--text-body: #c3d2da; --wp--preset--color--text-muted: #93a7b3; --wp--preset--color--text-inverse: #0c1a24; --wp--preset--color--text-link: var(--accent-300); --wp--preset--color--text-link-hover: var(--accent-200); --wp--preset--color--brand-ink: var(--primary-300); --wp--preset--color--brand-ink-hover: var(--primary-200); --wp--preset--color--accent-ink: var(--accent-300); --wp--preset--color--brand-tint: rgba(111, 196, 184, 0.12); --wp--preset--color--on-brand: #06211e; --wp--preset--color--on-accent: #d9f0ec; --wp--preset--color--border-subtle: #22394a; --wp--preset--color--border-strong: #35505f; --wp--preset--color--border-brand: var(--accent-400); --wp--preset--color--success: #6cc79b; --wp--preset--color--warning: #e0ac6a; --wp--preset--color--error: #e88a80; --wp--preset--color--info: var(--primary-300); /* --- legacy compatibility slugs (see theme.json). Kept because 30+ PUBLISHED pages on this blog still carry dentista26-era markup referencing them; each is pinned to the DS alias that matches its original role. */ --wp--preset--color--base: #0c1a24; /* -> surface-page */ --wp--preset--color--base-2: #10222e; /* -> surface-subtle */ --wp--preset--color--surface: #142a38; /* -> surface-card */ --wp--preset--color--contrast: #edf4f7; /* -> text-strong */ --wp--preset--color--contrast-2: #2fa093; /* -> surface-brand */ --wp--preset--color--contrast-3: #64879c; /* mid slate: legible as large text AND as band under dark ink */ --wp--preset--color--muted: #93a7b3; /* -> text-muted */ --wp--preset--color--border: #22394a; /* -> border-subtle */ --wp--preset--color--primary: var(--primary-300); /* -> brand-ink */ --wp--preset--color--primary-dark: var(--primary-200); /* -> brand-ink-hover */ --wp--preset--color--primary-light: #1c2c34; --wp--preset--color--brand: var(--accent-300); /* -> accent-ink */ --wp--preset--gradient--primary-gradient: linear-gradient(135deg, #2fa093 0%, #1f7c72 100%); --wp--preset--gradient--soft-gradient: linear-gradient(135deg, #123430 0%, #10222e 55%, #0c1a24 100%); --wp--preset--gradient--hero-gradient: linear-gradient(135deg, #142a38 0%, #0c1a24 100%); /* --- ramp inversions so ramp-resolving aliases stay true in dark */ --neutral-100: #1c2f3b; --neutral-700: #c3d2da; --primary-50: #14242f; --accent-50: #123430; --accent-100: #1a4a44; --accent-700: #6fc4b8; --sand-100: #33280f; --sand-200: #4a3a1a; --sand-500: #e0b46a; --success-500: #6cc79b; --success-50: #14302a; --warning-500: #e0ac6a; --warning-50: #33260f; --danger-500: #e88a80; --danger-50: #3a1c1a; --info-500: var(--primary-300); --info-50: #14242f; /* --- elevation / scrims / focus (shadows deepen; tint stays ink, not black) */ --shadow-xs: 0 1px 2px rgba(3, 10, 15, 0.40); --shadow-sm: 0 2px 8px rgba(3, 10, 15, 0.45); --shadow-md: 0 3px 12px rgba(3, 10, 15, 0.50); --shadow-lg: 0 14px 40px rgba(3, 10, 15, 0.60); --shadow-panel: 0 14px 40px rgba(3, 10, 15, 0.62); --shadow-brand: 0 6px 16px rgba(10, 60, 54, 0.55); --shadow-button: 0 6px 16px rgba(10, 60, 54, 0.50); --ring-focus: 0 0 0 3px rgba(111, 196, 184, 0.45); --overlay-scrim: rgba(4, 10, 14, 0.68); --scrim-bottom: linear-gradient(to top, rgba(4, 10, 14, 0.88) 0%, rgba(4, 10, 14, 0.45) 45%, rgba(4, 10, 14, 0) 100%); --scrim-left: linear-gradient(to right, rgba(4, 10, 14, 0.90) 0%, rgba(4, 10, 14, 0.35) 60%, rgba(4, 10, 14, 0) 100%); /* --- the offer-card gradient re-grounded for dark */ --surface-offer: linear-gradient(135deg, #123430 0%, #122e33 45%, #10222e 100%); /* --- the services band re-grounded (teal-tinted ink; accent-strong stays) */ --surface-band: #10262e; /* --- surface-header is the only alias with an alpha set per theme */ --surface-header: rgba(12, 26, 36, 0.92); }