/* ================================================================================ Fitune Design System — tokens.css Version: v6 (Foundation v6 rebuild · document line v8) · 2026 -------------------------------------------------------------------------------- FOUR-LAYER TOKEN ARCHITECTURE (resolution order: Semantics -> Mode -> Brand -> Primitives) Layer 1 · Primitives (:root) raw values, no semantics Layer 2 · Brand ([data-product]/[data-tenant]) Fitune defaults + tenant overrides Layer 3 · Mode ([data-mode]) light / dark resolution Layer 4 · Semantics (:root, .t-*) roles components consume Components consume Layer 4 only. Each layer references only the layer below it. ACTIVATION CONTRACT (attributes on ): Mode is resolved before first paint by JS and written to data-mode (CSS never resolves mode). Admin: provider preference -> light fallback. Webapp: end-user (localStorage) -> provider default (--brand-mode-default, a resolver input, never a CSS reference) -> light fallback. Sourced exclusively from the closed DESIGN_SYSTEM_v8_section*.md documents (Primitives §2, Brand §3, Mode §4, Semantics §5). The legacy v7 tokens.css was NOT used as a value source. BLOCKED / FLAGGED TOKENS (open decisions — see end-of-file summary + OPEN_QUESTIONS.md): - Tenant accent derivation method (Q1): the 8 derived accent steps per tenant are emitted as TODO placeholders in the tenant override block, never guessed. - Second-hue interactive roles --color-text-accent / --color-interactive-accent-* (Q11): no --mode-* escalon exists; left pointing at the light-only second-hue primitive, flagged, not re-pointed (would defeat the dark bridge). ================================================================================ */ /* ================================================================================ LAYER 1 · PRIMITIVES Raw values. Components never consume these directly. Named literally (color) or by role/scale-position (typography, scalars). Pure-black eliminated; pure-white retained for elevation hierarchy. ================================================================================ */ :root { /* ------------------------------------------------------------------------------ §2.2.1 · electric-blue — accent family (11 steps, oklch-derived) Fitune brand accent. Chroma peaks at 800, not 500 (intentional). 50 ~ white; 950 is actively blue, not neutral. ------------------------------------------------------------------------------ */ --primitive-color-electric-blue-50: #F8FAFF; --primitive-color-electric-blue-100: #EBF0FF; --primitive-color-electric-blue-200: #D6E1FE; --primitive-color-electric-blue-300: #A9C2FF; --primitive-color-electric-blue-400: #7CA2FF; --primitive-color-electric-blue-500: #4D7FFF; --primitive-color-electric-blue-600: #3D6FEF; --primitive-color-electric-blue-700: #2E5FE0; --primitive-color-electric-blue-800: #1A3DCC; --primitive-color-electric-blue-900: #081990; --primitive-color-electric-blue-950: #020151; /* ------------------------------------------------------------------------------ §2.2.2 · ink-navy — dominant neutral family (11 steps) Text in light, canvas/surface in dark. Absorbs the "default action button" (workhorse) role. Steps 500/600/700 carry the documented spacing fix. ------------------------------------------------------------------------------ */ --primitive-color-ink-navy-50: #F2F7FF; --primitive-color-ink-navy-100: #E5ECF8; --primitive-color-ink-navy-200: #CED8E9; --primitive-color-ink-navy-300: #ADBBD4; --primitive-color-ink-navy-400: #8799B9; --primitive-color-ink-navy-500: #66799C; --primitive-color-ink-navy-600: #4A5E82; --primitive-color-ink-navy-700: #394D71; --primitive-color-ink-navy-800: #1A2A4F; --primitive-color-ink-navy-900: #000A24; --primitive-color-ink-navy-950: #000105; /* ------------------------------------------------------------------------------ §2.2.3 · misty — light neutral family (intentionally bounded to 5 steps) Light-canvas language only. All five are stakeholder anchors taken literally. No misty-500/700 by design (would collide with ink-navy). ------------------------------------------------------------------------------ */ --primitive-color-misty-50: #FAFAFA; --primitive-color-misty-100: #F4F6FA; --primitive-color-misty-200: #EAEEF2; --primitive-color-misty-300: #D6DDE5; --primitive-color-misty-400: #B8C2CC; /* ------------------------------------------------------------------------------ §2.2.4 · ink-navy-alpha — neutral alpha layer (6 stakeholder-verbatim tokens) Blending-safe navy neutrals (rgba(0,10,36,...)) for borders/dividers/muted text/overlays on LIGHT backgrounds. Replaces v7 black-alpha. ------------------------------------------------------------------------------ */ --primitive-color-ink-navy-alpha-04: rgba(0, 10, 36, 0.04); /* Card delineation */ --primitive-color-ink-navy-alpha-06: rgba(0, 10, 36, 0.06); /* Neutral tag background */ --primitive-color-ink-navy-alpha-10: rgba(0, 10, 36, 0.10); /* Hairline rules, dividers */ --primitive-color-ink-navy-alpha-20: rgba(0, 10, 36, 0.20); /* Input borders */ --primitive-color-ink-navy-alpha-40: rgba(0, 10, 36, 0.40); /* Whisper / muted labels */ --primitive-color-ink-navy-alpha-70: rgba(0, 10, 36, 0.70); /* Body text on light */ /* ------------------------------------------------------------------------------ §2.2.5 · success — positive sentiment (11 steps; anchor 800; 50-300 chroma-boosted) ------------------------------------------------------------------------------ */ --primitive-color-success-50: #F1FAED; --primitive-color-success-100: #E2F3D9; --primitive-color-success-200: #CEE5C2; --primitive-color-success-300: #B4CDA8; --primitive-color-success-400: #94B383; --primitive-color-success-500: #749960; --primitive-color-success-600: #598042; --primitive-color-success-700: #3F6824; --primitive-color-success-800: #2F5711; --primitive-color-success-900: #143000; --primitive-color-success-950: #061500; /* ------------------------------------------------------------------------------ §2.2.6 · warning — at-risk sentiment (11 steps; anchor 500 amber) ------------------------------------------------------------------------------ */ --primitive-color-warning-50: #FBF6EF; --primitive-color-warning-100: #F9EBD6; --primitive-color-warning-200: #F0D9B7; --primitive-color-warning-300: #DEBF90; --primitive-color-warning-400: #C8A164; --primitive-color-warning-500: #B8893A; --primitive-color-warning-600: #936B26; --primitive-color-warning-700: #75541B; --primitive-color-warning-800: #593E0F; --primitive-color-warning-900: #372300; --primitive-color-warning-950: #190E00; /* ------------------------------------------------------------------------------ §2.2.7 · danger — critical sentiment (11 steps; anchor 700; mid steps soft coral) ------------------------------------------------------------------------------ */ --primitive-color-danger-50: #FFF4F2; --primitive-color-danger-100: #F8E9E6; --primitive-color-danger-200: #E8D8D5; --primitive-color-danger-300: #E2B9B1; --primitive-color-danger-400: #D59589; --primitive-color-danger-500: #C67162; --primitive-color-danger-600: #B84C3B; --primitive-color-danger-700: #A8200D; --primitive-color-danger-800: #810E00; --primitive-color-danger-900: #500500; --primitive-color-danger-950: #270100; /* ------------------------------------------------------------------------------ §2.2.8 · info — informational sentiment (11 steps; seed 600, no stakeholder anchor; hue deliberately distant from electric-blue) ------------------------------------------------------------------------------ */ --primitive-color-info-50: #F0F8FF; --primitive-color-info-100: #E5EEF6; --primitive-color-info-200: #C7E0F4; --primitive-color-info-300: #A1CAEA; --primitive-color-info-400: #74AFDB; --primitive-color-info-500: #4494CB; --primitive-color-info-600: #0284C7; --primitive-color-info-700: #006093; --primitive-color-info-800: #004870; --primitive-color-info-900: #002A45; --primitive-color-info-950: #001221; /* ------------------------------------------------------------------------------ §2.2.9 · mint — wellness decorative (11 steps; anchor 100) ------------------------------------------------------------------------------ */ --primitive-color-mint-50: #F4FDF7; --primitive-color-mint-100: #E0F0E5; --primitive-color-mint-200: #D0E2D5; --primitive-color-mint-300: #B5CBBC; --primitive-color-mint-400: #95AF9E; --primitive-color-mint-500: #789481; --primitive-color-mint-600: #607A69; --primitive-color-mint-700: #4C6153; --primitive-color-mint-800: #39483E; --primitive-color-mint-900: #222A24; --primitive-color-mint-950: #0D120F; /* ------------------------------------------------------------------------------ §2.2.10 · lavender — reflective decorative (11 steps; anchor 100) ------------------------------------------------------------------------------ */ --primitive-color-lavender-50: #FBF9FF; --primitive-color-lavender-100: #E8E2F5; --primitive-color-lavender-200: #DFD8EE; --primitive-color-lavender-300: #C7BFD9; --primitive-color-lavender-400: #ACA2C0; --primitive-color-lavender-500: #9186A6; --primitive-color-lavender-600: #776D8B; --primitive-color-lavender-700: #5E566E; --primitive-color-lavender-800: #464051; --primitive-color-lavender-900: #29262F; --primitive-color-lavender-950: #110F14; /* ------------------------------------------------------------------------------ §2.2.11 · sky — trust decorative (11 steps; anchor 100) ------------------------------------------------------------------------------ */ --primitive-color-sky-50: #F6FBFF; --primitive-color-sky-100: #DCEAF7; --primitive-color-sky-200: #CFDFED; --primitive-color-sky-300: #B4C7D8; --primitive-color-sky-400: #94ABC0; --primitive-color-sky-500: #778FA6; --primitive-color-sky-600: #5F768A; --primitive-color-sky-700: #4B5D6E; --primitive-color-sky-800: #394551; --primitive-color-sky-900: #21292F; --primitive-color-sky-950: #0D1114; /* ------------------------------------------------------------------------------ §2.2.12 · peach — welcome decorative (11 steps; anchor 100) ------------------------------------------------------------------------------ */ --primitive-color-peach-50: #FFF9F6; --primitive-color-peach-100: #FFE5D9; --primitive-color-peach-200: #F3D5C8; --primitive-color-peach-300: #DFBCAB; --primitive-color-peach-400: #C69D8A; --primitive-color-peach-500: #AD816C; --primitive-color-peach-600: #916855; --primitive-color-peach-700: #725243; --primitive-color-peach-800: #543E33; --primitive-color-peach-900: #31241E; --primitive-color-peach-950: #160F0C; /* ------------------------------------------------------------------------------ §2.2.13 · coral — community decorative (11 steps; anchor 100) ------------------------------------------------------------------------------ */ --primitive-color-coral-50: #FFF8F7; --primitive-color-coral-100: #FFD9D2; --primitive-color-coral-200: #FCD1C9; --primitive-color-coral-300: #E9B6AD; --primitive-color-coral-400: #D2978C; --primitive-color-coral-500: #B9796E; --primitive-color-coral-600: #9C6157; --primitive-color-coral-700: #7B4D45; --primitive-color-coral-800: #5B3A34; --primitive-color-coral-900: #35221F; --primitive-color-coral-950: #170E0C; /* ------------------------------------------------------------------------------ §2.2.14 · pure-white — single retained pure token (NOT redundant with misty-50) Drives elevated-surface hierarchy against the misty-100 canvas. ------------------------------------------------------------------------------ */ --primitive-color-pure-white: #FFFFFF; /* ------------------------------------------------------------------------------ §2.3 · TYPE SCALE (non-color) Two tracks (product 4px grid + brand display) sharing one primitive set, separated by role at the Semantic layer. ------------------------------------------------------------------------------ */ /* §2.3.2 Font size — product track (2xs-6xl) + brand track (xl5, 7xl, 8xl) */ --primitive-font-size-2xs: 10px; --primitive-font-size-xs: 12px; --primitive-font-size-sm: 14px; --primitive-font-size-md: 16px; --primitive-font-size-lg: 18px; --primitive-font-size-xl: 20px; --primitive-font-size-xl5: 22px; /* brand · h3 (between xl and 2xl) */ --primitive-font-size-2xl: 24px; --primitive-font-size-3xl: 28px; --primitive-font-size-4xl: 32px; --primitive-font-size-5xl: 36px; /* product · also brand h2 (reuses) */ --primitive-font-size-6xl: 40px; --primitive-font-size-7xl: 56px; /* brand · h1 */ --primitive-font-size-8xl: 96px; /* brand · display */ /* §2.3.3 Font weight (5 weights) */ --primitive-font-weight-light: 300; --primitive-font-weight-regular: 400; --primitive-font-weight-medium: 500; --primitive-font-weight-semibold: 600; --primitive-font-weight-bold: 700; /* §2.3.4 Line height (4 role-named values) */ --primitive-line-height-display: 1.10; --primitive-line-height-heading: 1.30; --primitive-line-height-body: 1.50; --primitive-line-height-caption: 1.60; /* §2.3.5 Letter spacing (4 carried + eyebrow new) */ --primitive-letter-spacing-display: -0.03em; --primitive-letter-spacing-heading: -0.02em; --primitive-letter-spacing-body: 0.01em; --primitive-letter-spacing-caption: 0.03em; --primitive-letter-spacing-eyebrow: 0.20em; /* new — uppercase kicker/overline */ /* ------------------------------------------------------------------------------ §2.4 · SPACING (non-color) — 22-step 4px-based ramp (value ~ step x 4) Fractional steps drop the decimal (05/15/35/45). ------------------------------------------------------------------------------ */ --primitive-spacing-0: 0px; --primitive-spacing-05: 2px; --primitive-spacing-1: 4px; --primitive-spacing-15: 6px; --primitive-spacing-2: 8px; --primitive-spacing-3: 12px; --primitive-spacing-35: 14px; --primitive-spacing-4: 16px; --primitive-spacing-45: 18px; --primitive-spacing-5: 20px; --primitive-spacing-6: 24px; --primitive-spacing-7: 28px; --primitive-spacing-8: 32px; --primitive-spacing-9: 36px; --primitive-spacing-10: 40px; --primitive-spacing-12: 48px; --primitive-spacing-14: 56px; --primitive-spacing-16: 64px; --primitive-spacing-20: 80px; --primitive-spacing-24: 96px; --primitive-spacing-28: 112px; --primitive-spacing-32: 128px; /* ------------------------------------------------------------------------------ §2.5 · RADIUS (non-color) — 8-step T-shirt scale ------------------------------------------------------------------------------ */ --primitive-radius-none: 0px; --primitive-radius-xs: 2px; --primitive-radius-sm: 4px; --primitive-radius-md: 8px; --primitive-radius-lg: 12px; --primitive-radius-xl: 16px; --primitive-radius-2xl: 20px; --primitive-radius-full: 9999px; /* ------------------------------------------------------------------------------ §2.6 · STROKE WIDTH (non-color) — 4 widths, drives both border AND ring ------------------------------------------------------------------------------ */ --primitive-stroke-1: 1px; --primitive-stroke-15: 1.5px; --primitive-stroke-2: 2px; --primitive-stroke-4: 4px; /* ------------------------------------------------------------------------------ §2.7 · ICON SIZE (non-color) — 5 steps, sized for Phosphor (square) ------------------------------------------------------------------------------ */ --primitive-icon-size-xs: 12px; --primitive-icon-size-sm: 14px; --primitive-icon-size-md: 16px; --primitive-icon-size-lg: 18px; --primitive-icon-size-xl: 20px; /* ------------------------------------------------------------------------------ §2.8 · MOTION (non-color) — durations + easings (crude pieces only) Spring is RETAINED as a primitive but must NOT be consumed (§9.4 anti-pattern). ------------------------------------------------------------------------------ */ --primitive-duration-instant: 50ms; --primitive-duration-fast: 100ms; --primitive-duration-normal: 200ms; --primitive-duration-slow: 300ms; --primitive-duration-expressive: 400ms; --primitive-duration-slowest: 600ms; --primitive-easing-linear: cubic-bezier(0, 0, 1, 1); --primitive-easing-ease-in: cubic-bezier(0.4, 0, 1, 1); --primitive-easing-ease-out: cubic-bezier(0, 0, 0.2, 1); --primitive-easing-ease-in-out: cubic-bezier(0.4, 0, 0.6, 1); --primitive-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ------------------------------------------------------------------------------ §2.9 · Z-INDEX (non-color) — 12-step sparse ordering ladder ------------------------------------------------------------------------------ */ --primitive-z-0: 0; --primitive-z-10: 10; --primitive-z-20: 20; --primitive-z-30: 30; --primitive-z-100: 100; --primitive-z-200: 200; --primitive-z-300: 300; --primitive-z-400: 400; --primitive-z-500: 500; --primitive-z-600: 600; --primitive-z-700: 700; --primitive-z-9999: 9999; /* ------------------------------------------------------------------------------ §2.10 · ELEVATION (non-color, Mode-aware) — 6 LIGHT-MODE neutral shadows Re-tinted from pure-black to Ink-Navy alpha. Dark values live in the Mode layer (§4.5). Brand/glow shadows were removed (Q7, closed: removed in §5.3). ------------------------------------------------------------------------------ */ --primitive-shadow-neutral-xs: 0px 1px 2px rgba(0, 10, 36, 0.04); --primitive-shadow-neutral-sm: 0px 1px 2px rgba(0, 10, 36, 0.04), 0px 1px 3px rgba(0, 10, 36, 0.04); --primitive-shadow-neutral-md: 0px 4px 12px rgba(0, 10, 36, 0.08), 0px 2px 4px rgba(0, 10, 36, 0.04); --primitive-shadow-neutral-lg: 0px 8px 24px rgba(0, 10, 36, 0.12), 0px 3px 8px rgba(0, 10, 36, 0.06); --primitive-shadow-neutral-xl: 0px 16px 40px rgba(0, 10, 36, 0.16), 0px 4px 12px rgba(0, 10, 36, 0.08); --primitive-shadow-neutral-2xl: 0px 24px 56px rgba(0, 10, 36, 0.20), 0px 8px 20px rgba(0, 10, 36, 0.10); } /* ================================================================================ LAYER 2 · BRAND Aliases primitives into brand-identity tokens. Activated by [data-product] and [data-tenant]. Holds the tenant-overridable accent family, the flat secondary, the focus ring, and the two font tokens. Base (light-reference) values only — the Mode layer resolves light/dark on top. Decorative surfaces are NOT here (never tenant-overridable). ================================================================================ */ /* -------------------------------------------------------------------------------- §3.4 / §3.6 · Fitune defaults — Admin and un-themed webapp. The accent family resolves to Electric Blue. --brand-secondary is interim ink-navy-900 (a neutral brand-navy, not an accent tint — mode-critical, resolved by Mode §4.3.5). --brand-focus-ring follows the accent. -------------------------------------------------------------------------------- */ :root, [data-product="admin"], [data-product="webapp"] { --brand-accent: var(--primitive-color-electric-blue-500); /* #4D7FFF */ --brand-accent-strong: var(--primitive-color-electric-blue-600); /* #3D6FEF · CTA hover */ --brand-accent-stronger: var(--primitive-color-electric-blue-700); /* #2E5FE0 · CTA active */ --brand-accent-muted: var(--primitive-color-electric-blue-200); /* #D6E1FE · CTA disabled */ --brand-accent-soft: var(--primitive-color-electric-blue-200); /* #D6E1FE · strong tint */ --brand-accent-soft-hover: var(--primitive-color-electric-blue-300); /* #A9C2FF */ --brand-accent-softest: var(--primitive-color-electric-blue-100); /* #EBF0FF · subtle tint */ --brand-accent-border: var(--primitive-color-electric-blue-400); /* #7CA2FF */ --brand-accent-border-subtle: var(--primitive-color-electric-blue-200); /* #D6E1FE */ --brand-focus-ring: var(--brand-accent); /* follows the accent */ --brand-secondary: var(--primitive-color-ink-navy-900); /* interim, §3.4 note 2 */ /* §3 / §5.4 · Font tokens (Brand + Semantics). Fitune default = Plus Jakarta Sans for both. Tenant-overridable in webapp from a closed catalog. */ --brand-font-heading: 'Plus Jakarta Sans', sans-serif; --brand-font-body: 'Plus Jakarta Sans', sans-serif; } /* -------------------------------------------------------------------------------- §3.6 · Tenant override (webapp only) — closed set of 5 (§1.5): 1. Primary color (hex) -> --brand-accent (derives 8 further accent tokens) 2. Secondary color (hex) -> --brand-secondary (flat, no states) 3. Heading font -> --brand-font-heading 4. Body font -> --brand-font-body 5. Default mode -> --brand-mode-default (resolver INPUT only — never a CSS var()) Decorative surfaces are fixed and never appear here. The 8 derived accent steps are emitted as TODO placeholders: the derivation METHOD (color-mix(in oklch, ...) vs alpha vs lookup) is owned by the frontend team and is unresolved (OPEN_QUESTIONS.md Q1). Per the brief, a value that is not yet decided is emitted as a clearly-commented placeholder, never guessed. Example tenant slug "berna-studio" shown. -------------------------------------------------------------------------------- */ [data-product="webapp"][data-tenant="berna-studio"] { --brand-accent: #EB9C19; /* panel "Primary colour" (base hex, as-is) */ /* The 8 derived steps. Recommended derivation: color-mix(in oklch, var(--brand-accent) ...) against the relative positions fixed in §3.6 (strong = darker/hover, stronger = active, muted = desaturated+lightened, soft/soft-hover/softest = tints, border/border-subtle = mid-tones). Final formula = frontend decision. */ --brand-accent-strong: /* TODO: blocked on Q1 (accent derivation method) — one step darker (hover) */ ; --brand-accent-stronger: /* TODO: blocked on Q1 — two steps darker (active) */ ; --brand-accent-muted: /* TODO: blocked on Q1 — desaturated + lightened toward canvas (disabled/loading) */ ; --brand-accent-soft: /* TODO: blocked on Q1 — strong tint (low chroma, high lightness) */ ; --brand-accent-soft-hover: /* TODO: blocked on Q1 — one step less light than soft */ ; --brand-accent-softest: /* TODO: blocked on Q1 — subtle tint (very low chroma, very high lightness) */ ; --brand-accent-border: /* TODO: blocked on Q1 — mid-tone (between soft and base) */ ; --brand-accent-border-subtle: /* TODO: blocked on Q1 — between softest and soft */ ; --brand-secondary: #8B5306; /* panel "Secondary colour" (flat, used as-is) */ /* --brand-focus-ring inherits var(--brand-accent) — now the tenant hue. */ /* --brand-font-heading / --brand-font-body: set from the tenant's catalog selection. */ /* --brand-mode-default: read by the boot resolver (resolution plane); NOT emitted as a CSS var. */ } /* ================================================================================ LAYER 3 · MODE Resolves light vs dark on top of Brand + Primitives. Activated by [data-mode]. Consumes only Brand and Primitives (and the Mode-owned --mode-alpha-light-* tier). Both branches are always defined explicitly — CSS never falls back across modes. Covers: neutral (§4.2), brand (§4.3), sentiment + decorative (§4.4), elevation (§4.5). ================================================================================ */ /* -------------------------------------------------------------------------------- §4.2 / §4.3 / §4.4 / §4.5 · LIGHT branch -------------------------------------------------------------------------------- */ [data-mode="light"] { /* §4.2.3 Backgrounds */ --mode-bg-page: var(--primitive-color-misty-100); /* #F4F6FA */ --mode-bg-subtle: var(--primitive-color-misty-200); /* #EAEEF2 */ --mode-bg-inverse: var(--primitive-color-ink-navy-900);/* #000A24 */ /* §4.2.4 Surfaces */ --mode-surface-default: var(--primitive-color-pure-white); /* #FFFFFF */ --mode-surface-raised: var(--primitive-color-pure-white); /* #FFFFFF — elevation by shadow in light */ --mode-surface-sunken: var(--primitive-color-misty-200); /* #EAEEF2 */ --mode-surface-inverse: var(--primitive-color-ink-navy-900); /* #000A24 */ /* §4.2.5 Text */ --mode-text-primary: var(--primitive-color-ink-navy-900); /* #000A24 */ --mode-text-secondary: var(--primitive-color-ink-navy-700); /* #394D71 */ --mode-text-tertiary: var(--primitive-color-ink-navy-500); /* #66799C */ --mode-text-disabled: var(--mode-border-strong); /* shares the muted tier */ --mode-text-inverse: var(--primitive-color-misty-100); /* #F4F6FA */ /* §4.2.6 Borders and dividers — light = ink-navy-alpha primitives verbatim */ --mode-border-subtle: var(--primitive-color-ink-navy-alpha-10); /* hairline/divider */ --mode-border-default: var(--primitive-color-ink-navy-alpha-20); /* control border */ --mode-border-strong: var(--primitive-color-ink-navy-alpha-40); /* muted tier */ --mode-border-inverse: var(--primitive-color-ink-navy-alpha-20); /* over inverse */ /* §4.2.8 Neutral interactive state washes */ --mode-state-hover-wash: var(--primitive-color-ink-navy-alpha-06); /* rgba(0,10,36,0.06) */ --mode-state-active-wash: var(--primitive-color-ink-navy-alpha-10); /* rgba(0,10,36,0.10) */ /* §4.2.9 Overlay scrim — navy channel in light */ --mode-overlay-scrim-subtle: rgba(0, 10, 36, 0.20); --mode-overlay-scrim-default: rgba(0, 10, 36, 0.40); --mode-overlay-scrim-strong: rgba(0, 10, 36, 0.60); /* §4.3.3 Accent — interactive group (references Brand tokens; same both modes, Option X) */ --mode-accent: var(--brand-accent); /* CTA fill, link, focus base */ --mode-accent-hover: var(--brand-accent-strong); --mode-accent-active: var(--brand-accent-stronger); --mode-accent-disabled: var(--brand-accent-muted); /* §4.3.3 Accent — border group (references Brand tokens; invariant) */ --mode-accent-border: var(--brand-accent-border); --mode-accent-border-subtle: var(--brand-accent-border-subtle); /* §4.3.3 Accent — surface group (Brand tint in light) */ --mode-accent-surface: var(--brand-accent-soft); --mode-accent-surface-hover: var(--brand-accent-soft-hover); --mode-accent-surface-subtle: var(--brand-accent-softest); /* §4.3.4 Workhorse action button (Ink Navy, bypasses Brand) */ --mode-workhorse-fill: var(--primitive-color-ink-navy-900); /* #000A24 */ --mode-workhorse-fill-hover: var(--primitive-color-ink-navy-800); /* #1A2A4F */ --mode-workhorse-fill-active: var(--primitive-color-ink-navy-700); /* #394D71 */ --mode-workhorse-text: var(--mode-text-inverse); /* #F4F6FA */ /* §4.3.5 Secondary (Ink Navy, bypasses Brand) */ --mode-secondary: var(--primitive-color-ink-navy-900); /* #000A24 */ --mode-secondary-text: var(--mode-text-inverse); /* #F4F6FA */ /* §4.3.6 Focus ring (inherits accent base) */ --mode-focus-ring: var(--brand-focus-ring); /* §4.4.3 Sentiment — success */ --mode-success-surface: var(--primitive-color-success-100); /* #E2F3D9 */ --mode-success-text: var(--primitive-color-success-700); /* #3F6824 */ --mode-success-text-on-surface: var(--primitive-color-success-800); /* #2F5711 */ --mode-success-border: var(--primitive-color-success-400); /* #94B383 */ --mode-success-border-strong: var(--primitive-color-success-600); /* #598042 */ --mode-success-icon: var(--primitive-color-success-600); /* #598042 */ --mode-success-fill: var(--primitive-color-success-500); /* #749960 */ --mode-success-fill-hover: var(--primitive-color-success-600); /* #598042 */ --mode-success-fill-active: var(--primitive-color-success-700); /* #3F6824 */ --mode-success-fill-disabled: var(--primitive-color-success-200); /* #CEE5C2 */ /* §4.4.3 Sentiment — warning */ --mode-warning-surface: var(--primitive-color-warning-100); /* #F9EBD6 */ --mode-warning-text: var(--primitive-color-warning-700); /* #75541B */ --mode-warning-text-on-surface: var(--primitive-color-warning-800); /* #593E0F */ --mode-warning-border: var(--primitive-color-warning-400); /* #C8A164 */ --mode-warning-border-strong: var(--primitive-color-warning-600); /* #936B26 */ --mode-warning-icon: var(--primitive-color-warning-600); /* #936B26 */ --mode-warning-fill: var(--primitive-color-warning-500); /* #B8893A */ --mode-warning-fill-hover: var(--primitive-color-warning-600); /* #936B26 */ --mode-warning-fill-active: var(--primitive-color-warning-700); /* #75541B */ --mode-warning-fill-disabled: var(--primitive-color-warning-200); /* #F0D9B7 */ /* §4.4.3 Sentiment — danger */ --mode-danger-surface: var(--primitive-color-danger-100); /* #F8E9E6 */ --mode-danger-text: var(--primitive-color-danger-700); /* #A8200D */ --mode-danger-text-on-surface: var(--primitive-color-danger-800); /* #810E00 */ --mode-danger-border: var(--primitive-color-danger-400); /* #D59589 */ --mode-danger-border-strong: var(--primitive-color-danger-600); /* #B84C3B */ --mode-danger-icon: var(--primitive-color-danger-600); /* #B84C3B */ --mode-danger-fill: var(--primitive-color-danger-500); /* #C67162 */ --mode-danger-fill-hover: var(--primitive-color-danger-600); /* #B84C3B */ --mode-danger-fill-active: var(--primitive-color-danger-700); /* #A8200D */ --mode-danger-fill-disabled: var(--primitive-color-danger-200); /* #E8D8D5 */ /* §4.4.3 Sentiment — info (light border at step 300 per live inventory) */ --mode-info-surface: var(--primitive-color-info-100); /* #E5EEF6 */ --mode-info-text: var(--primitive-color-info-700); /* #006093 */ --mode-info-text-on-surface: var(--primitive-color-info-800); /* #004870 */ --mode-info-border: var(--primitive-color-info-300); /* #A1CAEA */ --mode-info-border-strong: var(--primitive-color-info-600); /* #0284C7 */ --mode-info-icon: var(--primitive-color-info-600); /* #0284C7 */ --mode-info-fill: var(--primitive-color-info-500); /* #4494CB */ --mode-info-fill-hover: var(--primitive-color-info-600); /* #0284C7 */ --mode-info-fill-active: var(--primitive-color-info-700); /* #006093 */ --mode-info-fill-disabled: var(--primitive-color-info-200); /* #C7E0F4 */ /* §4.4.4 Decorative surfaces (surface-only; light = step 100) */ --mode-decorative-mint: var(--primitive-color-mint-100); /* #E0F0E5 */ --mode-decorative-lavender: var(--primitive-color-lavender-100); /* #E8E2F5 */ --mode-decorative-sky: var(--primitive-color-sky-100); /* #DCEAF7 */ --mode-decorative-peach: var(--primitive-color-peach-100); /* #FFE5D9 */ --mode-decorative-coral: var(--primitive-color-coral-100); /* #FFD9D2 */ /* §4.5 Elevation — light = §2.10 ink-navy neutral shadow verbatim */ --mode-elevation-xs: 0px 1px 2px rgba(0, 10, 36, 0.04); --mode-elevation-sm: 0px 1px 2px rgba(0, 10, 36, 0.04), 0px 1px 3px rgba(0, 10, 36, 0.04); --mode-elevation-md: 0px 4px 12px rgba(0, 10, 36, 0.08), 0px 2px 4px rgba(0, 10, 36, 0.04); --mode-elevation-lg: 0px 8px 24px rgba(0, 10, 36, 0.12), 0px 3px 8px rgba(0, 10, 36, 0.06); --mode-elevation-xl: 0px 16px 40px rgba(0, 10, 36, 0.16), 0px 4px 12px rgba(0, 10, 36, 0.08); --mode-elevation-2xl: 0px 24px 56px rgba(0, 10, 36, 0.20), 0px 8px 20px rgba(0, 10, 36, 0.10); } /* -------------------------------------------------------------------------------- §4.2 / §4.3 / §4.4 / §4.5 · DARK branch -------------------------------------------------------------------------------- */ [data-mode="dark"] { /* §4.2.7 Dark light-based alpha tier (Mode-owned, NOT a primitive — Q8 closed: not promoted). Channel = ink-navy-50 (242,247,255). The 04/08 steps are the §4.5 extension for the elevation light-edge ramp. */ --mode-alpha-light-04: rgba(242, 247, 255, 0.04); --mode-alpha-light-06: rgba(242, 247, 255, 0.06); --mode-alpha-light-08: rgba(242, 247, 255, 0.08); --mode-alpha-light-10: rgba(242, 247, 255, 0.10); --mode-alpha-light-20: rgba(242, 247, 255, 0.20); --mode-alpha-light-40: rgba(242, 247, 255, 0.40); /* §4.2.3 Backgrounds */ --mode-bg-page: var(--primitive-color-ink-navy-900); /* #000A24 — dark canvas */ --mode-bg-subtle: var(--primitive-color-ink-navy-950); /* #000105 — recessed */ --mode-bg-inverse: var(--primitive-color-misty-100); /* #F4F6FA */ /* §4.2.4 Surfaces — luminance elevation (depth by lightness, not shadow) */ --mode-surface-default: var(--primitive-color-ink-navy-900); /* #000A24 */ --mode-surface-raised: var(--primitive-color-ink-navy-800); /* #1A2A4F (navy-lifted) */ --mode-surface-sunken: var(--primitive-color-ink-navy-950); /* #000105 */ --mode-surface-inverse: var(--primitive-color-pure-white); /* #FFFFFF */ /* §4.2.5 Text — light ink-navy steps as solids */ --mode-text-primary: var(--primitive-color-ink-navy-50); /* #F2F7FF */ --mode-text-secondary: var(--primitive-color-ink-navy-200); /* #CED8E9 */ --mode-text-tertiary: var(--primitive-color-ink-navy-400); /* #8799B9 */ --mode-text-disabled: var(--mode-border-strong); /* shares the muted tier */ --mode-text-inverse: var(--primitive-color-ink-navy-900); /* #000A24 */ /* §4.2.6 Borders and dividers — dark = light-based alpha (navy alpha is invisible here) */ --mode-border-subtle: var(--mode-alpha-light-10); --mode-border-default: var(--mode-alpha-light-20); --mode-border-strong: var(--mode-alpha-light-40); --mode-border-inverse: var(--mode-alpha-light-20); /* §4.2.8 Neutral interactive state washes — lighten on dark */ --mode-state-hover-wash: var(--mode-alpha-light-06); --mode-state-active-wash: var(--mode-alpha-light-10); /* §4.2.9 Overlay scrim — ink-navy-950 channel, more opaque on dark */ --mode-overlay-scrim-subtle: rgba(0, 1, 5, 0.40); --mode-overlay-scrim-default: rgba(0, 1, 5, 0.60); --mode-overlay-scrim-strong: rgba(0, 1, 5, 0.75); /* §4.3.3 Accent — interactive group (Option X: same Brand tokens, darkens on press). --mode-accent is contrast-gated (Q9): the frontend lightens the tenant hex preserving hue ONLY if it fails AA against --mode-surface-default. For the Fitune default the gate does not fire, so the reference is unchanged. */ --mode-accent: var(--brand-accent); /* contrast-gated (Q9) */ --mode-accent-hover: var(--brand-accent-strong); --mode-accent-active: var(--brand-accent-stronger); --mode-accent-disabled: var(--brand-accent-muted); /* §4.3.3 Accent — border group (mid-tone color reads on dark; invariant) */ --mode-accent-border: var(--brand-accent-border); --mode-accent-border-subtle: var(--brand-accent-border-subtle); /* §4.3.3 Accent — surface group (interim Q10): light tints fall back to neutral surfaces; accent identity is carried by an accent border/text on the component. The brand-tinted accent fill does not survive in dark. */ --mode-accent-surface: var(--mode-surface-raised); /* + --mode-accent-border on component */ --mode-accent-surface-hover: var(--mode-state-hover-wash); /* over --mode-surface-raised */ --mode-accent-surface-subtle: var(--mode-surface-default); /* + --mode-accent-border-subtle on component */ /* §4.3.4 Workhorse — re-resolves UP the Ink Navy ladder (700, not 800: 800 is surface-raised; uses 700 as a control fill, not the §4.5 surface tier) */ --mode-workhorse-fill: var(--primitive-color-ink-navy-700); /* #394D71 */ --mode-workhorse-fill-hover: var(--primitive-color-ink-navy-600); /* #4A5E82 */ --mode-workhorse-fill-active: var(--primitive-color-ink-navy-500); /* #66799C */ --mode-workhorse-text: var(--mode-text-primary); /* #F2F7FF */ /* §4.3.5 Secondary — re-resolves to ink-navy-800 (static elevated banner surface) */ --mode-secondary: var(--primitive-color-ink-navy-800); /* #1A2A4F */ --mode-secondary-text: var(--mode-text-primary); /* #F2F7FF */ /* §4.3.6 Focus ring (inherits accent base; no separate dark target) */ --mode-focus-ring: var(--brand-focus-ring); /* §4.4.3 Sentiment — dark pattern: surface=900, text/icon/border-strong invert to light steps (200/400/400), border-default=600, fill=600 resting (inverts UP on press) */ /* success */ --mode-success-surface: var(--primitive-color-success-900); /* #143000 */ --mode-success-text: var(--primitive-color-success-200); /* #CEE5C2 */ --mode-success-text-on-surface: var(--primitive-color-success-100); /* #E2F3D9 */ --mode-success-border: var(--primitive-color-success-600); /* #598042 */ --mode-success-border-strong: var(--primitive-color-success-400); /* #94B383 */ --mode-success-icon: var(--primitive-color-success-400); /* #94B383 */ --mode-success-fill: var(--primitive-color-success-600); /* #598042 */ --mode-success-fill-hover: var(--primitive-color-success-500); /* #749960 */ --mode-success-fill-active: var(--primitive-color-success-400); /* #94B383 */ --mode-success-fill-disabled: var(--primitive-color-success-800); /* #2F5711 */ /* warning */ --mode-warning-surface: var(--primitive-color-warning-900); /* #372300 */ --mode-warning-text: var(--primitive-color-warning-200); /* #F0D9B7 */ --mode-warning-text-on-surface: var(--primitive-color-warning-100); /* #F9EBD6 */ --mode-warning-border: var(--primitive-color-warning-600); /* #936B26 */ --mode-warning-border-strong: var(--primitive-color-warning-400); /* #C8A164 */ --mode-warning-icon: var(--primitive-color-warning-400); /* #C8A164 */ --mode-warning-fill: var(--primitive-color-warning-600); /* #936B26 */ --mode-warning-fill-hover: var(--primitive-color-warning-500); /* #B8893A */ --mode-warning-fill-active: var(--primitive-color-warning-400); /* #C8A164 */ --mode-warning-fill-disabled: var(--primitive-color-warning-800); /* #593E0F */ /* danger */ --mode-danger-surface: var(--primitive-color-danger-900); /* #500500 */ --mode-danger-text: var(--primitive-color-danger-200); /* #E8D8D5 */ --mode-danger-text-on-surface: var(--primitive-color-danger-100); /* #F8E9E6 */ --mode-danger-border: var(--primitive-color-danger-600); /* #B84C3B */ --mode-danger-border-strong: var(--primitive-color-danger-400); /* #D59589 */ --mode-danger-icon: var(--primitive-color-danger-400); /* #D59589 */ --mode-danger-fill: var(--primitive-color-danger-600); /* #B84C3B */ --mode-danger-fill-hover: var(--primitive-color-danger-500); /* #C67162 */ --mode-danger-fill-active: var(--primitive-color-danger-400); /* #D59589 */ --mode-danger-fill-disabled: var(--primitive-color-danger-800); /* #810E00 */ /* info */ --mode-info-surface: var(--primitive-color-info-900); /* #002A45 */ --mode-info-text: var(--primitive-color-info-200); /* #C7E0F4 */ --mode-info-text-on-surface: var(--primitive-color-info-100); /* #E5EEF6 */ --mode-info-border: var(--primitive-color-info-600); /* #0284C7 */ --mode-info-border-strong: var(--primitive-color-info-400); /* #74AFDB */ --mode-info-icon: var(--primitive-color-info-400); /* #74AFDB */ --mode-info-fill: var(--primitive-color-info-600); /* #0284C7 */ --mode-info-fill-hover: var(--primitive-color-info-500); /* #4494CB */ --mode-info-fill-active: var(--primitive-color-info-400); /* #74AFDB */ --mode-info-fill-disabled: var(--primitive-color-info-800); /* #004870 */ /* §4.4.4 Decorative surfaces — dark = step 900 (deep desaturated form, same hue) */ --mode-decorative-mint: var(--primitive-color-mint-900); /* #222A24 */ --mode-decorative-lavender: var(--primitive-color-lavender-900); /* #29262F */ --mode-decorative-sky: var(--primitive-color-sky-900); /* #21292F */ --mode-decorative-peach: var(--primitive-color-peach-900); /* #31241E */ --mode-decorative-coral: var(--primitive-color-coral-900); /* #35221F */ /* §4.5 Elevation — hybrid (luminance-lift + light-edge), one uniform composition. Surface lift is emulated in-shadow (inset 0 -100vmax 0 ) so each token stays a single box-shadow string (the shadow-elevation-* utility consumes it unchanged). xs = edge only; sm = lift 800; md/lg/xl/2xl = lift 700; xl/2xl add an outer glow because the 3-level ladder runs out above lg. */ --mode-elevation-xs: inset 0 0 0 1px var(--mode-alpha-light-04); --mode-elevation-sm: inset 0 -100vmax 0 var(--primitive-color-ink-navy-800), inset 0 0 0 1px var(--mode-alpha-light-06); --mode-elevation-md: inset 0 -100vmax 0 var(--primitive-color-ink-navy-700), inset 0 0 0 1px var(--mode-alpha-light-08); --mode-elevation-lg: inset 0 -100vmax 0 var(--primitive-color-ink-navy-700), inset 0 0 0 1px var(--mode-alpha-light-10); --mode-elevation-xl: inset 0 -100vmax 0 var(--primitive-color-ink-navy-700), inset 0 0 0 1px var(--mode-alpha-light-10), 0 0 0 1px var(--mode-alpha-light-06); --mode-elevation-2xl: inset 0 -100vmax 0 var(--primitive-color-ink-navy-700), inset 0 0 0 1px var(--mode-alpha-light-20), 0 0 0 1px var(--mode-alpha-light-08); } /* ================================================================================ LAYER 4 · SEMANTICS Roles components consume. Mode-agnostic: NO [data-mode] selector here — each role references a --mode-* escalon that already carries both branches (§5.1.2). The color and elevation roles are re-pointed onto Mode (the bridge, §5.2/§5.3); type roles (§5.4) and rhythm roles (§5.5) are greenfield composites of primitives; z-index and motion roles are mode-agnostic and reference primitives directly. Re-point != rename: every role name and Tailwind utility is unchanged. ================================================================================ */ :root { /* ------------------------------------------------------------------------------ §5.2 · COLOR ROLES — re-pointed to Mode (116 roles). RHS moved to --mode-*; names unchanged. Treatment: Direct / Composition / Collapse (per §5.2.3). ------------------------------------------------------------------------------ */ /* bg (6) */ --color-bg-page: var(--mode-bg-page); --color-bg-subtle: var(--mode-bg-subtle); --color-bg-default: var(--mode-surface-default); --color-bg-elevated: var(--mode-surface-raised); --color-bg-inverse: var(--mode-bg-inverse); --color-bg-disabled: var(--mode-surface-sunken); /* surface (14) */ --color-surface-page: var(--mode-bg-page); /* intentional light shift: white -> misty-100 canvas */ --color-surface-default: var(--mode-surface-default); --color-surface-subtle: var(--mode-surface-sunken); --color-surface-raised: var(--mode-surface-raised); --color-surface-overlay: var(--mode-surface-raised); --color-surface-inverse: var(--mode-surface-inverse); --color-surface-brand: var(--mode-accent-surface); /* Q10 flows up */ --color-surface-brand-subtle: var(--mode-accent-surface-subtle); /* Q10 flows up */ --color-surface-success: var(--mode-success-surface); --color-surface-warning: var(--mode-warning-surface); --color-surface-danger: var(--mode-danger-surface); --color-surface-info: var(--mode-info-surface); --color-surface-control-off: var(--mode-border-strong); /* off-track muted tier */ --color-surface-control-off-hover: var(--mode-border-strong); /* + state-hover-wash stacked by component */ /* text (20) */ --color-text-primary: var(--mode-text-primary); --color-text-secondary: var(--mode-text-secondary); --color-text-tertiary: var(--mode-text-tertiary); --color-text-quaternary: var(--mode-text-tertiary); /* collapse (§4.2 D2) */ --color-text-disabled: var(--mode-text-disabled); --color-text-inverse: var(--mode-text-inverse); --color-text-placeholder: var(--mode-text-disabled); /* collapse (§4.2 D2) */ --color-text-brand: var(--mode-accent); --color-text-brand-subtle: var(--mode-accent); /* collapse (no subtle accent text escalon) */ /* FLAG Q11 — second hue, no --mode-* escalon. Left light-only; NOT re-pointed. */ --color-text-accent: var(--primitive-color-electric-blue-700); /* TODO: blocked on Q11 (second-hue Mode coverage) */ --color-text-success: var(--mode-success-text); --color-text-warning: var(--mode-warning-text); --color-text-danger: var(--mode-danger-text); --color-text-info: var(--mode-info-text); --color-text-on-brand: var(--mode-text-inverse); --color-text-on-danger: var(--mode-text-inverse); --color-text-on-success-surface: var(--mode-success-text-on-surface); --color-text-on-warning-surface: var(--mode-warning-text-on-surface); --color-text-on-danger-surface: var(--mode-danger-text-on-surface); --color-text-on-info-surface: var(--mode-info-text-on-surface); /* border (21) */ --color-border-subtle: var(--mode-border-subtle); --color-border-default: var(--mode-border-default); --color-border-strong: var(--mode-border-strong); --color-border-inverse: var(--mode-border-inverse); --color-border-brand-subtle: var(--mode-accent-border-subtle); --color-border-brand: var(--mode-accent-border); --color-border-brand-strong: var(--mode-accent-border); /* collapse (§4.2 D2) */ --color-border-success: var(--mode-success-border); --color-border-success-strong: var(--mode-success-border-strong); --color-border-warning: var(--mode-warning-border); --color-border-warning-strong: var(--mode-warning-border-strong); --color-border-danger: var(--mode-danger-border); --color-border-danger-strong: var(--mode-danger-border-strong); --color-border-info: var(--mode-info-border); --color-border-info-strong: var(--mode-info-border-strong); --color-border-input-default: var(--mode-border-default); --color-border-input-hover: var(--mode-border-strong); --color-border-input-focus: var(--mode-focus-ring); --color-border-input-error: var(--mode-danger-border-strong); --color-border-input-success: var(--mode-success-border-strong); --color-border-input-disabled: var(--mode-border-subtle); /* interactive (32) */ --color-interactive-primary-default: var(--mode-accent); /* Q9 gate flows up */ --color-interactive-primary-hover: var(--mode-accent-hover); --color-interactive-primary-active: var(--mode-accent-active); --color-interactive-primary-disabled: var(--mode-accent-disabled); --color-interactive-primary-loading: var(--mode-accent-disabled); /* collapse */ --color-interactive-secondary-default: var(--mode-surface-default); /* outline button */ --color-interactive-secondary-hover: var(--mode-state-hover-wash); /* composition */ --color-interactive-secondary-active: var(--mode-state-active-wash); /* composition */ --color-interactive-secondary-disabled: var(--mode-surface-default); /* composition */ --color-interactive-danger-default: var(--mode-danger-fill); --color-interactive-danger-hover: var(--mode-danger-fill-hover); --color-interactive-danger-active: var(--mode-danger-fill-active); --color-interactive-danger-disabled: var(--mode-danger-fill-disabled); --color-interactive-danger-loading: var(--mode-danger-fill-disabled);/* collapse */ --color-interactive-success-default: var(--mode-success-fill); --color-interactive-success-hover: var(--mode-success-fill-hover); --color-interactive-success-active: var(--mode-success-fill-active); --color-interactive-success-disabled: var(--mode-success-fill-disabled); --color-interactive-ghost-default: transparent; /* invariant */ --color-interactive-ghost-hover: var(--mode-state-hover-wash); /* composition */ --color-interactive-ghost-active: var(--mode-state-active-wash); /* composition */ --color-interactive-ghost-text: var(--mode-text-secondary); /* composition */ --color-interactive-ghost-text-disabled:var(--mode-text-disabled); /* composition */ /* FLAG Q11 — second-hue interactive family; no --mode-* escalon. Light-only; NOT re-pointed. */ --color-interactive-accent-default: var(--primitive-color-electric-blue-500); /* TODO: blocked on Q11 (second-hue Mode coverage) */ --color-interactive-accent-hover: var(--primitive-color-electric-blue-600); /* TODO: blocked on Q11 */ --color-interactive-accent-active: var(--primitive-color-electric-blue-700); /* TODO: blocked on Q11 */ --color-interactive-accent-disabled: var(--primitive-color-electric-blue-200); /* TODO: blocked on Q11 */ --color-interactive-accent-loading: var(--primitive-color-electric-blue-200); /* TODO: blocked on Q11 */ --color-interactive-focus-ring: var(--mode-focus-ring); --color-interactive-focus-ring-danger: var(--mode-danger-border-strong); /* composition (no feedback ring escalon) */ --color-interactive-focus-ring-accent: var(--mode-focus-ring); /* collapse (accent ring == base ring) */ --color-interactive-focus-ring-success: var(--mode-success-border-strong); /* composition */ /* feedback (20) — bg roles re-point to --mode-*-surface (bg -> surface shift) */ --color-feedback-success-bg: var(--mode-success-surface); --color-feedback-success-border: var(--mode-success-border); --color-feedback-success-text: var(--mode-success-text); --color-feedback-success-icon: var(--mode-success-icon); --color-feedback-warning-bg: var(--mode-warning-surface); --color-feedback-warning-border: var(--mode-warning-border); --color-feedback-warning-text: var(--mode-warning-text); --color-feedback-warning-icon: var(--mode-warning-icon); --color-feedback-danger-bg: var(--mode-danger-surface); --color-feedback-danger-border: var(--mode-danger-border); --color-feedback-danger-text: var(--mode-danger-text); --color-feedback-danger-icon: var(--mode-danger-icon); --color-feedback-info-bg: var(--mode-info-surface); --color-feedback-info-border: var(--mode-info-border); --color-feedback-info-text: var(--mode-info-text); --color-feedback-info-icon: var(--mode-info-icon); --color-feedback-neutral-bg: var(--mode-surface-inverse); /* inverse-surface toast */ --color-feedback-neutral-border: var(--mode-border-inverse); --color-feedback-neutral-text: var(--mode-text-inverse); --color-feedback-neutral-icon: var(--mode-text-inverse); /* overlay (3) */ --color-overlay-subtle: var(--mode-overlay-scrim-subtle); --color-overlay-default: var(--mode-overlay-scrim-default); --color-overlay-strong: var(--mode-overlay-scrim-strong); /* ------------------------------------------------------------------------------ §5.3 · ELEVATION ROLES — re-pointed to Mode (6 neutral, direct 1:1). The three v7 --elevation-brand-* glow roles are REMOVED (Q7 closed: removed). ------------------------------------------------------------------------------ */ --elevation-xs: var(--mode-elevation-xs); --elevation-sm: var(--mode-elevation-sm); --elevation-md: var(--mode-elevation-md); --elevation-lg: var(--mode-elevation-lg); --elevation-xl: var(--mode-elevation-xl); --elevation-2xl: var(--mode-elevation-2xl); /* ------------------------------------------------------------------------------ §5.5 · SCALAR RHYTHM ROLES — additive, opt-in, mode-agnostic. Compose existing §2.4/§2.5 primitives; add no scale step. No existing scalar utility is renamed or re-pointed. Q6 resolved: --radius-modal = xl (16px). ------------------------------------------------------------------------------ */ --space-section: var(--primitive-spacing-16); /* 64px — vertical section padding */ --space-stack: var(--primitive-spacing-6); /* 24px — vertical block rhythm */ --space-inline: var(--primitive-spacing-4); /* 16px — inline / horizontal gap */ --radius-card: var(--primitive-radius-lg); /* 12px — card / panel container */ --radius-modal: var(--primitive-radius-xl); /* 16px — modal / dialog (Q6 = xl) */ --radius-hero: var(--primitive-radius-xl); /* 16px — hero / large container */ /* ------------------------------------------------------------------------------ Z-INDEX ROLES — mode-agnostic, already role-complete (1:1 with primitives). Reference primitives directly (not part of the Mode bridge, §5.1.3). ------------------------------------------------------------------------------ */ --z-base: var(--primitive-z-0); --z-raised: var(--primitive-z-10); --z-sticky: var(--primitive-z-20); --z-navigation: var(--primitive-z-30); --z-dropdown: var(--primitive-z-100); --z-tooltip: var(--primitive-z-200); --z-drawer: var(--primitive-z-300); --z-toast: var(--primitive-z-400); --z-overlay: var(--primitive-z-500); --z-modal: var(--primitive-z-600); --z-modal-nested: var(--primitive-z-700); --z-emergency: var(--primitive-z-9999); /* ------------------------------------------------------------------------------ MOTION ROLES (semantic) — mode-agnostic, compose duration + easing primitives. Spring-based roles are intentionally NOT defined (§9.4 anti-pattern; the v7 --motion-spring-* roles are pruned at the Semantic layer). ------------------------------------------------------------------------------ */ --motion-hover: var(--primitive-duration-fast) var(--primitive-easing-ease-in-out); --motion-enter: var(--primitive-duration-normal) var(--primitive-easing-ease-out); --motion-exit: var(--primitive-duration-fast) var(--primitive-easing-ease-in); --motion-transition: var(--primitive-duration-slow) var(--primitive-easing-ease-in-out); --motion-expand: var(--primitive-duration-slow) var(--primitive-easing-ease-out); --motion-collapse: var(--primitive-duration-normal) var(--primitive-easing-ease-in); --motion-page: var(--primitive-duration-slow) var(--primitive-easing-ease-in-out); } /* ================================================================================ §5.4 · SEMANTIC TYPE ROLES (.t-*) Composed typographic voices. Mode-agnostic. Additive (no text utility renamed). Composes §2.3 type primitives + §3 Brand font track. Ligatures off on every voice (§9.1); tabular-nums on the two numeral voices (§9.2). ================================================================================ */ /* --- Headings (heading font track) --- */ .t-display { font-family: var(--brand-font-heading); font-size: var(--primitive-font-size-8xl); font-weight: var(--primitive-font-weight-semibold); line-height: var(--primitive-line-height-display); letter-spacing: var(--primitive-letter-spacing-display); font-feature-settings: "liga" 0; } .t-h1 { font-family: var(--brand-font-heading); font-size: var(--primitive-font-size-7xl); font-weight: var(--primitive-font-weight-semibold); line-height: var(--primitive-line-height-display); letter-spacing: var(--primitive-letter-spacing-display); font-feature-settings: "liga" 0; } .t-h2 { font-family: var(--brand-font-heading); font-size: var(--primitive-font-size-5xl); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-heading); letter-spacing: var(--primitive-letter-spacing-heading); font-feature-settings: "liga" 0; } .t-h3 { font-family: var(--brand-font-heading); font-size: var(--primitive-font-size-xl5); font-weight: var(--primitive-font-weight-semibold); line-height: var(--primitive-line-height-heading); letter-spacing: var(--primitive-letter-spacing-heading); font-feature-settings: "liga" 0; } /* --- Body & text (body font track) --- */ .t-body { font-family: var(--brand-font-body); font-size: var(--primitive-font-size-md); font-weight: var(--primitive-font-weight-regular); line-height: var(--primitive-line-height-body); letter-spacing: var(--primitive-letter-spacing-body); font-feature-settings: "liga" 0; } .t-body-sm { font-family: var(--brand-font-body); font-size: var(--primitive-font-size-sm); font-weight: var(--primitive-font-weight-regular); line-height: var(--primitive-line-height-body); letter-spacing: var(--primitive-letter-spacing-body); font-feature-settings: "liga" 0; } .t-caption { font-family: var(--brand-font-body); font-size: var(--primitive-font-size-xs); font-weight: var(--primitive-font-weight-regular); line-height: var(--primitive-line-height-caption); letter-spacing: var(--primitive-letter-spacing-caption); font-feature-settings: "liga" 0; } .t-eyebrow { font-family: var(--brand-font-body); font-size: var(--primitive-font-size-2xs); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-caption); letter-spacing: var(--primitive-letter-spacing-eyebrow); text-transform: uppercase; font-feature-settings: "liga" 0; } /* --- Numerals (tabular figures) --- */ .t-num-display { font-family: var(--brand-font-heading); font-size: var(--primitive-font-size-8xl); font-weight: var(--primitive-font-weight-semibold); line-height: var(--primitive-line-height-display); letter-spacing: var(--primitive-letter-spacing-display); font-feature-settings: "liga" 0; font-variant-numeric: tabular-nums; } .t-num-tabular { font-family: var(--brand-font-body); font-size: var(--primitive-font-size-sm); font-weight: var(--primitive-font-weight-medium); line-height: var(--primitive-line-height-body); letter-spacing: var(--primitive-letter-spacing-body); font-feature-settings: "liga" 0; font-variant-numeric: tabular-nums; } /* §5.4.5 · Inline emphasis — orthogonal to the voices; inherits the containing voice's size; color is the tenant-variable Brand accent (NOT a fixed hex). */ em, i:not([class*="ph-"]), .em { font-style: italic; font-weight: var(--primitive-font-weight-light); /* 300 */ color: var(--brand-accent); }