/* MIRAI — Colour Dual-mode identity. Foundry Paper (light, corporate/marketing) is the default on :root. Midnight Foundry (dark, product) activates under [data-theme="midnight"]. THE BRIDGE — the semantic spine shared by both modes: Anchor = graphite / warm-ivory (business truth) Flow = sapphire → mineral gradient (moves the work) Heat = bronze (human judgement) Layers: PRIMITIVE RAMPS (raw scales) → SEMANTIC ALIASES (meaning; author against these). Components consume the semantic layer — never hardcode ramp hexes in product UI. */ :root { /* ===================================================================== PRIMITIVE RAMPS — raw scales anchored to the brand hexes. Neutral runs warm paper (0–600) into cool ink (700–950): the deliberate warm→cool temperature shift of the dual-mode identity, one scale. ===================================================================== */ --neutral-0: #FFFFFF; --neutral-25: #FBF9F5; --neutral-50: #F3EFE7; --neutral-100: #EBE5DA; --neutral-200: #D8D0C2; --neutral-300: #B8AEA0; --neutral-400: #8C847A; --neutral-500: #706A60; --neutral-600: #5D5B57; --neutral-700: #3F464A; --neutral-800: #2E353B; --neutral-900: #182233; --neutral-950: #111722; --sapphire-50: #EEF3F7; --sapphire-100: #DFE9F0; --sapphire-200: #C3D6E3; --sapphire-300: #9FB9CE; --sapphire-400: #7A9EBE; --sapphire-500: #5B84AA; --sapphire-600: #315F88; --sapphire-700: #284F74; --sapphire-800: #203F61; --sapphire-900: #182F4B; --sapphire-950: #102236; --mineral-50: #EFF6F5; --mineral-100: #DCEBEA; --mineral-200: #BCD6D4; --mineral-300: #92B9B7; --mineral-400: #6F9E9D; --mineral-500: #4B777A; --mineral-600: #3E6669; --mineral-700: #335356; --mineral-800: #284347; --mineral-900: #1E3235; --bronze-50: #FBF4EE; --bronze-100: #F2E5D9; --bronze-200: #E2C9B6; --bronze-300: #CBA687; --bronze-400: #B3825F; --bronze-500: #9C6C48; --bronze-600: #8C5F40; --bronze-700: #754D34; --bronze-800: #5E3D2B; --bronze-900: #452E22; /* ---- Base palette · Foundry Paper (light) ---- */ --paper: #F3EFE7; /* page background · neutral-50 */ --porcelain: #FBF9F5; /* cards / raised surfaces · neutral-25 */ --graphite: #3F464A; /* text / anchor · neutral-700 */ --warm-stone: #8C8778; /* DECORATIVE only — fails AA as text; see --text-secondary */ --hairline: #E4DDCF; /* decorative dividers — never a control's only boundary */ --foundry-bronze: #9C6C48; /* accent — human judgement (2–4% only) · bronze-500 */ --antique-brass: #85794B; /* print / foil / collateral ONLY — not a UI colour */ --mirai-sapphire: #315F88; /* actions / links · sapphire-600 */ /* ---- Base palette · Midnight Foundry (dark) ---- */ --midnight-ink: #111722; /* page background · neutral-950 */ --foundry-navy: #182233; /* cards / raised surfaces · neutral-900 */ --warm-ivory: #EFE9DF; /* text / anchor */ --muted-stone: #9D988E; /* secondary text (passes AA on ink) */ --sapphire-light: #6F94B6; /* interactive / info */ --mineral-teal: #68999C; /* connections / workflow */ --deep-indigo: #2B416E; /* gradient depth (legacy stop) */ --burnished-bronze: #A67552; /* human approvals */ /* ---- Flow gradient — mode-calibrated cuts of one family ---- Paper cut is deeper (legible on warm paper); the bright/ink cut is more luminous (visible on midnight). --flow-* flips automatically per mode; --gradient-flow is always the right cut for the current surface. */ --flow-1: #4B777A; /* mineral — paper cut */ --flow-2: #456F91; --flow-3: #29436F; --flow-bright-1: #86B7B5; /* ink-calibrated cut (auto-applied under midnight) */ --flow-bright-2: #7A9EBE; --flow-bright-3: #5F79A8; --gradient-flow: linear-gradient(135deg, var(--flow-1) 0%, var(--flow-2) 50%, var(--flow-3) 100%); --gradient-flow-bright: linear-gradient(135deg, var(--flow-bright-1) 0%, var(--flow-bright-2) 50%, var(--flow-bright-3) 100%); /* ---- Derived status hues (not in the source brief — warm, never neon) ---- Base = fills, icons, large text. The semantic layer adds AA text + border tiers. */ --status-success: #5F7D5A; /* muted sage */ --status-warning: #B08334; /* amber-brass */ --status-danger: #A6543F; /* muted brick */ /* ===================================================================== SEMANTIC ALIASES — Foundry Paper (default). Redefined under midnight. Author UI against these, not the raw palette above. ===================================================================== */ --color-scheme: light; --bg: var(--paper); --bg-sunken: #EDE7DB; /* recessed wells, table stripes */ --surface: var(--porcelain); /* cards */ --surface-raised: #FFFFFF; /* popovers / menus above cards */ --surface-inverse: var(--midnight-ink); /* the deliberate midnight reveal on a light page */ --text: var(--graphite); /* anchor / primary · 8.4:1 */ --text-secondary: var(--neutral-500); /* 4.7:1 — AA at body size */ --text-muted: #A9A392; /* decorative / disabled ONLY — fails AA */ --text-placeholder: var(--neutral-500); --text-on-accent: #FBF9F5; /* text on sapphire / bronze fills */ --text-inverse: var(--warm-ivory); /* text on a midnight surface */ --border: var(--hairline); /* decorative dividers */ --border-strong: var(--neutral-300); /* visible structure — table frames, secondary buttons */ --border-input: var(--neutral-400); /* 3:1 — a control's sole boundary */ --border-focus: var(--mirai-sapphire); --action: var(--mirai-sapphire); /* blue = system action · 5.9:1 */ --action-hover: var(--sapphire-700); --action-active: var(--sapphire-800); --action-soft: #E5ECF2; /* tinted action background / selected surface */ --link: var(--mirai-sapphire); --link-hover: var(--sapphire-700); --info: #46767A; /* teal = information moving — fills / icons / large */ --info-text: #3E696D; /* AA small text */ --info-border: #B7D0CE; --info-soft: #E2ECEC; --approval: var(--foundry-bronze); /* bronze = human approval — icons / markers */ --approval-strong: var(--bronze-600); /* bronze fills that carry text */ --approval-text: var(--bronze-600); /* AA small text · 5.1:1 */ --approval-border: var(--bronze-200); --approval-soft: #F0E7DE; --brass: var(--antique-brass); /* print / foil only */ --truth: var(--graphite); /* graphite/ivory = operating truth */ --success: var(--status-success); --success-text: #4A6446; --success-border: #B4C9AE; --success-soft: #E7EDE5; --warning: var(--status-warning); --warning-text: #7A5A20; --warning-border: #DCC492; --warning-soft: #F4EBD8; --danger: var(--status-danger); --danger-text: #8F4636; --danger-border: #D9AC9E; --danger-soft: #F3E4DF; --focus-ring: color-mix(in srgb, var(--mirai-sapphire) 45%, transparent); --overlay-scrim: color-mix(in srgb, var(--graphite) 45%, transparent); } /* ========================================================================= Midnight Foundry (dark / product). Opt-in — the product surface, not a user preference. Applied via [data-theme="midnight"] on any ancestor. ========================================================================= */ [data-theme="midnight"] { --color-scheme: dark; --bg: var(--midnight-ink); --bg-sunken: #0C1119; --surface: var(--foundry-navy); --surface-raised: #1F2B3E; --surface-inverse: var(--paper); --text: var(--warm-ivory); --text-secondary: var(--muted-stone); /* 6.1:1 on ink */ --text-muted: #6E7686; /* decorative / disabled ONLY */ --text-placeholder: var(--muted-stone); --text-on-accent: #0C1119; --text-inverse: var(--graphite); --border: #26324A; --border-strong: #33415E; --border-input: #5D7089; /* 3:1 on navy fields */ --border-focus: #9DB9D0; --action: var(--sapphire-light); --action-hover: #86A6C5; --action-active: var(--sapphire-500); --action-soft: #1B2942; --link: var(--sapphire-light); --link-hover: #86A6C5; --info: var(--mineral-teal); --info-text: var(--mineral-teal); /* 5.6:1 on ink */ --info-border: #2E4A50; --info-soft: #16303A; --approval: var(--burnished-bronze); --approval-strong: var(--burnished-bronze); --approval-text: var(--bronze-300); /* 7.9:1 on ink */ --approval-border: #6B4830; --approval-soft: #2A2318; --brass: #B9A768; /* print / foil only */ --truth: var(--warm-ivory); --success: #7E9B78; --success-text: #7E9B78; --success-border: #3C5941; --success-soft: #1B2A20; --warning: #C79A4C; --warning-text: #C79A4C; --warning-border: #6E5624; --warning-soft: #2B2413; --danger: #C1745E; --danger-text: #CB8570; --danger-border: #6E3A31; --danger-soft: #2E1C17; /* Mode-calibrated flow: the ink cut becomes THE gradient here. */ --flow-1: var(--flow-bright-1); --flow-2: var(--flow-bright-2); --flow-3: var(--flow-bright-3); --focus-ring: color-mix(in srgb, #9DB9D0 50%, transparent); --overlay-scrim: color-mix(in srgb, #000 60%, transparent); } /* ========================================================================= Foundry Paper (light) as an explicit scope. :root already IS paper, but a paper island nested inside a [data-theme="midnight"] subtree must restore the FULL paper token set — key-for-key parity with midnight above — or it inherits midnight's colours and only flips --color-scheme. Values mirror the :root paper aliases (including the paper cut of the flow gradient). ========================================================================= */ [data-theme="paper"] { --color-scheme: light; --bg: var(--paper); --bg-sunken: #EDE7DB; --surface: var(--porcelain); --surface-raised: #FFFFFF; --surface-inverse: var(--midnight-ink); --text: var(--graphite); --text-secondary: var(--neutral-500); --text-muted: #A9A392; --text-placeholder: var(--neutral-500); --text-on-accent: #FBF9F5; --text-inverse: var(--warm-ivory); --border: var(--hairline); --border-strong: var(--neutral-300); --border-input: var(--neutral-400); --border-focus: var(--mirai-sapphire); --action: var(--mirai-sapphire); --action-hover: var(--sapphire-700); --action-active: var(--sapphire-800); --action-soft: #E5ECF2; --link: var(--mirai-sapphire); --link-hover: var(--sapphire-700); --info: #46767A; --info-text: #3E696D; --info-border: #B7D0CE; --info-soft: #E2ECEC; --approval: var(--foundry-bronze); --approval-strong: var(--bronze-600); --approval-text: var(--bronze-600); --approval-border: var(--bronze-200); --approval-soft: #F0E7DE; --brass: var(--antique-brass); --truth: var(--graphite); --success: var(--status-success); --success-text: #4A6446; --success-border: #B4C9AE; --success-soft: #E7EDE5; --warning: var(--status-warning); --warning-text: #7A5A20; --warning-border: #DCC492; --warning-soft: #F4EBD8; --danger: var(--status-danger); --danger-text: #8F4636; --danger-border: #D9AC9E; --danger-soft: #F3E4DF; /* Restore the paper cut of the flow gradient (midnight swaps to the bright cut). */ --flow-1: #4B777A; --flow-2: #456F91; --flow-3: #29436F; --focus-ring: color-mix(in srgb, var(--mirai-sapphire) 45%, transparent); --overlay-scrim: color-mix(in srgb, var(--graphite) 45%, transparent); } html { color-scheme: var(--color-scheme); }