/* ========================================================================== salamnoor — design tokens theme/salamnoor/assets/css/tokens.css -------------------------------------------------------------------------- LAYER 1 --c-* raw ramp. Theme-independent. Declared once. Never redefined by a theme block. Swapping the brand hue means editing the eight --c-brand-* values and nothing else. LAYER 2 --sn-* semantic aliases. Light on bare :root. ONLY the 26 colour tokens are redefined in the two dark blocks. LAYER 3 scopes .sn-invert and [data-band] re-point Layer-2 tokens. No component CSS may name a colour literal. Every ratio in the comments was measured with the WCAG 2.x relative luminance formula. Do not change a value without re-measuring. ========================================================================== */ /* -------------------------------------------------------------------------- LAYER 1 — raw ramp -------------------------------------------------------------------------- */ :root { color-scheme: light dark; /* Neutrals. Slight blue cast so they sit with the brand rather than fighting it. Replaces five different legacy near-blacks (#181818 #1E1E1E #1E0C0C #030B0F #170303) and four greys (#636363 #686868 #8F949D #AEAEAE). */ --c-n-000: #FFFFFF; --c-n-020: #E9EBF4; --c-n-025: #F5F6FB; --c-n-050: #E9EBF7; --c-n-100: #D6D9E6; --c-n-200: #C9CEDD; --c-n-300: #AFB5C9; --c-n-350: #A7AEC2; --c-n-400: #8C93A8; --c-n-450: #6B7284; --c-n-500: #6E7488; --c-n-600: #5F6577; --c-n-700: #4C5262; --c-n-750: #3C4356; --c-n-800: #1E2231; --c-n-850: #151824; --c-n-900: #14161F; --c-n-950: #0D0F16; /* Brand. #E7E8F9, #4054B2 and #1114AB are measured legacy values kept in the roles they already perform. The rest are derived. TODO(owner): confirm blue over cluster B purple #A34CBF or the cluster C navy+gold pairing. Changing hue = these eight lines only. */ --c-brand-050: #F2F3FC; --c-brand-100: #E7E8F9; /* legacy, 98 uses — tint band */ --c-brand-200: #C6CDFF; /* derived — dark hover ink, selection */ --c-brand-300: #A9B5FF; /* derived — dark brand ink */ --c-brand-600: #4054B2; /* legacy, 28 uses — large fill */ --c-brand-750: #2A3160; /* derived — dark selection ground */ --c-brand-800: #1114AB; /* legacy, 239 uses — links, headings */ --c-brand-900: #0B0D7B; /* derived — hover / active */ --c-brand-tint-dk: #1B2040; /* Accent. #D7A150 is a measured legacy value and is GRAPHIC ONLY on light (2.31:1 on white). --c-accent-800 is its text-safe counterpart. */ --c-accent-300: #E3B76C; --c-accent-500: #D7A150; --c-accent-800: #8A5411; /* Signal. #00CE1B (legacy, 2.13:1) and #D31A1A (4.50:1 on the deepest tint) are both replaced. */ --c-red-300: #FF9A9A; --c-red-700: #B4141A; --c-green-300: #5FD08A; --c-green-800: #0B6E2B; /* Band tints. Replace ten arbitrary legacy alpha hexes. */ --c-band-brand-lt: #EDEFF9; --c-band-brand-dk: #161A2A; --c-band-accent-lt: #FAF3E8; --c-band-accent-dk: #221C12; } /* -------------------------------------------------------------------------- LAYER 2a — semantic colour, LIGHT (the default) -------------------------------------------------------------------------- */ :root { --sn-canvas: var(--c-n-000); --sn-surface: var(--c-n-025); --sn-surface-2: var(--c-n-050); --sn-ink: var(--c-n-900); /* 18.04:1 on canvas */ --sn-ink-2: var(--c-n-700); /* 7.80:1 on canvas */ --sn-ink-3: var(--c-n-600); /* 5.81:1 on canvas */ --sn-brand: var(--c-brand-800); /* 12.27:1 on canvas */ --sn-brand-hover: var(--c-brand-900); /* 15.47:1 on canvas */ --sn-brand-fill: var(--c-brand-600); /* white on it = 6.71:1 */ --sn-brand-tint: var(--c-brand-100); /* ink on it = 14.87:1 */ --sn-on-brand: var(--c-n-000); /* 12.27:1 on --sn-brand */ --sn-on-brand-fill: var(--c-n-000); /* 6.71:1 on --sn-brand-fill */ --sn-accent: var(--c-accent-800); /* 6.26:1 on canvas */ --sn-accent-graphic: var(--c-accent-500); /* 2.31:1 — GRAPHIC ONLY */ --sn-on-accent-graphic: var(--c-n-900); /* 7.82:1 on the gold */ --sn-danger: var(--c-red-700); /* 6.87:1 on canvas */ --sn-on-danger: var(--c-n-000); /* 6.87:1 on --sn-danger */ --sn-success: var(--c-green-800); /* 6.40:1 on canvas */ --sn-on-success: var(--c-n-000); /* 6.40:1 on --sn-success */ --sn-line: var(--c-n-100); /* 1.41:1 — DECORATIVE ONLY */ --sn-line-strong: var(--c-n-300); /* 2.04:1 — DECORATIVE ONLY */ --sn-line-input: var(--c-n-500); /* 4.65:1 — every UI boundary */ --sn-focus: var(--c-brand-800); --sn-focus-halo: var(--c-n-000); --sn-selection-bg: var(--c-brand-200); --sn-selection-ink: var(--c-n-900); /* 11.66:1 */ --sn-band-brand: var(--c-band-brand-lt); --sn-band-accent: var(--c-band-accent-lt); --sn-band-neutral: var(--c-n-025); --sn-overlay: rgb(13 15 22 / 0.62); --sn-shadow-rgb: 17 20 171; --sn-shadow-a1: 0.06; --sn-shadow-a2: 0.10; --sn-shadow-a3: 0.16; --sn-shadow-ring: 0 0 0 0 transparent; /* no-op in light; becomes a visible hairline in dark, where a shadow alone is invisible */ } /* -------------------------------------------------------------------------- LAYER 2b — semantic colour, DARK Two blocks, identical bodies. 26 tokens. Nothing else is redefined. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sn-canvas: var(--c-n-950); --sn-surface: var(--c-n-850); --sn-surface-2: var(--c-n-800); --sn-ink: var(--c-n-020); /* 16.09:1 */ --sn-ink-2: var(--c-n-350); /* 8.64:1 */ --sn-ink-3: var(--c-n-400); /* 6.25:1 */ --sn-brand: var(--c-brand-300); /* 9.79:1 */ --sn-brand-hover: var(--c-brand-200); /* 12.38:1 */ --sn-brand-fill: var(--c-brand-300); --sn-brand-tint: var(--c-brand-tint-dk); --sn-on-brand: var(--c-n-950); /* 9.79:1 on --sn-brand */ --sn-on-brand-fill: var(--c-n-950); --sn-accent: var(--c-accent-300); /* 10.26:1 */ --sn-danger: var(--c-red-300); /* 9.43:1 */ --sn-on-danger: var(--c-n-950); --sn-success: var(--c-green-300); /* 9.91:1 */ --sn-on-success: var(--c-n-950); --sn-line: var(--c-n-800); --sn-line-strong: var(--c-n-750); --sn-line-input: var(--c-n-450); /* 3.98:1 */ --sn-focus: var(--c-brand-300); --sn-focus-halo: var(--c-n-950); --sn-selection-bg: var(--c-brand-750); --sn-selection-ink: var(--c-n-020); /* 10.34:1 */ --sn-band-brand: var(--c-band-brand-dk); --sn-band-accent: var(--c-band-accent-dk); --sn-band-neutral: var(--c-n-850); --sn-overlay: rgb(5 6 10 / 0.72); --sn-shadow-rgb: 0 0 0; --sn-shadow-a1: 0.40; --sn-shadow-a2: 0.50; --sn-shadow-a3: 0.60; --sn-shadow-ring: 0 0 0 1px var(--sn-line); } } :root[data-theme="dark"] { --sn-canvas: var(--c-n-950); --sn-surface: var(--c-n-850); --sn-surface-2: var(--c-n-800); --sn-ink: var(--c-n-020); --sn-ink-2: var(--c-n-350); --sn-ink-3: var(--c-n-400); --sn-brand: var(--c-brand-300); --sn-brand-hover: var(--c-brand-200); --sn-brand-fill: var(--c-brand-300); --sn-brand-tint: var(--c-brand-tint-dk); --sn-on-brand: var(--c-n-950); --sn-on-brand-fill: var(--c-n-950); --sn-accent: var(--c-accent-300); --sn-danger: var(--c-red-300); --sn-on-danger: var(--c-n-950); --sn-success: var(--c-green-300); --sn-on-success: var(--c-n-950); --sn-line: var(--c-n-800); --sn-line-strong: var(--c-n-750); --sn-line-input: var(--c-n-450); --sn-focus: var(--c-brand-300); --sn-focus-halo: var(--c-n-950); --sn-selection-bg: var(--c-brand-750); --sn-selection-ink: var(--c-n-020); --sn-band-brand: var(--c-band-brand-dk); --sn-band-accent: var(--c-band-accent-dk); --sn-band-neutral: var(--c-n-850); --sn-overlay: rgb(5 6 10 / 0.72); --sn-shadow-rgb: 0 0 0; --sn-shadow-a1: 0.40; --sn-shadow-a2: 0.50; --sn-shadow-a3: 0.60; --sn-shadow-ring: 0 0 0 1px var(--sn-line); } /* -------------------------------------------------------------------------- LAYER 2c — non-colour tokens. Declared once. Never redefined by a theme. -------------------------------------------------------------------------- */ :root { /* Type families ------------------------------------------------------- */ --sn-font-sans: "IBM Plex Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", Arial, sans-serif; --sn-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Script compensation. Overridden by the :lang() blocks below. These are baked into every --sn-fs-* and --sn-lh-* below; a component must NEVER multiply by them again. */ --sn-script-scale: 1; --sn-script-leading: 0; --sn-track-scale: 1; /* Fluid type scale — 390px to 1440px, verified at both endpoints. Every step is rem-led so text-only zoom still scales the page. --*--raw holds the script-neutral geometry; the final token is aliased here and REDECLARED in the :lang() blocks. It must be redeclared there rather than multiplied here: var() inside a custom property resolves on the element that DECLARES it, so a multiplier referenced on :root would always resolve against :root's value and never see :lang(ar). */ --sn-fs-2xs--raw: clamp(0.7500rem, 0.7268rem + 0.0952vw, 0.8125rem); --sn-fs-xs--raw: clamp(0.8125rem, 0.7893rem + 0.0952vw, 0.8750rem); --sn-fs-sm--raw: clamp(0.8750rem, 0.8286rem + 0.1905vw, 1.0000rem); --sn-fs-md--raw: clamp(1.0000rem, 0.9536rem + 0.1905vw, 1.1250rem); --sn-fs-lg--raw: clamp(1.1250rem, 1.0554rem + 0.2857vw, 1.3125rem); --sn-fs-xl--raw: clamp(1.2500rem, 1.1571rem + 0.3810vw, 1.5000rem); --sn-fs-2xl--raw: clamp(1.4375rem, 1.2750rem + 0.6667vw, 1.8750rem); --sn-fs-3xl--raw: clamp(1.6250rem, 1.3464rem + 1.1429vw, 2.3750rem); --sn-fs-4xl--raw: clamp(1.8750rem, 1.4571rem + 1.7143vw, 3.0000rem); --sn-fs-5xl--raw: clamp(2.1250rem, 1.6143rem + 2.0952vw, 3.5000rem); --sn-fs-6xl--raw: clamp(2.3750rem, 1.6786rem + 2.8571vw, 4.2500rem); --sn-fs-2xs: var(--sn-fs-2xs--raw); --sn-fs-xs: var(--sn-fs-xs--raw); --sn-fs-sm: var(--sn-fs-sm--raw); --sn-fs-md: var(--sn-fs-md--raw); --sn-fs-lg: var(--sn-fs-lg--raw); --sn-fs-xl: var(--sn-fs-xl--raw); --sn-fs-2xl: var(--sn-fs-2xl--raw); --sn-fs-3xl: var(--sn-fs-3xl--raw); --sn-fs-4xl: var(--sn-fs-4xl--raw); --sn-fs-5xl: var(--sn-fs-5xl--raw); --sn-fs-6xl: var(--sn-fs-6xl--raw); /* Line height — --*--raw is the Latin figure; :lang(ar) adds --sn-script-leading to each. Same redeclaration rule as above. */ --sn-lh-tight--raw: 1.08; --sn-lh-snug--raw: 1.18; --sn-lh-heading--raw: 1.28; --sn-lh-normal--raw: 1.50; --sn-lh-body--raw: 1.65; --sn-lh-loose--raw: 1.75; --sn-lh-tight: var(--sn-lh-tight--raw); --sn-lh-snug: var(--sn-lh-snug--raw); --sn-lh-heading: var(--sn-lh-heading--raw); --sn-lh-normal: var(--sn-lh-normal--raw); --sn-lh-body: var(--sn-lh-body--raw); --sn-lh-loose: var(--sn-lh-loose--raw); /* Weight */ --sn-wt-light: 300; --sn-wt-regular: 400; --sn-wt-medium: 500; --sn-wt-semibold: 600; --sn-wt-bold: 700; /* Tracking — :lang(ar) multiplies every one by --sn-track-scale: 0, so negative letter-spacing on Arabic is structurally impossible. Same redeclaration rule as above. */ --sn-track-tight--raw: -0.02em; --sn-track-snug--raw: -0.01em; --sn-track-wide--raw: 0.04em; --sn-track-tight: var(--sn-track-tight--raw); --sn-track-snug: var(--sn-track-snug--raw); --sn-track-none: 0em; --sn-track-wide: var(--sn-track-wide--raw); /* Space — fixed below 16px, fluid above */ --sn-space-3xs: 0.25rem; --sn-space-2xs: 0.50rem; --sn-space-xs: 0.75rem; --sn-space-sm: 1.00rem; --sn-space-md: clamp(1.1250rem, 0.9857rem + 0.5714vw, 1.5000rem); --sn-space-lg: clamp(1.5000rem, 1.3143rem + 0.7619vw, 2.0000rem); --sn-space-xl: clamp(2.0000rem, 1.6286rem + 1.5238vw, 3.0000rem); --sn-space-2xl: clamp(2.5000rem, 1.9429rem + 2.2857vw, 4.0000rem); --sn-space-3xl: clamp(3.0000rem, 2.2571rem + 3.0476vw, 5.0000rem); --sn-space-4xl: clamp(3.5000rem, 2.3857rem + 4.5714vw, 6.5000rem); --sn-gutter: clamp(1.2500rem, 0.7857rem + 1.9048vw, 2.5000rem); /* Containers */ --sn-w-prose: min(68ch, 44rem); --sn-w-text: 46rem; --sn-w-content: 72rem; --sn-w-wide: 84rem; --sn-w-full: 100%; /* Radii */ --sn-radius-0: 0; --sn-radius-xs: 4px; --sn-radius-sm: 6px; --sn-radius-md: 10px; --sn-radius-lg: 14px; --sn-radius-xl: 20px; --sn-radius-full: 999px; /* Borders */ --sn-border-hair: 1px; --sn-border-thick: 2px; --sn-border-accent: 6px; /* Shadows — colour and alpha are theme tokens, geometry is not */ --sn-shadow-1: var(--sn-shadow-ring), 0 1px 2px rgb(var(--sn-shadow-rgb) / var(--sn-shadow-a1)); --sn-shadow-2: var(--sn-shadow-ring), 0 2px 4px rgb(var(--sn-shadow-rgb) / var(--sn-shadow-a1)), 0 8px 20px -6px rgb(var(--sn-shadow-rgb) / var(--sn-shadow-a2)); --sn-shadow-3: var(--sn-shadow-ring), 0 4px 8px rgb(var(--sn-shadow-rgb) / var(--sn-shadow-a1)), 0 24px 48px -12px rgb(var(--sn-shadow-rgb) / var(--sn-shadow-a3)); /* Motion */ --sn-dur-1: 120ms; --sn-dur-2: 180ms; --sn-dur-3: 260ms; --sn-dur-4: 420ms; --sn-dur-5: 640ms; --sn-stagger: 60ms; --sn-ease-standard: cubic-bezier(0.2, 0, 0, 1); --sn-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sn-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --sn-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --sn-ease-emphasis: cubic-bezier(0.34, 1.4, 0.64, 1); /* Layers */ --sn-z-below: -1; --sn-z-base: 0; --sn-z-raised: 1; --sn-z-sticky: 10; --sn-z-header: 100; --sn-z-progress: 200; --sn-z-popover: 300; --sn-z-affordance:400; --sn-z-backdrop: 500; --sn-z-drawer: 600; --sn-z-dialog: 700; --sn-z-toast: 800; --sn-z-skiplink: 900; /* Direction. See LAYER 3 for the single [dir="rtl"] carve-out. */ --sn-flip: 1; --sn-start: left; --sn-end: right; } /* -------------------------------------------------------------------------- Script compensation. :lang() not [lang] — :lang(ar) matches ar-YE and :lang(en) matches the en-GB this site actually emits. The :lang(en) rule is a reset for BLOCKS of English inside Arabic documents (page 328 carries 14 English portfolio cards in an RTL page). -------------------------------------------------------------------------- */ :lang(ar) { --sn-script-scale: 1.075; /* +7.5% optical size */ --sn-script-leading: 0.14; /* +0.14 line-height everywhere */ --sn-track-scale: 0; /* all tracking resolves to 0em */ --sn-fs-2xs: calc(var(--sn-fs-2xs--raw) * var(--sn-script-scale)); --sn-fs-xs: calc(var(--sn-fs-xs--raw) * var(--sn-script-scale)); --sn-fs-sm: calc(var(--sn-fs-sm--raw) * var(--sn-script-scale)); --sn-fs-md: calc(var(--sn-fs-md--raw) * var(--sn-script-scale)); --sn-fs-lg: calc(var(--sn-fs-lg--raw) * var(--sn-script-scale)); --sn-fs-xl: calc(var(--sn-fs-xl--raw) * var(--sn-script-scale)); --sn-fs-2xl: calc(var(--sn-fs-2xl--raw) * var(--sn-script-scale)); --sn-fs-3xl: calc(var(--sn-fs-3xl--raw) * var(--sn-script-scale)); --sn-fs-4xl: calc(var(--sn-fs-4xl--raw) * var(--sn-script-scale)); --sn-fs-5xl: calc(var(--sn-fs-5xl--raw) * var(--sn-script-scale)); --sn-fs-6xl: calc(var(--sn-fs-6xl--raw) * var(--sn-script-scale)); --sn-lh-tight: calc(var(--sn-lh-tight--raw) + var(--sn-script-leading)); --sn-lh-snug: calc(var(--sn-lh-snug--raw) + var(--sn-script-leading)); --sn-lh-heading: calc(var(--sn-lh-heading--raw) + var(--sn-script-leading)); --sn-lh-normal: calc(var(--sn-lh-normal--raw) + var(--sn-script-leading)); --sn-lh-body: calc(var(--sn-lh-body--raw) + var(--sn-script-leading)); --sn-lh-loose: calc(var(--sn-lh-loose--raw) + var(--sn-script-leading)); --sn-track-tight: calc(var(--sn-track-tight--raw) * var(--sn-track-scale)); --sn-track-snug: calc(var(--sn-track-snug--raw) * var(--sn-track-scale)); --sn-track-wide: calc(var(--sn-track-wide--raw) * var(--sn-track-scale)); hyphens: none; word-spacing: 0.02em; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; } /* Reset for BLOCKS of English inside an Arabic document. page-328 carries 14 English portfolio cards inside an RTL page; those get
. NOTE: font-size and line-height inherit as COMPUTED values, so a nested block only picks this up if it re-asserts font-size / line-height from a token. base.css does exactly that on .sn-prose, .sn-project-row, headings and every type utility. */ :lang(en) { --sn-script-scale: 1; --sn-script-leading: 0; --sn-track-scale: 1; --sn-fs-2xs: var(--sn-fs-2xs--raw); --sn-fs-xs: var(--sn-fs-xs--raw); --sn-fs-sm: var(--sn-fs-sm--raw); --sn-fs-md: var(--sn-fs-md--raw); --sn-fs-lg: var(--sn-fs-lg--raw); --sn-fs-xl: var(--sn-fs-xl--raw); --sn-fs-2xl: var(--sn-fs-2xl--raw); --sn-fs-3xl: var(--sn-fs-3xl--raw); --sn-fs-4xl: var(--sn-fs-4xl--raw); --sn-fs-5xl: var(--sn-fs-5xl--raw); --sn-fs-6xl: var(--sn-fs-6xl--raw); --sn-lh-tight: var(--sn-lh-tight--raw); --sn-lh-snug: var(--sn-lh-snug--raw); --sn-lh-heading: var(--sn-lh-heading--raw); --sn-lh-normal: var(--sn-lh-normal--raw); --sn-lh-body: var(--sn-lh-body--raw); --sn-lh-loose: var(--sn-lh-loose--raw); --sn-track-tight: var(--sn-track-tight--raw); --sn-track-snug: var(--sn-track-snug--raw); --sn-track-wide: var(--sn-track-wide--raw); hyphens: manual; word-spacing: normal; } /* Inline Latin run that must return to Latin metrics inside Arabic prose. Rare — an inline Latin word should normally match the surrounding Arabic optical size. */ .sn-lat { font-size: calc(1em / var(--sn-script-scale, 1)); } /* -------------------------------------------------------------------------- LAYER 3 — scopes -------------------------------------------------------------------------- */ /* The ONLY [dir="rtl"] rule permitted in the codebase. It declares custom properties and nothing else. transform / translate / background-position / gradient direction / SVG have no logical equivalent; this is how they are handled. A second such rule is a design-review question, not a code change. */ /* stylelint-disable-next-line selector-disallowed-list */ [dir="rtl"] { --sn-flip: -1; --sn-start: right; --sn-end: left; } /* Inverted panel — deliberately ALWAYS dark, in both themes. Flipping it in dark mode would produce a white slab on a near-black page. In dark mode it only needs to separate from the ground, which is one token plus a hairline. */ .sn-invert { color-scheme: dark; --sn-canvas: var(--c-n-950); --sn-surface: var(--c-n-850); --sn-surface-2: var(--c-n-800); --sn-ink: var(--c-n-025); /* 17.74:1 */ --sn-ink-2: var(--c-n-200); /* 12.17:1 */ --sn-ink-3: var(--c-n-350); /* 8.64:1 */ --sn-brand: var(--c-brand-300); /* 9.79:1 */ --sn-brand-hover: var(--c-brand-200); --sn-brand-fill: var(--c-brand-300); --sn-brand-tint: var(--c-brand-tint-dk); --sn-on-brand: var(--c-n-950); /* 9.79:1 on --sn-brand */ --sn-on-brand-fill: var(--c-n-950); --sn-accent: var(--c-accent-300); /* 10.26:1 */ --sn-danger: var(--c-red-300); --sn-on-danger: var(--c-n-950); --sn-success: var(--c-green-300); --sn-on-success: var(--c-n-950); --sn-line: var(--c-n-800); --sn-line-strong: var(--c-n-750); --sn-line-input: var(--c-n-450); /* 3.98:1 */ --sn-focus: var(--c-brand-300); --sn-focus-halo: var(--c-n-950); --sn-selection-bg: var(--c-brand-750); --sn-selection-ink: var(--c-n-020); --sn-band-brand: var(--c-band-brand-dk); --sn-band-accent: var(--c-band-accent-dk); --sn-band-neutral: var(--c-n-850); --sn-shadow-rgb: 0 0 0; --sn-shadow-a1: 0.40; --sn-shadow-a2: 0.50; --sn-shadow-a3: 0.60; background-color: var(--sn-canvas); color: var(--sn-ink); } /* Dark-theme delta for the inverted panel: ONE token plus a hairline, so it still reads as a distinct panel against a near-black page. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sn-invert { --sn-canvas: var(--c-n-800); /* ink 14.65:1, brand 8.09:1 */ /* --sn-line-input, not --sn-line-strong: this border is what separates the panel from the page (the two grounds are only 1.21:1 apart), so WCAG 1.4.11 applies. #6B7284 = 3.29:1 vs panel, 3.98:1 vs page. */ border: var(--sn-border-hair) solid var(--sn-line-input); } } :root[data-theme="dark"] .sn-invert { --sn-canvas: var(--c-n-800); border: var(--sn-border-hair) solid var(--sn-line-input); } /* Tinted bands. Replaces ten arbitrary legacy alpha hexes with three knowable grounds. All ink tokens clear 4.89:1 on every one. */ .sn-band { background-color: var(--sn-band-neutral); } .sn-band[data-band="brand"] { background-color: var(--sn-band-brand); } .sn-band[data-band="accent"] { background-color: var(--sn-band-accent); } .sn-band[data-band="invert"] { background-color: var(--sn-canvas); } /* -------------------------------------------------------------------------- Reduced motion. 1ms rather than 0s so transitionend/animationend still fire and JS that awaits them does not stall. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --sn-dur-1: 1ms; --sn-dur-2: 1ms; --sn-dur-3: 1ms; --sn-dur-4: 1ms; --sn-dur-5: 1ms; --sn-stagger: 0ms; --sn-ease-emphasis: linear; } } /* ========================================================================== Front-page field tokens. Appended after the base blocks so the cascade order (light -> system dark -> explicit dark) is preserved. Every value below was measured, not chosen by eye. ========================================================================== */ :root { /* Warm paper. Faintly warm so the ground reads as chosen, not defaulted. ink 17.28:1 · ink-2 7.63:1 · brand 11.75:1 */ --sn-canvas: #FBFAF7; /* The ultramarine field is the site's own authored brand colour. */ --sn-hero-field: #1114AB; --sn-hero-ink: #FFFFFF; /* 12.27:1 on field */ --sn-hero-echo: #BFC4EE; /* 7.21:1 on field */ --sn-hero-rail: #A8AEE6; /* 5.76:1 on field */ --sn-hero-rule: rgba(255,255,255,.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* On a dark page the field drops deeper so it still reads as a field rather than as a glowing panel. */ --sn-hero-field: #0A0B5E; --sn-hero-ink: #FFFFFF; /* 17.18:1 */ --sn-hero-echo: #AEB4E8; /* 8.58:1 */ --sn-hero-rail: #9AA1E0; /* 6.99:1 */ --sn-hero-rule: rgba(255,255,255,.28); } } :root[data-theme="dark"] { --sn-hero-field: #0A0B5E; --sn-hero-ink: #FFFFFF; --sn-hero-echo: #AEB4E8; --sn-hero-rail: #9AA1E0; --sn-hero-rule: rgba(255,255,255,.28); }