/* ========================================================================= KRAGOS — STONE BRAND TOKENS THE single source of truth for every colour, type, radius and motion value in the estate. Founder-ratified 2026-09-05. No surface keeps a private palette; a colour that is not here does not exist. Ground: cream #EDEAE4. Dark sections: iron #1A1612. Marks: stone #2B2B2B. Every text/ground pair is proved to WCAG 2.1 AA (>=4.5:1 for normal text); the proof table is kragos.stone.tokens.brand.json -> contrast_proof. THIS FILE IS SERVED TO CLIENTS. It sits inside the build-leak gate, so it may not name a lane, a branch, an internal path or any other build identifier. Two things were removed from this header for exactly that reason: a design lane's attribution, and the command for regenerating the derived copies — which named an internal path, and which the gate caught while it was being written. Provenance, the usage law and the regeneration command all live in the brand source README, which is not served. THIS IS A DERIVED COPY WHEREVER YOU ARE READING IT FROM A SERVED PATH. Edit the canonical file in the brand source and re-run the sync; a hand edit to a served copy is reverted by the next run and reds the gate before that. ========================================================================= */ /* ---- type: Inter, self-hosted, no external request ---------------------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; /* variable: 400 body, 500 medium, 600 strong */ font-display: swap; src: url("./fonts/inter-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/inter-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ==== the ratified palette, verbatim ================================== */ --k-cream: #EDEAE4; --k-stone: #2B2B2B; --k-iron: #1A1612; --k-bone: #E6DCC8; --k-muted: #7A7268; --k-copper: #B87333; --k-petrol: #1F5C5A; --k-coral: #C96B58; --k-oxblood: #6E2B32; --k-amethyst: #6B3FA0; /* ==== derived per accent: hover, pressed, dark twin, 12% wash, line, AA-proved ink on cream / on iron, and text ON the accent ======== */ --k-copper: #B87333; --k-copper-hover: #C78142; --k-copper-pressed: #D68F50; --k-copper-lift: #B87333; /* twin for iron grounds, AA 4.74:1 */ --k-copper-wash: #E7DCCF; /* 12% on cream */ --k-copper-wash-dark: #2D2116;/* 12% on iron */ --k-copper-line: #DBC2A8; /* 34% on cream */ --k-copper-ink: #9B5810; /* text/link on cream, AA 4.61:1 */ --k-copper-ink-wash: #91520F; /* text on the 12% copper wash, AA 4.55:1 */ --k-copper-ink-dark: #B87333; /* text/link on iron, AA 4.74:1 */ --k-on-copper: #1A1612; /* text ON the accent, AA 4.74:1 */ --k-petrol: #1F5C5A; --k-petrol-hover: #0E4F4E; --k-petrol-pressed: #004241; --k-petrol-lift: #4F8A87; /* twin for iron grounds, AA 4.56:1 */ --k-petrol-wash: #D4D9D3; /* 12% on cream */ --k-petrol-wash-dark: #1B1E1B;/* 12% on iron */ --k-petrol-line: #A7BAB5; /* 34% on cream */ --k-petrol-ink: #1F5C5A; /* text/link on cream, AA 6.39:1 */ --k-petrol-ink-dark: #4F8A87; /* text/link on iron, AA 4.56:1 */ --k-on-petrol: #EDEAE4; /* text ON the accent, AA 6.39:1 */ --k-coral: #C96B58; --k-coral-hover: #D87965; --k-coral-pressed: #E88773; --k-coral-lift: #C96B58; /* twin for iron grounds, AA 4.91:1 */ --k-coral-wash: #E9DBD3; /* 12% on cream */ --k-coral-wash-dark: #2F201A;/* 12% on iron */ --k-coral-line: #E1BFB4; /* 34% on cream */ --k-coral-ink: #A84E3C; /* text/link on cream, AA 4.58:1 */ --k-coral-ink-dark: #C96B58; /* text/link on iron, AA 4.91:1 */ --k-on-coral: #1A1612; /* text ON the accent, AA 4.91:1 */ --k-oxblood: #6E2B32; --k-oxblood-hover: #601E27; --k-oxblood-pressed: #52111B; --k-oxblood-lift: #B66B6F; /* twin for iron grounds, AA 4.56:1 */ --k-oxblood-wash: #DED3CF; /* 12% on cream */ --k-oxblood-wash-dark: #241916;/* 12% on iron */ --k-oxblood-line: #C2A9A7; /* 34% on cream */ --k-oxblood-ink: #6E2B32; /* text/link on cream, AA 8.51:1 */ --k-oxblood-ink-dark: #B66B6F; /* text/link on iron, AA 4.56:1 */ --k-on-oxblood: #EDEAE4; /* text ON the accent, AA 8.51:1 */ --k-amethyst: #6B3FA0; --k-amethyst-hover: #5E3192; --k-amethyst-pressed: #522383; --k-amethyst-lift: #976CD1; /* twin for iron grounds, AA 4.61:1 */ --k-amethyst-wash: #DDD5DC; /* 12% on cream */ --k-amethyst-wash-dark: #241B23;/* 12% on iron */ --k-amethyst-line: #C1B0CD; /* 34% on cream */ --k-amethyst-ink: #6B3FA0; /* text/link on cream, AA 6.15:1 */ --k-amethyst-ink-dark: #976CD1; /* text/link on iron, AA 4.61:1 */ --k-on-amethyst: #EDEAE4; /* text ON the accent, AA 6.15:1 */ /* ==== derived neutrals ================================================ */ --k-stone-hover: #454545; --k-stone-pressed: #181818; --k-stone-wash: #D6D3CE; /* 12% stone on cream */ --k-cream-hover: #E2DFD9; --k-cream-pressed: #D7D4CF; --k-muted-ink: #625A51; /* muted, walked to AA 5.64:1 on cream */ --k-muted-ink-dark:#877F75; /* muted, walked to AA 4.56:1 on iron */ --k-line: #CECBC6; --k-line-2: #DCD9D3; --k-line-dark: #3C3834; --k-line-2-dark: #2D2925; --k-surface: #F7F6F3; /* ==== brand slot values the marks are painted from ==================== */ --brand-ink: var(--k-stone); --brand-paper: var(--k-cream); --brand-base: var(--k-stone); --brand-accent: var(--k-copper); --brand-accent-bright: var(--k-copper-lift); --brand-ink-3: var(--k-muted-ink); /* ==== console colour roles =========================================== */ --c-ink: var(--k-stone); --c-ink-2: #464645; --c-ink-3: #625A51; --c-ink-4: #70685F; --c-line: var(--k-line); --c-line-2: var(--k-line-2); --c-bg: var(--k-cream); --c-bg-2: var(--k-bone); --c-surface: var(--k-surface); --c-inverse-bg: var(--k-iron); --c-inverse-ink: var(--k-cream); --c-inverse-ink-2: #E6DCC8; --c-inverse-ink-3: #877F75; --c-inverse-line: var(--k-line-dark); --c-inverse-rule: #4D4944; --accent: var(--k-copper); --accent-ink: var(--k-on-copper); --accent-soft: var(--k-copper-wash); --accent-line: var(--k-copper-line); /* ==== type =========================================================== */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fw-body: 400; --fw-medium: 500; /* the ratified UI substitute for the photographed wordmark */ --fw-strong: 600; --fw-heading: 500; /* RULING 4: headings are Inter 500. site.css reads this token for h1-h4 and the display-font heading classes; UI labels (.btn, .eyebrow, .field>span, .linkrow, current nav link) stay --fw-strong. Never hardcode a heading weight. */ --fs-micro: 0.6875rem; --fs-small: 0.8125rem; --fs-body: 1rem; --fs-lead: 1.125rem; --fs-h4: 1.0625rem; --fs-h3: 1.3125rem; --fs-h2: 1.75rem; --fs-h1: 2.5rem; --fs-hero: 2.875rem; --lh-tight: 1.06; --lh-snug: 1.22; --lh-body: 1.58; --tr-tight: -0.02em; /* Inter runs tighter than the fallback grotesque */ --tr-wide: 0.2em; --tr-mark: 0.14em; /* wordmark tracking: the renders sit slightly open */ /* ==== space ========================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ==== radius: the cut edge of the stone, not a pill =================== */ --r-xs: 0px; --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-pill: 999px; /* ==== elevation ====================================================== */ --sh-1: 0 1px 2px rgba(26,22,18,0.05); --sh-2: 0 2px 7px rgba(26,22,18,0.06), 0 1px 2px rgba(26,22,18,0.05); --sh-3: 0 10px 28px rgba(26,22,18,0.09), 0 2px 6px rgba(26,22,18,0.05); --sh-4: 0 22px 54px rgba(26,22,18,0.13), 0 4px 12px rgba(26,22,18,0.06); /* ==== motion: the durations the B console already uses ================ */ --dur-0: 80ms; --dur-1: 140ms; --dur-2: 260ms; --dur-3: 420ms; --dur-4: 620ms; --ease-out: cubic-bezier(.2,.9,.2,1); --ease-inout: cubic-bezier(.8,0,.2,1); --ease-settle: cubic-bezier(.16,1.14,.32,1); --lift: -2px; /* ==== measure ======================================================== */ --wrap: 1040px; --measure: 66ch; --rail-w: 232px; } @media (min-width: 900px) { :root { --fs-h1: 3rem; --fs-h2: 2rem; --fs-hero: 3.5rem; } } /* ---- one line per capability: the page takes its own accent ------------ */ [data-brand="stempa"] { --accent: var(--k-oxblood); --accent-ink: var(--k-on-oxblood); --accent-soft: var(--k-oxblood-wash); --accent-line: var(--k-oxblood-line); --brand-accent: var(--k-oxblood); --brand-accent-bright: var(--k-oxblood-lift); } [data-brand="makty"] { --accent: var(--k-petrol); --accent-ink: var(--k-on-petrol); --accent-soft: var(--k-petrol-wash); --accent-line: var(--k-petrol-line); --brand-accent: var(--k-petrol); --brand-accent-bright: var(--k-petrol-lift); } [data-brand="helm"] { --accent: var(--k-amethyst); --accent-ink: var(--k-on-amethyst); --accent-soft: var(--k-amethyst-wash); --accent-line: var(--k-amethyst-line); --brand-accent: var(--k-amethyst); --brand-accent-bright: var(--k-amethyst-lift); } [data-brand="pulse"] { --accent: var(--k-coral); --accent-ink: var(--k-on-coral); --accent-soft: var(--k-coral-wash); --accent-line: var(--k-coral-line); --brand-accent: var(--k-coral); --brand-accent-bright: var(--k-coral-lift); } /* ---- dark ground: the marks repaint, nothing else moves ---------------- Stone goes to cream, and each accent swaps to its AA-proved iron twin. */ .on-dark, .ftr, .bubble__pill { --brand-ink: var(--k-cream); --brand-paper: var(--k-iron); --brand-ink-3: var(--k-muted-ink-dark); --brand-accent: var(--k-copper-lift); } [data-brand="stempa"] .on-dark { --brand-accent: var(--k-oxblood-lift); } [data-brand="makty"] .on-dark { --brand-accent: var(--k-petrol-lift); } [data-brand="helm"] .on-dark { --brand-accent: var(--k-amethyst-lift); } [data-brand="pulse"] .on-dark { --brand-accent: var(--k-coral-lift); } /* ========================================================================= RULING 2 — THE CHROME IS KRAGOS COPPER, ON EVERY PAGE (option A) The nav, the Sign in, the footer and the free-calendar bubble belong to KRAGOS, not to whichever capability the reader happens to be standing on. They are pinned to the copper family here so no [data-brand] rule can reach them. Only the capability's own lockup, its primary buttons and its section marks take its accent. ========================================================================= */ .hdr, .ftr, .bubble { --accent: var(--k-copper); --accent-ink: var(--k-on-copper); --accent-soft: var(--k-copper-wash); --accent-line: var(--k-copper-line); } /* dark chrome grounds: the copper iron-twin, never the page accent */ .ftr, .bubble__pill { --brand-accent: var(--k-copper-lift) !important; } .ftr a.linkrow, .ftr .linkrow, .bubble a.linkrow { color: var(--k-copper-ink-dark); } /* the focus ring is chrome too */ .hdr :focus-visible, .ftr :focus-visible, .bubble :focus-visible { outline-color: var(--k-copper); } /* Sign in: copper on every page. The rule and the ring are raw --k-copper (3.20:1 against cream clears the 3:1 UI-component floor); the 13px label takes the AA-proved copper ink, because raw copper text on cream is 3.20:1. */ .nav__signin { border-color: var(--k-copper); color: var(--k-copper-ink); } .nav__signin:hover { border-color: var(--k-copper-hover); color: var(--k-copper-ink-wash); background: var(--k-copper-wash); } /* 4.55:1, walked for the wash ground */ .navdrawer .nav__signin { color: var(--k-copper-ink); } /* ========================================================================= THE MARK SLOTS The slot geometry is the console's; only what sits in it is the stone brand. ========================================================================= */ .brandmark { display: inline-flex; align-items: center; line-height: 0; } .brandmark svg, .brandmark img { display: block; height: auto; } /* the wordmark stays live type, never a path: the stack is a token */ .brandmark svg text { font-family: var(--font-display); font-weight: var(--fw-medium); } .brandmark--rail svg { width: 112px; } /* lockup runs 3.10:1, so 112 keeps the header mark at the console's own height */ .brandmark--mark svg { width: 34px; } .brandmark--hero svg { width: 64px; } .brandmark--bubble svg { width: 22px; } .brandmark--foot svg { width: 100px; } .brandmark--crumb { margin-right: 6px; vertical-align: -2px; } .brandmark--crumb svg { width: 15px; } @media (max-width: 699px) { .brandmark--rail svg { width: 92px; } } /* ========================================================================= RULING 3 — LOCKUP CONTRACTION Full lockup where the real estate allows, the K alone where it does not. KRAGOS pages: the full KRAGOS lockup in the nav, the full textured lockup in the home hero. Capability pages: the KRAGOS K (always copper, always a link home), a 1px --k-muted 40% hairline, then that capability's full lockup. Below 480px BOTH sides contract to the K. Documented in tokens/README.md and site/assets/marks/README.md. ========================================================================= */ .navpair { display: inline-flex; align-items: center; gap: 10px; flex: none; } /* site.css sets svg{max-width:100%}; inside a shrink-to-fit pair that collapses the lockup to whatever the pair happens to be, so the pair's marks opt out of it. */ .navpair .brandmark svg, .brandmark--kragosk svg, .brandmark--caplock svg, .brandmark--capk svg { max-width: none; flex: none; } .navpair__rule { flex: none; width: 1px; height: 22px; border: 0; margin: 0; background: color-mix(in srgb, var(--k-muted) 40%, transparent); } /* the KRAGOS half of the pair: fixed KRAGOS geometry, fixed copper accent */ .brandmark--kragosk svg { width: 24px; } .brandmark--kragosk svg path:last-child { fill: var(--k-copper); } /* the capability half */ .brandmark--caplock svg { width: 108px; } .brandmark--capk svg { width: 22px; } @media (max-width: 1039px) { .brandmark--caplock svg { width: 96px; } } /* the contraction switch: .bm-full above the floor, .bm-k below it */ .bm-k { display: none; } @media (max-width: 479px) { .bm-full { display: none; } .bm-k { display: inline-flex; } .navpair { gap: 8px; } .navpair__rule { height: 18px; } } /* the textured render in a hero slot: the ratified PNG, never re-cut */ .brandmark--plate img { height: clamp(88px, 13vw, 168px); width: auto; } .brandmark--lockup img { height: clamp(46px, 7vw, 84px); width: auto; } /* RULING 3: the home hero carries the FULL KRAGOS lockup, not the K alone. Hero scale = the plate's optical mass at lockup proportions (3.10:1). */ .brandmark--herolock img { height: clamp(54px, 8vw, 104px); width: auto; } /* MOTION SIGNATURE — the stone is already set; the word locks onto it. Durations are the console's own (--dur-*), no new timing is introduced. */ @keyframes bm-word-lock { 0%, 14% { transform: translateY(-6px); opacity: 0; } 28% { transform: translateY(1px); opacity: 1; } 34%, 96% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-6px); opacity: 0; } } .brandmark--live svg > text { transform-box: view-box; transform-origin: center; animation: bm-word-lock 3.1s var(--ease-settle) infinite both; } @media (prefers-reduced-motion: reduce) { .brandmark--live svg, .brandmark--live svg > * { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ---- the one rule the accent earns: a capability page's primary button - stone on cream everywhere; on a capability page the primary button is that capability's accent, with the AA-proved text colour above. */ /* the console warms the primary button and the bubble pill to the accent on hover. Cream on copper is 3.2:1, so the default (KRAGOS) button takes the AA-proved iron text with the copper hover shade, and the pill lifts in stone instead: its mark has to stay a cream K with a copper keystone, which an accent ground would swallow. */ .btn--primary:hover { background: var(--k-copper-hover); color: var(--k-on-copper); } .btn--primary:active { background: var(--k-copper-pressed); color: var(--k-on-copper); } .bubble__pill:hover { background: var(--k-stone-hover); } [data-brand="stempa"] .btn--primary, [data-brand="makty"] .btn--primary, [data-brand="helm"] .btn--primary, [data-brand="pulse"] .btn--primary { background: var(--accent); color: var(--accent-ink); } [data-brand="stempa"] .btn--primary:hover { background: var(--k-oxblood-hover); } [data-brand="makty"] .btn--primary:hover { background: var(--k-petrol-hover); } [data-brand="helm"] .btn--primary:hover { background: var(--k-amethyst-hover); } [data-brand="pulse"] .btn--primary:hover { background: var(--k-coral-hover); } [data-brand="stempa"] .btn--primary:active { background: var(--k-oxblood-pressed); } [data-brand="makty"] .btn--primary:active { background: var(--k-petrol-pressed); } [data-brand="helm"] .btn--primary:active { background: var(--k-amethyst-pressed); } [data-brand="pulse"] .btn--primary:active { background: var(--k-coral-pressed); } /* links and accent-coloured text: stone on cream by default; where the accent itself carries text it uses the AA-proved ink, never the raw accent (copper on cream is 3.2:1). */ a.linkrow, a.btn--quiet, .panel__btn:hover, .rail__step a.rail__link:hover .ladder__item-name, .ind.is-on .ind__t { color: var(--k-copper-ink); } [data-brand="stempa"] a.linkrow, [data-brand="stempa"] a.btn--quiet, [data-brand="stempa"] .panel__btn:hover, [data-brand="stempa"] .rail__step a.rail__link:hover .ladder__item-name, [data-brand="stempa"] .ind.is-on .ind__t { color: var(--k-oxblood-ink); } [data-brand="makty"] a.linkrow, [data-brand="makty"] a.btn--quiet, [data-brand="makty"] .panel__btn:hover, [data-brand="makty"] .rail__step a.rail__link:hover .ladder__item-name, [data-brand="makty"] .ind.is-on .ind__t { color: var(--k-petrol-ink); } [data-brand="helm"] a.linkrow, [data-brand="helm"] a.btn--quiet, [data-brand="helm"] .panel__btn:hover, [data-brand="helm"] .rail__step a.rail__link:hover .ladder__item-name, [data-brand="helm"] .ind.is-on .ind__t { color: var(--k-amethyst-ink); } [data-brand="pulse"] a.linkrow, [data-brand="pulse"] a.btn--quiet, [data-brand="pulse"] .panel__btn:hover, [data-brand="pulse"] .rail__step a.rail__link:hover .ladder__item-name, [data-brand="pulse"] .ind.is-on .ind__t { color: var(--k-coral-ink); } .on-dark a.linkrow, .ftr a.linkrow, .on-dark .linkrow { color: var(--brand-accent); } body { font-weight: var(--fw-body); } /* RULING 4 applies through site.css's --fw-heading reads; nothing here hardcodes a weight. */ /* ========================================================================= THE SHELL NAMES — one definition, ratified values ------------------------------------------------------------------------- the founder ruling of 2026-09-05: "One token file is the single source of truth for every colour, type, radius and motion value estate-wide... No page keeps a private palette." Before this block, 72 of 89 served pages declared their own :root — 2,413 colour literals and 302 variable names across the app, with five different spellings of "ink" and no two pages agreeing on a grey. The names below are the ones those pages already USE. Their values are now read from the ratified palette above and from nowhere else. THE NAMES ARE LEGACY; THE VALUES ARE RATIFIED. Nothing painted from this block is off-palette. A later lane may rename the call sites onto the --k-* / --c-* vocabulary and delete this section; until then this is what stops a page inventing a colour. DO NOT add a name here to avoid using a ratified one — add the call site to the ratified vocabulary instead. The soil/gold/fire "tree shell" theme these names were built for is gone with the Canopy canvas. The names survive only as call sites. ========================================================================= */ :root { /* ---- dark ground (was soil / bark / night) ------------------------- */ --soil-900: var(--k-iron); --soil-800: var(--k-line-2-dark); --soil-700: var(--k-line-dark); --soil-600: var(--c-inverse-rule); --bark: var(--k-stone); --night: var(--k-iron); --bg: var(--k-cream); --bg-deep: var(--k-iron); --root-line: var(--k-line-dark); /* ---- light ground (was dawn / clay / parch) ------------------------ */ --dawn: var(--k-cream); --dawn-50: var(--k-cream); --dawn-100: var(--k-bone); --dawn-2: var(--k-bone); --parch: var(--k-cream); --cream: var(--k-cream); --paper: var(--k-cream); --paper-2: var(--k-bone); --paper-dim: var(--k-surface); --paper-faint: var(--k-surface); --paper-ghost: var(--k-surface); --white: var(--k-surface); --card: var(--k-surface); --panel: var(--k-surface); --panel-2: var(--k-bone); --panel2: var(--k-bone); --chip: var(--k-surface); --clay-700: var(--k-stone); --clay-500: var(--k-muted-ink); --stone: var(--k-stone); --stone-hi: var(--k-stone-hover); /* ---- rules and hairlines ------------------------------------------- */ --line: var(--k-line); --line-2: var(--k-line-2); --line2: var(--k-line-2); --line-soft: var(--k-line-2); --line-strong: var(--k-stone-wash); --hairline: var(--k-line); --sand-line: var(--k-line); /* ---- ink ------------------------------------------------------------ */ --ink: var(--k-stone); --ink-2: var(--c-ink-2); --ink-3: var(--c-ink-3); --ink-soft: var(--c-ink-3); --text: var(--k-stone); --fg: var(--k-stone); --char: var(--k-stone); --body: var(--c-ink-2); --btn: var(--k-stone); --dim: var(--c-ink-3); --dim2: var(--c-ink-4); --mut: var(--k-muted-ink); --mute: var(--k-muted-ink); --muted: var(--k-muted-ink); --muted-2: var(--c-ink-4); --grey: var(--k-muted-ink); --grey-dim: var(--c-ink-4); --soft: var(--c-ink-3); --ash: var(--k-muted); /* ---- the old "fire / gold / krag" energy colour is now copper ------- */ --gold: var(--k-copper); --gold-deep: var(--k-copper-ink); --gold-dim: var(--k-copper-line); --ember: var(--k-copper-ink); --fire: var(--k-copper); --fire-core: var(--k-copper); --fire-bright: var(--k-copper-hover); --copper: var(--k-copper); --copper-hot: var(--k-copper-hover); --accent-hot: var(--k-copper-hover); --accent-dim: var(--k-copper-ink); --amber: var(--k-copper); --amber-bg: var(--k-copper-wash); --amber-ink: var(--k-copper-ink); /* ---- semantic: refusal is oxblood, health is petrol, caution copper - */ --bad: var(--k-oxblood); --bad-bg: var(--k-oxblood-wash); --danger: var(--k-oxblood); --red: var(--k-oxblood); --red-bg: var(--k-oxblood-wash); --red-ink: var(--k-oxblood-ink); --pri-hi: var(--k-oxblood); --stop: var(--k-oxblood); --stop-bg: var(--k-oxblood-wash); --stop-line: var(--k-oxblood-line); --blocked: var(--k-oxblood); --ok: var(--k-petrol); --ok-bg: var(--k-petrol-wash); --ok-line: var(--k-petrol-line); --good: var(--k-petrol); --go: var(--k-petrol); --live: var(--k-petrol); --green: var(--k-petrol); --green-soft: var(--k-petrol-wash); --green-ink: var(--k-petrol-ink); --leaf: var(--k-petrol); --leaf-deep: var(--k-petrol-ink); --mint: var(--k-petrol-wash); --pri-lo: var(--k-petrol); --info: var(--k-petrol); --info-bg: var(--k-petrol-wash); --warn: var(--k-copper); --warn-bg: var(--k-copper-wash); --warn-line: var(--k-copper-line); --pri-md: var(--k-copper); --hold: var(--k-copper); --parked: var(--k-copper); --building: var(--k-copper); --gated: var(--k-copper); /* ---- the violet/pink glints of the retired wordmark become amethyst and coral. Nothing is left of that gradient. ------------------ */ --glint-purple: var(--k-amethyst); --glint-pink: var(--k-coral); --violet: var(--k-amethyst); --pink: var(--k-coral); --blind: var(--k-amethyst); --blue: var(--k-amethyst); --built: var(--k-amethyst); --idea: var(--k-amethyst); /* ---- state chrome --------------------------------------------------- */ --hi: var(--k-copper-wash); --sel: var(--k-copper-wash); --scoped: var(--k-petrol-wash); --mine: var(--k-copper-wash); --unread: var(--k-copper); --lockbg: var(--k-oxblood-wash); --lockbd: var(--k-oxblood-line); --editbg: var(--k-petrol-wash); --editbd: var(--k-petrol-line); /* ---- ORG SWATCHES. These are ENTITY identity, not KRAGOS brand. BIDA keeps its ratified green and charcoal untouched: BIDA brand law is unchanged by this lane and no KRAGOS colour replaces it. The remaining entities have no ratified swatch of their own, so they take a ratified KRAGOS accent rather than an invented hue. -- */ --bida: #7FE03A; --org-bida: #7FE03A; --charcoal: #1A1A1A; --org-kragos: var(--k-copper); --org-e2rides: var(--k-petrol); --e2: var(--k-petrol); --e2-hi: var(--k-petrol-lift); --org-mmh: var(--k-amethyst); --org-personal: var(--k-muted-ink); /* ---- type ----------------------------------------------------------- */ --sans: var(--font-sans); --f-ui: var(--font-sans); --serif: var(--font-display); --disp: var(--font-display); --f-read: var(--font-display); --mono: var(--font-mono); --f-num: var(--font-mono); --t-huge: var(--fs-h1); --t-big: var(--fs-h2); --t-row: var(--fs-body); --t-small: var(--fs-small); --t-label: var(--fs-micro); /* ---- layout, radius, elevation -------------------------------------- */ --maxw: var(--wrap); --rail: var(--rail-w); --rail-l: var(--rail-w); --rail-r: var(--rail-w); --gap: var(--sp-4); --pad: var(--sp-4); --rowh: 44px; --radius: var(--r-md); --radius-sm: var(--r-sm); --shadow: var(--sh-2); --shadow-lg: var(--sh-3); /* ---- the Canopy tree's own motion values. The canvas is deleted; these are pinned to zero so any surviving call site is inert rather than animating a mark that no longer exists. ------------------------ */ --tree-rise: 0; --tree-shift: 0; /* ---- kragos.ai's own names. The marketing site ran a separate gold-on-ivory palette from the app's soil-and-fire one — two KRAGOS identities, live at once, on two domains. Both resolve here now. ---------------- */ --ivory: var(--k-surface); --champagne: var(--k-bone); --ink-dim: var(--k-muted-ink); --ink-faint: var(--c-ink-4); --gold-mid: var(--k-copper); --gold-bright: var(--k-copper-hover); /* the site's gold gradient becomes a flat copper. The ratified marks carry their depth in the render's own texture, not in a CSS ramp underneath them. */ --grad-gold: var(--k-copper); } /* ========================================================================= THE PUBLISHED-ARTEFACT NAMES ------------------------------------------------------------------------- Founder ruling, 2026-09-05: "the old brand assets they reference are REMOVED from the served tree... The documents themselves stay as history but must not render old marks or palette." The estate serves several hundred per-lane published documents. They are the record of what each lane shipped, so their PROSE is untouched — but they were painting themselves from sixty-two private colour names of their own, which is a private palette on a served surface however historical the words are. Their names resolve here. Semantic roles keep their meaning: a blocker is oxblood, a request is petrol, a finding is copper. Nothing here is a new colour; every value is a ratified token. ========================================================================= */ :root { /* neutrals + surfaces */ --surface: var(--k-surface); --surface2: var(--k-bone); --bg-2: var(--k-bone); --bg-3: var(--k-cream-hover); --border: var(--k-line); --rule: var(--k-line); --ln: var(--k-line); --pa: var(--k-cream); --accent-light: var(--k-cream-hover); --graphite: var(--k-stone); --head: var(--k-iron); --ch: var(--k-stone); --text-primary: var(--k-stone); --text-secondary: var(--c-ink-2); --text-muted: var(--k-muted-ink); --dormant: var(--k-muted); /* the priority bands of the published lane reports */ --band-critical: var(--k-iron); --band-important: var(--k-muted-ink); --band-admin: var(--k-muted); /* semantic roles — meaning preserved, colour ratified */ --blocker: var(--k-oxblood); --blocker-bg: var(--k-oxblood-wash); --risk: var(--k-oxblood); --risk-bg: var(--k-oxblood-wash); --treat: var(--k-oxblood); --treat-bg: var(--k-oxblood-wash); --finding: var(--k-copper-ink); --finding-bg: var(--k-copper-wash); --amb: var(--k-copper); --gap-bg: var(--k-copper-wash); --gap-line: var(--k-copper-line); --chip-amber: var(--k-copper-wash); --request: var(--k-petrol); --request-bg: var(--k-petrol-wash); --have: var(--k-petrol); --have-bg: var(--k-petrol-wash); --success: var(--k-petrol); --chip-green: var(--k-petrol-wash); --question: var(--k-amethyst); --question-bg: var(--k-amethyst-wash); --research: var(--k-amethyst); --research-bg: var(--k-amethyst-wash); --chip-red: var(--k-oxblood-wash); /* single-letter names from the older reports */ --g1: var(--k-petrol); --g2: var(--k-oxblood); --g25: var(--k-copper-ink); --g3: var(--k-amethyst); /* --gr / --gr2 are BIDA GREEN in a BIDA report. Ratified BIDA brand, untouched. */ --gr: #7FE03A; --gr2: #5bb524; /* the two bell colours were the violet/pink of the retired wordmark */ --bell-1: var(--k-coral); --bell-2: var(--k-amethyst); /* chat bubbles + progress chrome */ --bubble-ai: var(--k-bone); --bubble-user: var(--k-stone); --bubble-user-text: var(--k-cream); --progress-fill: var(--k-stone); --step-active-border: var(--k-stone); --step-done-bg: var(--k-stone); /* type: the published reports set their own face and scale */ --font: var(--font-display); --fs-xs: var(--fs-micro); --fs-sm: var(--fs-small); --fs: var(--fs-body); --fs-lg: var(--fs-lead); --fs-xl: var(--fs-h3); }