/* ──────────────────────────────────────────────────────────────────────────── 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: #8f8f8f; /* boundary of an input: 3.23:1 on white, the 3:1 of WCAG 1.4.11 (#989898 was 2.88:1 — ANP-2593) */ /* ─── 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; /* ─── 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); } /* ─── 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); } /* ─── 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); }