/* ──────────────────────────────────────────────────────────────────────────── AN.Platform — Global design tokens (ANP-1700, epic ANP-1695 Forms SOTA). Single source of truth for the platform's visual identity. Promoted from the page-scoped tokens that lived inside /lab/smart-forms during the POC. Three layers: 1. Primitives — atomic values (colours, spacings, typo, radius, shadows) 2. Semantic vars — derived names consumed by AnpXxx components (--anp-input-bg…) 3. Telerik bridge — selectively maps --kendo-* onto our semantic vars so the Kendo theme follows our identity without per-component CSS Override layers cascade through root-level classes: .anp-mode-dark — flips the neutral palette .anp-density-compact — multiplies paddings / gaps down .anp-density-spacious — multiplies paddings / gaps up .anp-density-dense — a list read row after row: the grid's « Compacte » (ANP-2632) Product identity (ANP-2007): a product front redefines any of these tokens in its own token sheet, declared through ShellOptions.ProductTokenSheet and linked by the shell's App.razor after this file. Start from product-tokens.template.css, shipped next to this file. A token sheet carries custom properties only — never a selector beyond :root and the variant blocks below, never a layout rule. No Sass is compiled on the product side. Tenant overrides arrive at runtime by injecting inline `style="--anp-color-primary: #…"` on the page root. Eight tokens are designed to be overridable safely (see "Tenant override surface" comment below) — anything else is platform-internal. ────────────────────────────────────────────────────────────────────────── */ :root { /* ─── Tenant override surface ───────────────────────────────────────── Eight tokens an admin tenant can flip to skin the platform without restyling individual components. Anything else is platform-internal. */ --anp-color-primary: #4f46e5; /* indigo 600 — primary actions */ --anp-color-success: #047857; /* emerald 700 — confirmations, OK badges; read as TEXT by the hints of AnpAddress / AnpEmail, so it must reach 4.5:1: 5.48:1 on white (emerald 500 was 2.54:1 — ANP-2593) */ --anp-color-danger: #dc2626; /* red 600 — errors, destructive actions; 4.83:1 on white (AA as text) */ --anp-color-accent: #b45309; /* amber 700 — warnings, chips; read as TEXT by the warning hints of AnpDate / AnpEmail / AnpAddress: 5.02:1 on white (amber 500 was 2.15:1 — ANP-2593) */ --anp-radius-md: 10px; /* default radius across inputs / cards */ --anp-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --anp-density-scale: 1; /* 0.85 in compact, 1.15 in spacious — multiplies paddings */ --anp-mode: light; /* `dark` flips the neutral palette via .anp-mode-dark */ /* ─── Neutral palette (light mode default) ─────────────────────────── */ --anp-color-text: #0f172a; /* slate 900 — body text */ --anp-color-text-muted: #5b6b80; /* slate, between 500 and 600 — labels, hints: 4.99:1 on the page background, 4.76:1 on a selected row (slate 500 fell to 4.16:1 — ANP-2593) */ --anp-color-border: #e2e8f0; /* slate 200 — borders, separators */ --anp-color-surface: #ffffff; /* card backgrounds */ --anp-color-surface-soft: #f5f5f5; /* page background — the shade the app already paints */ --anp-color-primary-soft: #eef2ff; /* indigo 50 — soft chip background */ --anp-color-on-primary: #ffffff; /* label drawn on a primary fill (Telerik buttons, app bar) — ANP-2592 */ /* Row states of a list. Two rungs the neutral palette did not carry: a hover that reads without shouting, and a selection that stays legible under it. ANP-2427 — a list is a row of surfaces, so its states are surfaces too. */ --anp-color-row-hover: #f2f5fb; --anp-color-row-selected: #eaf0fc; /* Third row state: the zebra stripe of a dense legacy grid (.limited). Was --bg-even-row in _variables.scss until ANP-2007 moved every colour here. */ --anp-color-row-stripe: #fbfbfb; /* Fourth row state: a row in the trash, shown because the user asked for the trash. Red enough to read « deleted » at a glance, soft enough to keep the row legible; the danger rule on its first cell says it to whoever does not tell colours apart. */ --anp-color-row-deleted: #fee2e2; /* red 100 */ --anp-color-row-deleted-hover: #fecaca; /* red 200 */ /* The keyboard focus ring, one for every control: a ring drawn a gap away from the control, in the primary, so it reads on any fill — a red destructive button included — without restyling the control itself. */ --anp-color-focus: var(--anp-color-primary); --anp-focus-ring-width: 2px; --anp-focus-ring-offset: 2px; /* A border that delimits an interactive control (the underline of a dropdown and its collapse panel), as opposed to --anp-color-border which separates surfaces. Was --border-dropdown in _variables.scss (ANP-2007). */ --anp-color-border-strong: #8d8d8d; /* boundary of an input: 3.27:1 on white, the 3:1 of WCAG 1.4.11 (#989898 was 2.88:1 — ANP-2593). 3.02:1 on the page background --anp-color-surface-soft, where the AnpSmartChoice chips sit (#8f8f8f was 2.97:1 there — STORE-656) */ /* ─── Spacing scale ────────────────────────────────────────────────── */ --anp-space-1: 4px; --anp-space-2: 8px; --anp-space-3: 12px; --anp-space-4: 16px; --anp-space-5: 24px; --anp-space-6: 32px; --anp-space-7: 48px; /* Block inset of a Telerik card body (ANP-3044). The shell used to force it with .k-card-body { padding-block: 5px !important }, which also overrode the theme's own, more specific insets (tile layout, task board, timeline) and left the dashboard grid to undo it with negative margins. Same 5px, now a token: a screen that needs another inset redefines it on its container, without !important. Off the spacing scale on purpose — 4px would move every card of the platform by a pixel. */ --anp-card-body-padding-block: 5px; /* ─── Icon sizes (ANP-2502) ──────────────────────────────────────────── Three rungs for AnpIcon, deliberately NOT multiplied by --anp-density-scale: the paddings around an icon follow the density, the drawing inside does not. Outlines drawn on a 512 grid and rendered at 13.6px land between device pixels, which reads as a blurred icon rather than as a tighter layout. --anp-icon-md is the spacing token it coincides with, so the default size moves with the scale if the scale ever moves. --anp-icon-sm is the one rung the spacing scale has no answer for: 14px is the size the tool-mode gear is on screen today, and moving it two pixels is exactly the regression this substitution must not introduce. */ --anp-icon-sm: 14px; --anp-icon-md: var(--anp-space-4); /* 16px */ --anp-icon-lg: var(--anp-space-5); /* 24px */ /* ─── Typography (3 levels — keep it spartan) ──────────────────────── */ --anp-text-title: 18px; --anp-text-body: 14px; --anp-text-hint: 12px; --anp-line-height-body: 1.55; /* ─── Radius family ────────────────────────────────────────────────── */ --anp-radius-sm: 6px; --anp-radius-lg: 14px; --anp-radius-full: 999px; --anp-radius-xl: 18px; /* overlay surfaces (ANP-2296 AnpModal) */ --anp-radius-inner: calc(var(--anp-radius-xl) - 6px); /* 12px */ /* Nested-radius arithmetic: each level down subtracts 6px, the inner padding. 18 outer surface → 12 inner box → 6 rule (--anp-radius-sm). The middle rung is expressed as a calc() off the outer radius on purpose: it states the relation instead of dropping one more loose number into an already busy scale. */ /* ─── Shadows ──────────────────────────────────────────────────────── */ --anp-shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.04); --anp-shadow-floating: 0 4px 12px rgba(15, 23, 42, 0.08); --anp-shadow-elevated: 0 12px 32px rgba(15, 23, 42, 0.12); /* ─── Overlay elevation (ANP-2296) ───────────────────────────────────── The rung above --anp-shadow-elevated, for surfaces living in the browser top layer. Three stacked layers: contact, medium, ambient — the opacity ramp continues the 0.04 / 0.08 / 0.12 family above. --anp-overlay-highlight is a separate inset rule so a component can compose it: box-shadow: var(--anp-shadow-overlay), var(--anp-overlay-highlight); */ --anp-shadow-overlay: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 16px -6px rgba(15, 23, 42, 0.10), 0 28px 56px -16px rgba(15, 23, 42, 0.18); --anp-overlay-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8); /* ─── Scrim (dialog::backdrop) ───────────────────────────────────────── Indigo-slate rather than neutral black: the veil should read "you are somewhere else", not "the page is switched off". Measured on Chromium 148: custom properties declared here DO inherit into dialog::backdrop, so --anp-scrim needs no local redeclaration. */ --anp-scrim: rgba(30, 35, 62, 0.32); --anp-scrim-blur: 8px; /* ─── Animation durations ──────────────────────────────────────────── */ --anp-duration-fast: 150ms; --anp-duration-smooth: 300ms; /* Overlay choreography (ANP-2296): the scrim leads, the surface follows — the page darkens first, then the surface lands. Both halves get a token so no timing value is hardcoded in the component. */ --anp-ease-overlay: cubic-bezier(0.16, 1, 0.3, 1); --anp-ease-scrim: ease-out; --anp-duration-overlay: 260ms; --anp-duration-scrim: 120ms; /* ─── Telerik bridge (ANP-2592) ─────────────────────────────────────── ONE primary on screen: the whole --kendo-color-primary* family the Material theme (anp-theme.css, kendo-theme-material 12.2.3) consumes is derived here from --anp-color-primary, so a product or a tenant that redefines only --anp-color-primary recolours every Telerik primary state: solid buttons (rest, hover, active, focus ring), app bar, checked radios and checkboxes, selected drawer / list / calendar items, subtle chips and badges. Why it wins: anp-theme.css declares the same properties on :root, at the same specificity. App.razor links the theme ONCE, before this file (app.scss no longer @imports it), so the later declaration — this one — is the one the cascade keeps. AnpTokenContrastTests pins that order. The shades reproduce the Material swatch the theme ships, measured on its #3f51b5 values: each color-mix below rebuilds the theme's own hex within 2/255 per channel (hover = primary 92% + black, active 84%, emphasis = primary 54% + white, subtle 24%, subtle-hover 30%, subtle-active 38%, on-subtle = primary 35% + black). A product never repeats these lines: var() is resolved against the final :root value of --anp-color-primary, which is the product's once its token sheet is linked. Bridge only — never a value to edit. */ --kendo-color-primary: var(--anp-color-primary); --kendo-color-primary-hover: color-mix(in srgb, var(--anp-color-primary) 92%, black); --kendo-color-primary-active: color-mix(in srgb, var(--anp-color-primary) 84%, black); --kendo-color-primary-emphasis: color-mix(in srgb, var(--anp-color-primary) 54%, white); --kendo-color-primary-subtle: color-mix(in srgb, var(--anp-color-primary) 24%, white); --kendo-color-primary-subtle-hover: color-mix(in srgb, var(--anp-color-primary) 30%, white); --kendo-color-primary-subtle-active: color-mix(in srgb, var(--anp-color-primary) 38%, white); --kendo-color-primary-on-subtle: color-mix(in srgb, var(--anp-color-primary) 35%, black); --kendo-color-primary-on-surface: var(--anp-color-primary); --kendo-color-on-primary: var(--anp-color-on-primary); /* ANP-3047 — the theme's grey for secondary text, #757575, was bridged in dark only (ANP-3009). In light it stayed the theme's: 4.23:1 for the floating labels, the tab links and the menu search on the page background (#f5f5f5), 3.86:1 for « Ctrl K » on its key cap (#ebebeb). It is the part --anp-color-text-muted plays: 4.99:1 and 4.56:1 there, 5.44:1 on a card. The dark block restates it (a :root var() is computed on , with the light value). */ --kendo-color-subtle: var(--anp-color-text-muted); } /* ─── Dark mode ─────────────────────────────────────────────────────────── */ .anp-mode-dark { --anp-color-text: #e2e8f0; --anp-color-text-muted: #94a3b8; --anp-color-border: #334155; --anp-color-surface: #1e293b; --anp-color-surface-soft: #0f172a; /* Dark primary (ANP-2593): indigo 600 reads 2.33:1 on a slate surface. No single primary can carry both a white label (needs a dark primary) and primary text on a dark surface (needs a light one), so dark mode does what Material does: a light primary, and a DARK label on it. #949cfa: 5.9:1 as text on the surface, 4.7:1 on its own soft chip; #0f172a on it: 7.2:1. A product that redefines --anp-color-primary restates these three in its dark block. */ --anp-color-primary: #949cfa; --anp-color-on-primary: #0f172a; --anp-color-primary-soft: rgba(148, 156, 250, 0.12); /* Success and accent keep their bright 500 shades here: the dark 700s of :root fall under 3:1 on a slate surface; emerald 500 reads 5.77:1, amber 500 6.81:1. */ --anp-color-success: #10b981; --anp-color-accent: #f59e0b; /* Measured on the maquette's own dark palette rather than derived: a light hover lightened by a filter turns muddy over a slate surface. */ --anp-color-row-hover: #212736; --anp-color-row-selected: #243049; --anp-color-row-stripe: #212c3e; /* one notch above the surface, below the hover */ --anp-color-row-deleted: rgba(248, 113, 113, 0.12); /* the dark danger, as a wash */ --anp-color-row-deleted-hover: rgba(248, 113, 113, 0.20); --anp-color-focus: #818cf8; /* indigo 400 — the indigo 600 primary is too dark on a slate surface */ --anp-color-border-strong: #64748b; /* slate 500 — the light text-muted, as a line */ --anp-color-danger: #f87171; /* red 400 — red 600 is 3.0:1 on a slate surface; this one reads 5.3:1 */ --anp-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3); --anp-shadow-floating: 0 4px 12px rgba(0, 0, 0, 0.4); --anp-shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.5); /* Overlay elevation — same three layers, pure black like the rung above. The top highlight drops from 80% to 8%: at full strength on a dark surface it reads as a bright scar instead of a lit edge. */ --anp-shadow-overlay: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 16px -6px rgba(0, 0, 0, 0.45), 0 28px 56px -16px rgba(0, 0, 0, 0.6); --anp-overlay-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08); /* The light-theme scrim is invisible over a #0f172a page — measured, not guessed. Dark needs its own veil: deeper and more opaque, still indigo-slate. */ --anp-scrim: rgba(2, 6, 23, 0.60); /* ANP-2632 — the neutral Telerik buttons follow the dark palette. Only the primary family was bridged: every « base » and « light » button (the grid's chips, « Filtrer », « Affichage », the toggle buttons) stayed a light lavender with dark text on a slate page. Measured on the live-grid bench: these are the variables the theme's .k-button-solid-base and .k-button-solid-light read. Light mode is untouched — the bridge lives in this dark block only. The fill is the text mixed into the surface, so it rises a notch above the page and keeps rising on hover and press. */ --kendo-color-base: color-mix(in srgb, var(--anp-color-text) 8%, var(--anp-color-surface)); --kendo-color-base-hover: color-mix(in srgb, var(--anp-color-text) 14%, var(--anp-color-surface)); --kendo-color-base-active: color-mix(in srgb, var(--anp-color-text) 20%, var(--anp-color-surface)); --kendo-color-base-emphasis: color-mix(in srgb, var(--anp-color-text) 32%, var(--anp-color-surface)); --kendo-color-on-base: var(--anp-color-text); --kendo-color-light: color-mix(in srgb, var(--anp-color-text) 8%, var(--anp-color-surface)); --kendo-color-light-hover: color-mix(in srgb, var(--anp-color-text) 14%, var(--anp-color-surface)); --kendo-color-light-active: color-mix(in srgb, var(--anp-color-text) 20%, var(--anp-color-surface)); --kendo-color-on-light: var(--anp-color-text); /* ANP-3009 — the rest of the neutral Telerik family follows the dark palette. Measured on the dashboard with the class applied: the drawer kept the theme's #f5f5f5 surface under the light drawer text (1.13:1), an outline « base » button kept its #212121 label on the slate surface (1.10:1: « Ouvrir », « Écarter », « Marquer comme lue »), floating labels and tab links kept the theme's #757575 (3.87:1). Each variable maps to the --anp-* token that plays the same part in light — the theme's app-surface and surface-alt are our surface, its surface (#f5f5f5) is our page background — so the two themes keep the same hierarchy. Light is untouched. */ --kendo-color-app-surface: var(--anp-color-surface); --kendo-color-on-app-surface: var(--anp-color-text); --kendo-color-surface: var(--anp-color-surface-soft); --kendo-color-surface-alt: var(--anp-color-surface); --kendo-color-subtle: var(--anp-color-text-muted); --kendo-color-border: var(--anp-color-border); --kendo-color-border-alt: var(--anp-color-border-strong); --kendo-color-base-on-surface: var(--anp-color-text); --kendo-color-base-subtle: color-mix(in srgb, var(--anp-color-text) 8%, var(--anp-color-surface)); --kendo-color-base-subtle-hover: color-mix(in srgb, var(--anp-color-text) 14%, var(--anp-color-surface)); --kendo-color-base-subtle-active: color-mix(in srgb, var(--anp-color-text) 20%, var(--anp-color-surface)); --kendo-color-base-on-subtle: var(--anp-color-text); /* The primary family again, on the dark primary. A custom property is computed where it is declared: the :root bridge resolves var(--anp-color-primary) on , with the LIGHT value, and an element below that carries .anp-mode-dark (the Core's layout root, a Lab bench) inherits that light result — the app bar stayed indigo 600 with a white label. Redeclared here, the bridge is recomputed on the element that carries the class. */ --kendo-color-primary: var(--anp-color-primary); --kendo-color-primary-hover: color-mix(in srgb, var(--anp-color-primary) 92%, black); --kendo-color-primary-active: color-mix(in srgb, var(--anp-color-primary) 84%, black); --kendo-color-primary-emphasis: color-mix(in srgb, var(--anp-color-primary) 54%, white); --kendo-color-primary-on-surface: var(--anp-color-primary); --kendo-color-on-primary: var(--anp-color-on-primary); /* The :root bridge mixes the primary with WHITE for its subtle tints: on the light dark-mode primary that is a pale lavender, and the drawer's selected row painted primary text on it. Here the tint is the primary sunk into the surface, and its text is the primary itself. */ --kendo-color-primary-subtle: color-mix(in srgb, var(--anp-color-primary) 12%, var(--anp-color-surface)); --kendo-color-primary-subtle-hover: color-mix(in srgb, var(--anp-color-primary) 18%, var(--anp-color-surface)); --kendo-color-primary-subtle-active: color-mix(in srgb, var(--anp-color-primary) 24%, var(--anp-color-surface)); --kendo-color-primary-on-subtle: var(--anp-color-primary); /* ANP-3009 — Bootstrap's own variables, for the markup that still draws with Bootstrap: its .card (the profile panels) took --bs-body-bg, white, and the text it inherits from stayed #212529 — the page titles read 1.16:1. Same mapping as the Telerik bridge above. The --bs-*-rgb triplets cannot be derived from a token and are left alone. */ --bs-body-color: var(--anp-color-text); --bs-body-bg: var(--anp-color-surface); --bs-emphasis-color: var(--anp-color-text); --bs-secondary-color: var(--anp-color-text-muted); --bs-tertiary-color: var(--anp-color-text-muted); --bs-secondary-bg: color-mix(in srgb, var(--anp-color-text) 8%, var(--anp-color-surface)); --bs-tertiary-bg: color-mix(in srgb, var(--anp-color-text) 4%, var(--anp-color-surface)); --bs-border-color: var(--anp-color-border); --bs-heading-color: inherit; /* ANP-3047 — a .btn-link (« Vérifier » on the profile) takes Bootstrap's link blue under the pointer, on focus and pressed (#0a58ca: 2.27:1 on the dark card; #0d6efd at rest without the legacy inherit rule: 3.24:1). Bootstrap's dark values are scoped to [data-bs-theme=dark], which the platform does not set. The link is the primary, and the primary pulled towards the text under the pointer — lighter on a dark surface. */ --bs-link-color: var(--anp-color-primary); --bs-link-hover-color: color-mix(in srgb, var(--anp-color-primary) 70%, var(--anp-color-text)); } /* ─── Density variants ──────────────────────────────────────────────────── */ .anp-density-compact { --anp-density-scale: 0.85; } .anp-density-comfortable { --anp-density-scale: 1; } .anp-density-spacious { --anp-density-scale: 1.15; } /* ANP-2632 — a list read row after row: the compact density of a grid (its « Compacte »). Measured on the bench (2026-10-05): a grid row is 2 x 12 px of padding times the scale, a 21 px line and a 1 px rule — 35-36 px at 0.55, against 41 px at the 0.85 of .anp-density-compact. The grid puts the class on itself; it used to set the scale inline, which redefined a token outside its sheet. */ .anp-density-dense { --anp-density-scale: 0.55; } /* ─── Secondary (ANP-2606) ────────────────────────────────────────────────── Telerik's "secondary" theme colour — the selected drawer item, any widget themed secondary — as a token, bridged like the primary. A block of its own on purpose: same :root, same specificity as the block above, later in the file, and no property in common with it. The defaults are the theme's own Material values (anp-theme.css): a product that does not set them sees no change. A product sets --anp-color-secondary in its token sheet, never a --kendo-color-secondary* variable. The theme does not build its secondary swatch with the primary's ratios: applied to #e51a5f they miss its tints by up to 15/255 and its on-surface by 55/255 (the theme darkens secondary text on a surface, where the primary keeps the base colour). The ratios below are measured on the theme's own secondary values, each rebuilt within 4/255 per channel: hover = secondary 92% + black, active 84%, emphasis = secondary 51% + white, subtle 22%, subtle-hover 36%, subtle-active 45%, on-subtle = secondary 35% + black, on-surface 76% + black. AnpTokenContrastTests pins them. */ :root { --anp-color-secondary: #e51a5f; /* Material pink — secondary fills */ --anp-color-on-secondary: #ffffff; /* label drawn on a secondary fill */ --kendo-color-secondary: var(--anp-color-secondary); --kendo-color-secondary-hover: color-mix(in srgb, var(--anp-color-secondary) 92%, black); --kendo-color-secondary-active: color-mix(in srgb, var(--anp-color-secondary) 84%, black); --kendo-color-secondary-emphasis: color-mix(in srgb, var(--anp-color-secondary) 51%, white); --kendo-color-secondary-subtle: color-mix(in srgb, var(--anp-color-secondary) 22%, white); --kendo-color-secondary-subtle-hover: color-mix(in srgb, var(--anp-color-secondary) 36%, white); --kendo-color-secondary-subtle-active: color-mix(in srgb, var(--anp-color-secondary) 45%, white); --kendo-color-secondary-on-subtle: color-mix(in srgb, var(--anp-color-secondary) 35%, black); --kendo-color-secondary-on-surface: color-mix(in srgb, var(--anp-color-secondary) 76%, black); --kendo-color-on-secondary: var(--anp-color-on-secondary); } /* ─── Chart series (ANP-2896, for AnpChart — ANP-2792) ────────────────────── The six series colours of a chart, in the order a chart uses them: blue, orange, teal, purple, pink, green — hues apart enough to stay distinct to most colour-blind readers; a series never relies on colour alone (the legend and the chart's table name it). Values are the fallbacks AnpChart painted until this block existed (the Tailwind 600s), so no front changes colour when it arrives. Theme tokens only: no chart logic lives in the shell. AnpChart (Core) pulls each one a fifth of the way towards --anp-color-text, which darkens it on the light surface and lightens it on the dark one; that drawn colour is the pair AnpTokenContrastTests holds to 3:1 on the surface, in both themes. The dark block restates the same bases on purpose: the flip is done by the ink, and a product that recolours a series restates it in both blocks. */ :root { --anp-color-chart-1: #2563eb; /* blue 600 */ --anp-color-chart-2: #ea580c; /* orange 600 */ --anp-color-chart-3: #0d9488; /* teal 600 */ --anp-color-chart-4: #9333ea; /* purple 600 */ --anp-color-chart-5: #db2777; /* pink 600 */ --anp-color-chart-6: #65a30d; /* lime 600 */ } .anp-mode-dark { --anp-color-chart-1: #2563eb; --anp-color-chart-2: #ea580c; --anp-color-chart-3: #0d9488; --anp-color-chart-4: #9333ea; --anp-color-chart-5: #db2777; --anp-color-chart-6: #65a30d; } /* ─── Print (ANP-2896, after ANP-2839) ────────────────────────────────────── Paper is white and ink is dark: a page printed — or saved as PDF — from the dark theme would otherwise come out light grey on nothing, or with the slate surfaces flooded in toner. In print, every colour the dark block flips takes back its light value, so the printout is the light theme whatever the screen showed. The selectors are tripled on purpose (0,3,0): the product sheet is linked AFTER this file and restates tokens in plain :root / .anp-mode-dark blocks (0,1,0) — even :root.anp-mode-dark (0,2,0) — so only a higher specificity, not the order, keeps the printout light. AnpTokenContrastTests holds each value here equal to the light one, so the two cannot drift. */ @media print { :root:root:root, .anp-mode-dark.anp-mode-dark.anp-mode-dark { --anp-color-text: #0f172a; --anp-color-text-muted: #5b6b80; --anp-color-border: #e2e8f0; --anp-color-border-strong: #8d8d8d; --anp-color-surface: #ffffff; --anp-color-surface-soft: #f5f5f5; --anp-color-primary: #4f46e5; --anp-color-on-primary: #ffffff; --anp-color-primary-soft: #eef2ff; --anp-color-success: #047857; --anp-color-accent: #b45309; --anp-color-danger: #dc2626; --anp-color-row-hover: #f2f5fb; --anp-color-row-selected: #eaf0fc; --anp-color-row-stripe: #fbfbfb; --anp-color-row-deleted: #fee2e2; --anp-color-row-deleted-hover: #fecaca; --anp-color-focus: var(--anp-color-primary); --anp-color-chart-1: #2563eb; --anp-color-chart-2: #ea580c; --anp-color-chart-3: #0d9488; --anp-color-chart-4: #9333ea; --anp-color-chart-5: #db2777; --anp-color-chart-6: #65a30d; --anp-shadow-subtle: 0 1px 2px rgba(15, 23, 42, 0.04); --anp-shadow-floating: 0 4px 12px rgba(15, 23, 42, 0.08); --anp-shadow-elevated: 0 12px 32px rgba(15, 23, 42, 0.12); --anp-shadow-overlay: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 16px -6px rgba(15, 23, 42, 0.10), 0 28px 56px -16px rgba(15, 23, 42, 0.18); --anp-overlay-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8); --anp-scrim: rgba(30, 35, 62, 0.32); } }