/* ============================================================ CodeMaestro · colors_and_type.css -------------------------------------------------------------- Tokens lifted verbatim from .ai/design/tokens.json (Pipeline Kanban v1, 150%-scaled baseline). Source of truth in reference/DESIGN.md and reference/tokens.css. Never hardcode hex values inside components — use these vars. ============================================================ */ /* Web fonts — loaded from Google Fonts at runtime. FM (mono) and FS (sans) are semantic, not stylistic: FS = content the user reads: titles, body, descriptions, labels in sentences FM = IDs, metadata and uppercase labels Text floor: 12px. No half-pixel sizes. */ :root, [data-theme="dark"], [data-theme="bone"], [data-theme="porcelain"] { /* ---------- Surfaces (5-layer surface ladder; dark values here, Bone and Porcelain override them below) ---------- */ --bg : #0c0e11; /* page canvas, modal backdrop */ --s1 : #13161b; /* cards, sidebar, navbar */ --s2 : #1a1e24; /* recessed panels, token budget bar */ --s3 : #22272e; /* inputs, selects, button fills */ --s4 : #2c323b; /* scroll tracks, disabled, progress tracks */ /* ---------- Text (warm off-whites, never pure #fff) ---------- */ --tx : #e8e4dd; /* primary text */ --tm : #908c85; /* muted / secondary */ --td : #5c5955; /* dimmed / metadata / timestamps */ /* ---------- Borders (no shadows for elevation) ---------- */ --bd : #2a3038; /* default separation */ --bl : #3a4250; /* stronger structural / hover */ /* ---------- Brand accent — the only warm color ---------- */ --ac : #e0915a; /* amber instrument lighting */ --acD : color-mix(in srgb, var(--ac) 14%, transparent); /* selected-item tint */ /* ---------- Semantic — 1 color : 1 state, never reused ---------- */ --gn : #47c97a; /* success · done */ --yw : #d4a843; /* caution · investigate */ --rd : #d45a5a; /* error · blocked · P0 */ --bl2 : #5a8ed0; /* info · implement */ --pp : #9a7ad4; /* review · AI-processing */ --cy : #4bc8c8; /* raw teal; use --ai for AI surfaces */ --am : #e8a033; /* attention · processing (warmer than yw) */ /* Tinted backgrounds for badges: always use the {color}D var or hex-suffix "22" (~13.5%) — never solid fills. */ --gnD : color-mix(in srgb, var(--gn) 12%, transparent); --ywD : color-mix(in srgb, var(--yw) 12%, transparent); --rdD : color-mix(in srgb, var(--rd) 10%, transparent); --bl2D : color-mix(in srgb, var(--bl2) 12%, transparent); --ppD : color-mix(in srgb, var(--pp) 12%, transparent); --cyD : color-mix(in srgb, var(--cy) 12%, transparent); --amD : color-mix(in srgb, var(--am) 12%, transparent); /* ---------- AI surface ---------------------------------------------- Teal marks anything the AI owns: the byline, agent borders and marks, AI chips, relay cards, the orchestrator. Use --ai on every AI surface so a later change to the AI accent is one edit; --cy is the raw colour and links may use it. The Unified Chat start screen is the one place the AI accent is the iridescent ramp below, not teal. */ --ai : var(--cy); /* ---------- Border weight --------------------------------------------- One weight everywhere. 1px is retired except checkbox and radio boxes. */ --bw : 1.5px; /* ---------- Theme-dependent roles --------------------------------------- Dark is the default and the product's native look; data-theme="bone" and data-theme="porcelain" on any container switch to the light palettes (end of this block). These roles carry what differs between themes, so a component never tests the theme: it reads the role. --on-ac label on the amber primary fill (white on dark, the theme's ink on light) --on-solid label on a solid semantic fill (danger button) --on-chip glyph on a solid-colour icon chip --ac-t amber as text or as a focus/active border; = --ac on dark, a deeper amber on light --ctl border of a form control that must read (input, checkbox, radio, toggle off) --link link colour; --logo wordmark and CM mark colour (amber on dark, ink on light) --focus / --focus-w keyboard focus outline colour and width --hov-btn / --hov-card hover brightness for buttons and cards (brighter on dark, dimmer on light) --scrim modal backdrop */ --on-ac : #fff; --on-solid : #fff; --on-chip : var(--tx); --on-check : var(--tx); --blend-glow: screen; /* blend mode for light-emitting sweeps; light themes use multiply */ --on-gn : #07180e; /* label on a green fill */ --pk2 : #f06a9a; /* pink, the floating-chat idle hue (text use) */ --pk : #e87bad; /* pink: localization category badge */ --chipn-a : #1a1d26; --chipn-b: #2a3038; --chipn-bd: #3a4250; --chipn-fg: #fff; /* neutral icon chip (gradient a to b, border, glyph) */ --ac-t : var(--ac); --ctl : var(--bd); --ctl-edge : transparent; /* visible ring on a control's resting surface (toggle track); light themes show it */ --link : var(--cy); --logo : var(--ac); --focus : var(--ac); --focus-w : var(--bw); --hov-btn : 1.15; --hov-card : 1.08; --scrim : rgba(0,0,0,0.6); --swatch-bg: rgba(0,0,0,0.55); /* label pill on a colour swatch */ --swatch-fg: #fff; --shadow-modal: 0 36px 120px rgba(0,0,0,0.6); /* ---------- Slider family (Slider, StopSlider, MoodSlider) -------------- Roles, so a slider never tests the theme. Set --cm-slider-surf on a panel that is not s1 so the grip's border blends into it. --cm-slider-surf surface behind the grip (its border and the mood needle outline) --cm-slider-track unfilled track and unlit mood bars --cm-slider-track-edge ring round the track; transparent on dark, the control edge on light (3:1) --cm-slider-base fill up to the value when a default notch exists (amber runs from the notch) --cm-slider-fill amber fill, delta segment, default-stop run, lit mood bars --cm-slider-thumb grip body and mood needle --cm-slider-groove groove lines on the grip; they turn --cm-slider-fill under the pointer --cm-slider-notch default notch and the ringed default stop --cm-slider-tick step ticks --cm-slider-read readout and delta text --cm-slider-bubble drag bubble fill (a step lighter on light themes so the amber delta reads at 4.5:1) --cm-slider-glow MoodSlider needle and lit-bar glow, the one approved slider glow */ --cm-slider-surf : var(--s1); --cm-slider-track : var(--s4); --cm-slider-track-edge : var(--ctl-edge); --cm-slider-base : var(--bl); --cm-slider-fill : var(--ac); --cm-slider-thumb : var(--tx); --cm-slider-groove : var(--s4); --cm-slider-notch : var(--tm); --cm-slider-tick : var(--bl); --cm-slider-read : var(--ac-t); --cm-slider-bubble : var(--s4); --cm-slider-glow : var(--glow-am); /* ---------- Tint strengths ---------------------------------------------- Four named strengths of a state colour, as color-mix over transparent. Use these instead of ad-hoc percentages: -fill 10% tinted background (badge, row, tile) -soft 25% quiet border (resting, finished, attention containers) -line 45% border that must read (active) -strong 70% text and icons on tinted fills, not borders Per colour: --{ac|gn|yw|rd|bl2|pp|cy|am}-{fill|soft|line|strong}. The older {c}D tokens stay for badge tints (12%); prefer these in new CSS. */ --ac-fill : color-mix(in srgb, var(--ac) 10%, transparent); --ac-soft : color-mix(in srgb, var(--ac) 25%, transparent); --ac-line : color-mix(in srgb, var(--ac) 45%, transparent); --ac-strong: color-mix(in srgb, var(--ac) 70%, transparent); --gn-fill : color-mix(in srgb, var(--gn) 10%, transparent); --gn-soft : color-mix(in srgb, var(--gn) 25%, transparent); --gn-line : color-mix(in srgb, var(--gn) 45%, transparent); --gn-strong: color-mix(in srgb, var(--gn) 70%, transparent); --yw-fill : color-mix(in srgb, var(--yw) 10%, transparent); --yw-soft : color-mix(in srgb, var(--yw) 25%, transparent); --yw-line : color-mix(in srgb, var(--yw) 45%, transparent); --yw-strong: color-mix(in srgb, var(--yw) 70%, transparent); --rd-fill : color-mix(in srgb, var(--rd) 10%, transparent); --rd-soft : color-mix(in srgb, var(--rd) 25%, transparent); --rd-line : color-mix(in srgb, var(--rd) 45%, transparent); --rd-strong: color-mix(in srgb, var(--rd) 70%, transparent); --bl2-fill : color-mix(in srgb, var(--bl2) 10%, transparent); --bl2-soft : color-mix(in srgb, var(--bl2) 25%, transparent); --bl2-line : color-mix(in srgb, var(--bl2) 45%, transparent); --bl2-strong: color-mix(in srgb, var(--bl2) 70%, transparent); --pp-fill : color-mix(in srgb, var(--pp) 10%, transparent); --pp-soft : color-mix(in srgb, var(--pp) 25%, transparent); --pp-line : color-mix(in srgb, var(--pp) 45%, transparent); --pp-strong: color-mix(in srgb, var(--pp) 70%, transparent); --cy-fill : color-mix(in srgb, var(--cy) 10%, transparent); --cy-soft : color-mix(in srgb, var(--cy) 25%, transparent); --cy-line : color-mix(in srgb, var(--cy) 45%, transparent); --cy-strong: color-mix(in srgb, var(--cy) 70%, transparent); --am-fill : color-mix(in srgb, var(--am) 10%, transparent); --am-soft : color-mix(in srgb, var(--am) 25%, transparent); --am-line : color-mix(in srgb, var(--am) 45%, transparent); --am-strong: color-mix(in srgb, var(--am) 70%, transparent); --ai-fill : var(--cy-fill); --ai-soft : var(--cy-soft); --ai-line : var(--cy-line); --ai-strong: var(--cy-strong); /* ---------- Domain colors (source types / agent roles) ---------- */ --ji : #378ADD; /* Jira */ --mcp : #378ADD; /* MCP tool */ --app : #D8793A; /* App tool · worker role */ --sk : #1DB87A; /* Skill */ /* ---------- Glow palette ------------------------------------------ Reserved for emissive "magic" surfaces only — MagicButton cards and Featured project tiles. Co-exist with semantic colors: --ac/--bl2/--cy stay for state, --glow-* are for luminescence. Recipes (substitute {c} with the hex): idle box-shadow: 0 0 20px {c}25, inset 0 0 32px {c}08 hover box-shadow: 0 12px 40px {c}60, 0 0 80px {c}25 pressed box-shadow: 0 4px 20px {c}45, inset 0 0 20px {c}12 border 2px solid {c}66 idle · {c}dd hover */ --glow-am : #e0915a; /* amber — primary, default magic accent */ --glow-bl : #5b9bf6; /* blue — exploratory / analytical */ --glow-pp : #8b5cf6; /* purple — creative / generative */ --glow-cy : #4bc8c8; /* cyan — review / orchestration */ /* ---------- Iridescent spectrum (generative-loading + Magic Buttons) -- Sanctioned exception to the no-gradient / no-glow rules: a spinning conic "latent resolving out of noise" bed for AI image-generation loaders (playable-simple-070), in the same AI/"working" spectral spirit as the floating-chat conic border. Scope extension (2026-06-10, playable-simple-156): Magic Button surfaces — the Workbench magic chips' spinning conic-border ring — join generative loading under the Magic-Button glow-language umbrella. Scope extension (2026-10-11): the Unified Chat Asset Contract card's frame may carry the iridescent ring while the agent is proposing or generating (a working, non-static state), without the glow. Scope extension (2026-10-21, user-approved): the Unified Chat artifact panel's resize handle ("glow spine") may glow amber along its whole edge (a 2px line and a soft gradient halo, uniform, no pointer-follow) on hover, focus and drag, and nowhere else. Scope extension (2026-10-23, user-approved): the composer prompt-cache chip's one-shot reignite may sweep the iridescent ramp across the flame for about 1.2s when the cache turns warm again, without glow, and is off under prefers-reduced-motion (README § Composer cache chip). Scope extension (2026-11-03, user-approved): the update window (src/components/update, the one modal that may carry the ramp) may draw the Code Maestro mark and the new version number in the full ramp, --iri-a to --iri-d. The mark is a GPU field of independently flickering squares that resolves as the download advances (a still frame under prefers-reduced-motion and the e2e motion switch). No glow, no motion on hover, and nothing else in that window or the app may cite this (README § Update window). Scope extension (2026-11-04, user-approved): the Patchnotes Poster hero (kit/patchnotes) may fill its tile with the bright ramp (--iri-art-*) under dark ink, with no glow and no motion, and the title's version number may carry the ramp as text; the stops and the ink live as named variables in poster.css, not as new global tokens. Otherwise still NEVER for standard cards, kanban tiles, modals, or any static surface. The amber stop reuses the brand accent so it stays a single source for amber. */ --iri-a : #6cc6ce; /* cyan */ --iri-b : #b389e6; /* lavender */ --iri-c : var(--ac); /* amber (brand accent) */ --iri-d : #f7c66b; /* gold */ /* The bright stops, kept under their own names: on light themes --iri-a..d become the deep stops (readable at 3:1 as large text), and these stay bright for art that nobody has to read. Same values on every theme. */ --iri-art-a : #6cc6ce; --iri-art-b : #b389e6; --iri-art-c : #e0915a; --iri-art-d : #f7c66b; /* ---------- Tile + Row surface tokens ---------------------------- Two reusable "tappable surface" primitives that wrap the system's basic vocabulary into one coherent recipe. TILE — large, vertical, icon-led picker / button surface. Used by Project Type Cards, the tile-Button variant, featured menu cards, onboarding option cards. ROW — horizontal record-style row with icon chip + title + actions. Used by Project Cards in the dashboard, settings entries, agent / toolset list rows. Optional amber slide-in on hover. */ --tile-radius : 16px; --tile-pad : 18px; --tile-bg : var(--s2); --tile-bg-hover : var(--s3); /* unused: hover is brightness only */ --tile-border : var(--bd); --tile-border-active : var(--ac-t); --tile-ring-active : 0 0 0 3px color-mix(in srgb, var(--ac) 18%, transparent); /* outer ring, never inset */ --tile-blob-size : 180px; /* decorative gradient blob */ --tile-blob-blur : 40px; --tile-blob-opacity : 0.22; --row-radius : 16px; --row-height : 110px; --row-pad : 18px 24px; --row-bg : var(--s2); /* flat surface; no gradient */ --row-bg-hover : var(--s3); /* unused: hover is brightness only */ --row-border : var(--bd); --row-border-hover : var(--ac-t); --row-focus-ring : 0 0 0 2px color-mix(in srgb, var(--ac) 35%, transparent); /* Slide-in "OPEN" affordance — documented gradient exception (Row only): a sweep from the right edge on hover. Atmosphere, not billboard. */ --row-sweep : linear-gradient(to right, color-mix(in srgb, var(--ac) 0%, transparent) 0%, color-mix(in srgb, var(--ac) 4%, transparent) 30%, color-mix(in srgb, var(--ac) 10%, transparent) 70%, color-mix(in srgb, var(--ac) 16%, transparent) 100%); --row-sweep-width : 45%; /* how far across the card the sweep extends */ /* Icon chip — square mark holder used on tiles AND rows */ --chip-size : 48px; --chip-radius : 12px; --chip-bg : var(--s3); --chip-color : var(--ac-t); /* Icon button — 44×44 tertiary action with semantic hover. Used on Project Card rows (Settings, Delete), task modals, etc. */ --iconbtn-size : 44px; --iconbtn-radius : 11px; --iconbtn-bg : var(--s2); --iconbtn-bg-row : var(--s3); /* when parent row is hovered */ --iconbtn-color : var(--tm); /* Two semantic-hover patterns; pick one per button: */ --iconbtn-accent-bg : var(--acD); --iconbtn-accent-bd : color-mix(in srgb, var(--ac) 45%, transparent); --iconbtn-accent-fg : var(--ac-t); --iconbtn-danger-bg : color-mix(in srgb, var(--rd) 18%, transparent); --iconbtn-danger-bd : color-mix(in srgb, var(--rd) 45%, transparent); --iconbtn-danger-fg : var(--rd); /* ---------- Font families ---------- */ --FS : 'DM Sans', system-ui, sans-serif; --FM : 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; /* Kit-vocabulary aliases: the kit names these --font-sans / --font-mono. */ --font-sans : var(--FS); --font-mono : var(--FM); /* ---------- Type scale: sizes, weights, tracking ---------- Whole pixels; every step is used by a .cm-* class or measured in the product. See kit/components/Typography.html. */ --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-21: 21px; --fs-22: 22px; --fs-27: 27px; --fs-45: 45px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --ls-display: -0.02em; --ls-heading: -0.01em; --ls-field: 0.03em; --ls-badge: 0.04em; --ls-label: 0.06em; /* ---------- Spacing scale (only these values are valid) ---------- Multiples of ~3px. Anything off-scale is a drift indicator. */ --sp-6 : 6px; --sp-9 : 9px; --sp-12 : 12px; --sp-15 : 15px; --sp-18 : 18px; --sp-21 : 21px; --sp-24 : 24px; --sp-30 : 30px; --sp-36 : 36px; --sp-48 : 48px; --sp-72 : 72px; --sp-126: 126px; /* ---------- Radii (cluster — never exceed 21px except chat) ---------- */ --r-4 : 4px; /* small badges */ --r-6 : 6px; /* badges, tag count chips */ --r-8 : 8px; /* inputs */ --r-9 : 9px; /* default button */ --r-12 : 12px; /* cards, big buttons, dropdowns */ --r-15 : 15px; /* panels */ --r-18 : 18px; /* tag pills */ --r-21 : 21px; /* modal panel — MAX for solid shapes */ --r-39 : 39px; /* floating chat only */ /* ---------- Motion (ease-in-out is BANNED for UI transitions) ---------- */ --t-fast : .15s; --t-med : .2s; --t-slow : .4s; --ease-in : cubic-bezier(.4,0,1,1); /* exit */ --ease-out : cubic-bezier(0,0,.2,1); /* enter */ } /* ============================================================ Base type — semantic helpers, scoped via class so they don't override host pages. ============================================================ */ html, body { background: var(--bg); color: var(--tx); } body { font-family: var(--FS); font-size: var(--fs-16); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* --- Display & headings (FS, never italic) --- */ .cm-display { font-family: var(--FS); font-weight: var(--fw-bold); font-size: var(--fs-45); line-height: 1.1; letter-spacing: var(--ls-display); color: var(--tx); } .cm-h1, .cm-board { font-family: var(--FS); font-weight: var(--fw-bold); font-size: var(--fs-27); line-height: 1.15; letter-spacing: var(--ls-heading); color: var(--tx); } .cm-h2, .cm-modal-title { font-family: var(--FS); font-weight: var(--fw-bold); font-size: var(--fs-22); line-height: 1.2; color: var(--tx); } .cm-h3, .cm-card-title { font-family: var(--FS); font-weight: var(--fw-semibold); font-size: var(--fs-15); line-height: 1.3; color: var(--tx); } .cm-section-header { font-family: var(--FS); font-weight: var(--fw-semibold); font-size: var(--fs-16); color: var(--tx); } /* --- Body / prose (FS) --- */ .cm-body { font-family: var(--FS); font-weight: var(--fw-regular); font-size: var(--fs-16); line-height: 1.5; color: var(--tx); } .cm-body-muted { font-family: var(--FS); font-weight: var(--fw-regular); font-size: var(--fs-16); line-height: 1.5; color: var(--tm); } .cm-lede { font-family: var(--FS); font-weight: var(--fw-regular); font-size: var(--fs-20); line-height: 1.5; color: var(--tm); } .cm-toggle-label { font-family: var(--FS); font-weight: var(--fw-regular); font-size: var(--fs-16); color: var(--tx); } .cm-tag { font-family: var(--FS); font-weight: var(--fw-regular); font-size: var(--fs-15); color: var(--tx); } /* --- Mono signals (FM) — IDs, badges, metadata, code --- */ .cm-id-big { font-family: var(--FM); font-weight: var(--fw-black); font-size: var(--fs-21); color: var(--tx); } .cm-id { font-family: var(--FM); font-weight: var(--fw-regular); font-size: var(--fs-12); color: var(--td); } .cm-code { font-family: var(--FM); font-weight: var(--fw-regular); font-size: var(--fs-16); color: var(--tx); } .cm-mono-numeric { font-family: var(--FM); font-weight: var(--fw-semibold); font-size: var(--fs-18); color: var(--tx); } .cm-caption { font-family: var(--FM); font-weight: var(--fw-regular); font-size: var(--fs-12); color: var(--td); } /* --- Labels (uppercase, always 600+, never lightweight) --- */ .cm-field-label { font-family: var(--FM); font-weight: var(--fw-regular); font-size: var(--fs-14); text-transform: uppercase; letter-spacing: var(--ls-field); color: var(--tm); } .cm-label { font-family: var(--FM); font-weight: var(--fw-semibold); font-size: var(--fs-14); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--td); } .cm-column-header { font-family: var(--FM); font-weight: var(--fw-semibold); font-size: var(--fs-15); text-transform: uppercase; color: var(--tx); } .cm-badge-text { font-family: var(--FM); font-weight: var(--fw-semibold); font-size: var(--fs-14); text-transform: uppercase; letter-spacing: var(--ls-badge); line-height: 21px; } /* --- Buttons --- */ .cm-btn-text { font-family: var(--FM); font-weight: var(--fw-semibold); font-size: var(--fs-16); } .cm-btn-sm-text { font-family: var(--FM); font-weight: var(--fw-semibold); font-size: var(--fs-14); } .cm-btn-big-text { font-family: var(--FS); font-weight: var(--fw-semibold); font-size: var(--fs-20); } /* --- Structured Report (cm-report) — larger, optimized for reading --- */ .cm-report-title { font-family: var(--FS); font-weight: var(--fw-bold); font-size: var(--fs-27); color: var(--tx); } .cm-report-subtitle { font-family: var(--FS); font-weight: var(--fw-regular); font-size: var(--fs-21); color: var(--tm); } .cm-report-section { font-family: var(--FS); font-weight: var(--fw-semibold); font-size: var(--fs-22); color: var(--tx); } .cm-report-body { font-family: var(--FS); font-weight: var(--fw-regular); font-size: var(--fs-21); line-height: 1.55; color: var(--tx); } .cm-report-code-block { font-family: var(--FM); font-weight: var(--fw-regular); font-size: var(--fs-20); color: var(--tx); } /* --- Scrollbars (custom, global) --- */ *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--s4); border-radius: 15px; } *::-webkit-scrollbar-thumb:hover { background: var(--bl); } * { scrollbar-width: thin; scrollbar-color: var(--s4) transparent; } /* Dark keeps its original literal tint values byte for byte (colour-mix rounds one level off on some tints). Light themes and nested containers use the colour-mix definitions above, so they follow the container's own palette. */ :root:not([data-theme="bone"]):not([data-theme="porcelain"]), [data-theme="dark"] { --acD: rgba(224,145,90,0.14); --gnD: rgba(71,201,122,0.12); --ywD: rgba(212,168,67,0.12); --rdD: rgba(212,90,90,0.10); --bl2D: rgba(90,142,208,0.12); --ppD: rgba(154,122,212,0.12); --cyD: rgba(75,200,200,0.12); --amD: rgba(232,160,51,0.12); --tile-ring-active: 0 0 0 3px rgba(224,145,90,.18); --row-focus-ring: 0 0 0 2px rgba(224,145,90,.35); --row-sweep: linear-gradient(to right, rgba(224,145,90,0) 0%, rgba(224,145,90,.04) 30%, rgba(224,145,90,.10) 70%, rgba(224,145,90,.16) 100%); --iconbtn-accent-bd: rgba(224,145,90,.45); --iconbtn-danger-bg: rgba(212,90,90,.18); --iconbtn-danger-bd: rgba(212,90,90,.45); } /* ============================================================ Light themes: data-theme="bone" and data-theme="porcelain". Set the attribute on or any container; no attribute (or data-theme="dark") is the default dark look. Primary fill is #f28a30 on both themes with the theme's ink as its label. --ac-t is the deeper amber for text and focus borders. Semantic colours are the darker light-theme values; tint tokens recompute from them, and -strong is the full colour here (70% of a dark ink is too faint to read). Ramp: --iri-a..d are the deep stops; bright stops stay in --iri-art-*. Hover dims (brightness .93); focus is a 2px ink outline. ============================================================ */ [data-theme="bone"] { color-scheme: light; /* Bone: the warm, user-facing light theme (share pages, decks, marketing). */ --bg: #f6f3ed; --s1: #fdfbf7; --s2: #eeebe4; --s3: #e5e1d8; --s4: #d9d4c8; --tx: #1c1a17; --tm: #5c574f; --td: #68635b; --bd: #dcd7cb; --bl: #b5af9f; --ctl: #7e7c77; --ctl-edge: var(--ctl); --ac: #f28a30; --ac-t: #9d4d08; --on-ac: var(--tx); --on-solid: var(--s1); --on-chip: var(--s1); --on-check: var(--on-ac); --blend-glow: multiply; --on-gn: var(--s1); --pk: #a8336f; --pk2: #a8336f; --chipn-a: var(--s4); --chipn-b: var(--s3); --chipn-bd: var(--bl); --chipn-fg: var(--tx); --gn: #166e3d; --yw: #7c5d0c; --rd: #ae2f2f; --bl2: #2a5fa6; --pp: #6a45ad; --am: #895606; --cy: #0b6c73; --link: #0b6068; --logo: var(--tx); --ji: #1f64b0; --mcp: #1f64b0; --app: #94500d; --sk: #0b6a47; --glow-am: #f28a30; --glow-bl: #2a5fa6; --glow-pp: #6a45ad; --glow-cy: #0b6c73; --iri-a: #0e8f9a; --iri-b: #7a4fd0; --iri-c: #c8611f; --iri-d: #a87a08; --focus: var(--tx); --focus-w: 2px; --hov-btn: .93; --hov-card: .93; --scrim: color-mix(in srgb, var(--tx) 45%, transparent); --swatch-bg: color-mix(in srgb, var(--tx) 82%, transparent); --swatch-fg: var(--s1); --shadow-modal: none; --cm-slider-bubble: var(--s3); --ac-strong: var(--ac-t); --gn-strong: var(--gn); --yw-strong: var(--yw); --rd-strong: var(--rd); --bl2-strong: var(--bl2); --pp-strong: var(--pp); --cy-strong: var(--cy); --am-strong: var(--am); } [data-theme="porcelain"] { color-scheme: light; /* Porcelain: the cool, technical light theme (tools, consoles, reports). */ --bg: #f2f4f6; --s1: #fcfdfe; --s2: #e9ecef; --s3: #dfe3e7; --s4: #d3d8de; --tx: #14171b; --tm: #4f5761; --td: #5d656e; --bd: #d6dbe0; --bl: #aab2bb; --ctl: #787a7e; --ctl-edge: var(--ctl); --ac: #f28a30; --ac-t: #9d4d08; --on-ac: var(--tx); --on-solid: var(--s1); --on-chip: var(--s1); --on-check: var(--on-ac); --blend-glow: multiply; --on-gn: var(--s1); --pk: #a8336f; --pk2: #a8336f; --chipn-a: var(--s4); --chipn-b: var(--s3); --chipn-bd: var(--bl); --chipn-fg: var(--tx); --gn: #14703d; --yw: #7a5b08; --rd: #b02c2c; --bl2: #2559a3; --pp: #6641ab; --am: #8a5605; --cy: #076c75; --link: #0a5e66; --logo: var(--tx); --ji: #1f64b0; --mcp: #1f64b0; --app: #94500d; --sk: #0b6a47; --glow-am: #f28a30; --glow-bl: #2559a3; --glow-pp: #6641ab; --glow-cy: #076c75; --iri-a: #0e8f9a; --iri-b: #7a4fd0; --iri-c: #c8611f; --iri-d: #a87a08; --focus: var(--tx); --focus-w: 2px; --hov-btn: .93; --hov-card: .93; --scrim: color-mix(in srgb, var(--tx) 45%, transparent); --swatch-bg: color-mix(in srgb, var(--tx) 82%, transparent); --swatch-fg: var(--s1); --shadow-modal: none; --cm-slider-bubble: var(--s3); --ac-strong: var(--ac-t); --gn-strong: var(--gn); --yw-strong: var(--yw); --rd-strong: var(--rd); --bl2-strong: var(--bl2); --pp-strong: var(--pp); --cy-strong: var(--cy); --am-strong: var(--am); }