/* ============================================================
   K2 KCDS Theme — KnowledgeCity Design System v3.0
   ============================================================

   K2's default theme. KCDS is the universal `:root` baseline; other
   themes layer sparse overrides on top.

   Three independent namespaces, three intended consumers:

     --kcds-*  KCDS-native tokens (Tier 1 primitives + Tier 2 semantic
                + scales + KCDS component metrics). The designer's
                source-of-truth vocabulary. Declared once at :root.
                Every override axis (dark / category / density)
                redeclares ONLY at this layer — the K2 bridge below
                follows automatically via the var() chain.

     --k2-*    K2's component-API contract. Declared at :root AND at
                [data-theme="kcds"] so the nested-theme pattern works
                (a `<main data-theme="kcds">` inside an
                `<html data-theme="portal">` reinstates the KCDS bridge
                for that subtree). Every K2 token is `var(--kcds-*)`,
                so KCDS value bumps propagate without component edits.

   The split is load-bearing. If --kcds-* tokens were ALSO redeclared
   inside [data-theme="kcds"], they'd shadow ancestor axis overrides
   on the nested subtree (e.g. `<html data-kcds-theme="dark">` →
   `<main data-theme="kcds">` would render light because the local
   [data-theme="kcds"] block re-set --kcds-color-* to light values).
   Keeping --kcds-* at :root ONLY means axis overrides cascade
   through inheritance into nested subtrees as intended.

   Composable attributes — apply standalone or combine on any element:

     data-kcds-theme="dark"
     data-kcds-product-category="learn|comply|grow|hire|internal"  (thrive/perform = grow aliases)
     data-kcds-density="compact"   (or class .density--compact)

   K2's `data-structure` axis (sharp/soft/round/spacious/extra-
   spacious) remains the K2-superset density axis. KCDS comfortable
   and KCDS compact sit inside that ladder.

   Designer's "Indirection rule": Tier 2 semantic tokens redeclare
   their primitive *directly*, not chained from another semantic.
   Each axis override block obeys the rule for the Tier 2 it
   redeclares.
   ============================================================ */

/* Webfonts: KC CDN mirrors of Lato (v25) / Noto Sans Arabic (v33) /
   Noto Sans Hebrew (v50) / JetBrains Mono (v24) — 400+700, per-script
   unicode-range subsets, display:swap — inlined from the per-family
   @google/font-* packages in js-3rdparty-unmodified-lib.
   Was a fonts.googleapis.com @import — self-hosted because (a) @import is a
   serial third-party chain undiscoverable until this file arrives, (b) the
   partitioned HTTP cache (Chrome 86+/Safari) killed cross-site font reuse,
   and (c) GDPR (LG München 2022). Inlined rather than @import'ed so the
   woff2 requests start as soon as kcds.css arrives — no intermediate hop.
   NOTE: sync this change upstream to the KCDS design-foundations source. */
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-lato@25/files/S6uyw4BMUTPHjxAwXjeu.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;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-lato@25/files/S6uyw4BMUTPHjx4wXg.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;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-lato@25/files/S6u9w4BMUTPHh6UVSwaPGR_p.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;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-lato@25/files/S6u9w4BMUTPHh6UVSwiPGQ.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;
}

/* arabic */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-arabic@33/files/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj4wv4r4xA.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* math */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-arabic@33/files/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj5Jv4r4xA.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-arabic@33/files/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj5bv4r4xA.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-arabic@33/files/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj47v4r4xA.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;
}
/* latin */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-arabic@33/files/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj41v4o.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;
}
/* arabic */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-arabic@33/files/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj4wv4r4xA.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* math */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-arabic@33/files/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj5Jv4r4xA.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* symbols */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-arabic@33/files/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj5bv4r4xA.woff2) format('woff2');
  unicode-range: U+0001-000C, U+000E-001F, U+007F-009F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+2800-28FF, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B00-2BFF, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F000-1F0FF, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F700-1F7FF, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB00-1FBFF;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-arabic@33/files/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj47v4r4xA.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;
}
/* latin */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-arabic@33/files/nwpCtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlj41v4o.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;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-hebrew@50/files/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiZTNzENg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-hebrew@50/files/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiYTNzENg.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* hebrew */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-hebrew@50/files/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiWTNzENg.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-hebrew@50/files/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiaTNzENg.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;
}
/* latin */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-hebrew@50/files/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiUTNw.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-hebrew@50/files/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiZTNzENg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-hebrew@50/files/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiYTNzENg.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* hebrew */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-hebrew@50/files/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiWTNzENg.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-hebrew@50/files/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiaTNzENg.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;
}
/* latin */
@font-face {
  font-family: 'Noto Sans Hebrew';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-sans-hebrew@50/files/or30Q7v33eiDljA1IufXTtVf7V6RvEEdhQlk0LlGxCyaePiUTNw.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;
}

/* ── Noto Nastaliq Urdu (Urdu) — mirrored at @google/font-noto-nastaliq-urdu@23.
   Nastaliq is Urdu's conventional script form, not a stylistic preference; Naskh
   reads as foreign to an Urdu reader. The arabic subset is 239 KB, so unicode-range
   is doing real work here — a page with no Urdu never fetches it. ── */
/* arabic */
@font-face {
  font-family: 'Noto Nastaliq Urdu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-nastaliq-urdu@23/files/LhW4MUPbN-oZdNFcBy1-DJYsEoTq5pu3SvoMC9Y.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Nastaliq Urdu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-nastaliq-urdu@23/files/LhW4MUPbN-oZdNFcBy1-DJYsEoTq5pu3QfoMC9Y.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;
}
/* latin */
@font-face {
  font-family: 'Noto Nastaliq Urdu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-nastaliq-urdu@23/files/LhW4MUPbN-oZdNFcBy1-DJYsEoTq5pu3T_oM.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;
}
/* arabic */
@font-face {
  font-family: 'Noto Nastaliq Urdu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-nastaliq-urdu@23/files/LhW4MUPbN-oZdNFcBy1-DJYsEoTq5pu3SvoMC9Y.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Nastaliq Urdu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-nastaliq-urdu@23/files/LhW4MUPbN-oZdNFcBy1-DJYsEoTq5pu3QfoMC9Y.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;
}
/* latin */
@font-face {
  font-family: 'Noto Nastaliq Urdu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-noto-nastaliq-urdu@23/files/LhW4MUPbN-oZdNFcBy1-DJYsEoTq5pu3T_oM.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;
}

/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-jetbrains-mono@24/files/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-jetbrains-mono@24/files/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-jetbrains-mono@24/files/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-jetbrains-mono@24/files/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-jetbrains-mono@24/files/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-jetbrains-mono@24/files/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-jetbrains-mono@24/files/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-jetbrains-mono@24/files/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-jetbrains-mono@24/files/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-jetbrains-mono@24/files/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-jetbrains-mono@24/files/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.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;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn0.knowledgecity.com/packages/js/@google/font-jetbrains-mono@24/files/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.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;
}

/* ============================================================
   :root — KCDS PRIMITIVES, SEMANTIC, SCALES, COMPONENT METRICS
   Declared only here. Axis overrides redeclare via inheritance.
   ============================================================ */
:root {

  /* ── Tier 1 primitives (verbatim from designer doc) ── */

  /* Brand orange */
  --kcds-orange-50:  #FFF1E4;
  --kcds-orange-100: #FFE5CD;
  --kcds-orange-200: #FFD4AD;
  --kcds-orange-300: #FFBF83;
  --kcds-orange-400: #FFA551;
  --kcds-orange-500: #FF881A;
  --kcds-orange-600: #FF6F00;
  --kcds-orange-700: #C75F00;

  /* Neutrals */
  --kcds-gray-0:   #FFFFFF;
  --kcds-gray-50:  #F8F8F7;
  --kcds-gray-100: #F3F7F9;
  --kcds-gray-200: #EAEFF3;
  --kcds-gray-300: #EAEAEA;
  --kcds-gray-400: #CCD5DD;
  --kcds-gray-500: #9A9A9A;
  --kcds-gray-600: #74838A;
  --kcds-gray-700: #404A4F;
  --kcds-gray-800: #3F454A;
  --kcds-gray-900: #2C3E46;
  --kcds-gray-950: #1F2023;

  /* Status palettes */
  --kcds-green-50:  #ECFFEF;
  --kcds-green-400: #5FD473;
  --kcds-green-500: #35C04C;
  --kcds-green-700: #00A01A;
  --kcds-green-800: #00800F;
  --kcds-red-50:    #FFF0F0;
  --kcds-red-500:   #F03E3E;
  --kcds-red-600:   #D43333;
  --kcds-blue-50:   #E3EDFA;
  --kcds-blue-100:  #CCDEF5;
  --kcds-blue-200:  #ABC8EF;
  --kcds-blue-300:  #81ADE7;
  --kcds-blue-400:  #4D8BDD;
  --kcds-blue-500:  #1567D2;
  --kcds-blue-600:  #1258B2;
  --kcds-blue-700:  #0F4A97;
  /* Periwinkle — the Hire suite accent (ADR: 4th suite, 2026-09-23).
     Distinct from --kcds-violet-*, which stays reserved for AI augmentation. */
  --kcds-periwinkle-50:  #EDECFE;
  --kcds-periwinkle-100: #DEDBFD;
  --kcds-periwinkle-200: #C9C5FC;
  --kcds-periwinkle-300: #AFA8FB;
  --kcds-periwinkle-400: #8E84FA;
  --kcds-periwinkle-500: #6A5DF8;
  --kcds-periwinkle-600: #5A4FD3;
  --kcds-periwinkle-700: #4C43B3;
  --kcds-violet-50: #EDDFFF;
  --kcds-violet-500:#8543DA;
  --kcds-yellow-500:#FDCA16;
  --kcds-bronze-500:#EA9F59;

  /* Suite primaries. Each suite owns a full 50-700 ramp; the master orange is
     no longer a suite accent — it holds the no-category default and internal.
     Teal is retired: Comply moved to blue, and nothing else consumed it. */
  --kcds-vermilion-50:  #FAE8E3;
  --kcds-vermilion-100: #F6D5CB;
  --kcds-vermilion-200: #F0BAAA;
  --kcds-vermilion-300: #E99780;
  --kcds-vermilion-400: #E06D4C;
  --kcds-vermilion-500: #D63F13;
  --kcds-vermilion-600: #B63610;
  --kcds-vermilion-700: #9A2D0E;
  --kcds-emerald-50:  #E2F0EB;
  --kcds-emerald-100: #C9E4DA;
  --kcds-emerald-200: #A7D3C3;
  --kcds-emerald-300: #7BBDA5;
  --kcds-emerald-400: #45A280;
  --kcds-emerald-500: #0A8558;
  --kcds-emerald-600: #08714B;
  --kcds-emerald-700: #07603F;
  --kcds-slate-50:  #F1F5F9;
  --kcds-slate-100: #E2E8F0;
  --kcds-slate-500: #475569;
  --kcds-slate-700: #334155;

  /* Dark canvas primitives */
  --kcds-darkgray-canvas:         #0F1419;
  --kcds-darkgray-surface:        #181D22;
  --kcds-darkgray-elevated:       #21272D;
  --kcds-darkgray-subtle:         #1C2228;
  --kcds-darkgray-border:         #2A3038;
  --kcds-darkgray-border-default: #3A424B;
  --kcds-darkgray-border-strong:  #525C66;

  /* ── Tier 3 tenant (white-label) — unset; Tier 2 resolves through them. ── */
  --kcds-tenant-primary:        initial;
  --kcds-tenant-primary-hover:  initial;
  --kcds-tenant-primary-active: initial;
  --kcds-tenant-primary-fill:   initial;
  --kcds-tenant-primary-tint:   initial;
  --kcds-tenant-on-primary:     initial;
  /* One DOM node, background-image swapped per theme — never two <img>. */
  --kcds-tenant-logo-url:       initial;
  --kcds-tenant-logo-dark-url:  initial;
  --kcds-tenant-logo-white-url: initial;
  /* Tenant chrome */
  --kcds-tenant-header-bg:      initial;
  --kcds-tenant-footer-bg:      initial;
  --kcds-tenant-footer-text:    initial;

  /* ── Tier 2 semantic (light, legacy orange — Indirection rule) ── */
  --kcds-color-primary:         var(--kcds-tenant-primary,        #FF881A);
  --kcds-color-primary-hover:   var(--kcds-tenant-primary-hover,  #FF6F00);
  --kcds-color-primary-active:  var(--kcds-tenant-primary-active, #C75F00);
  --kcds-color-primary-fill:    var(--kcds-tenant-primary-fill,   var(--kcds-orange-100));
  --kcds-color-primary-tint:    var(--kcds-tenant-primary-tint,   var(--kcds-orange-50));
  --kcds-color-on-primary:      var(--kcds-tenant-on-primary,     #FFFFFF);
  --kcds-color-on-primary-tint: #C75F00;


  --kcds-color-text-primary:       #1F2023;   /* learner / public surfaces */
  --kcds-color-text-primary-admin: #2C3E46;   /* admin / workspace surfaces (slightly cooler) */
  /* WCAG 2.1 AA fix (2026-06-04): legacy values #9A9A9A / #74838A failed
     1.4.3 (~2.8:1 / ~3.6:1 on white). Darkened to clear 4.5:1 on white
     (#737373 ≈ 4.5:1, #5E6970 ≈ 5.1:1). Sync with kc-design-foundations
     when designer-approved — this snapshot leads the source until then. */
  --kcds-color-text-secondary:     #737373;
  --kcds-color-text-tertiary:      #5E6970;
  --kcds-color-text-disabled:      #CCD5DD;
  --kcds-color-text-link:          #FF881A;
  --kcds-color-text-on-dark:       #FFFFFF;   /* text on dark hero / footer */

  --kcds-color-surface-default:     #FFFFFF;
  --kcds-color-surface-canvas:      #F3F7F9;   /* admin page bg */
  --kcds-color-surface-canvas-warm: #FFEDDC;   /* learner Portal page bg */
  /* subtle = resting plane (equals canvas by design); hover = one step darker. */
  --kcds-color-surface-subtle:      #F3F7F9;   /* gray-100 — resting tinted plane */
  --kcds-color-surface-hover:       #EAEFF3;   /* gray-200 — transient pointer state */
  --kcds-color-backdrop:            rgba(31, 32, 35, 0.40);   /* modal / drawer scrim — themable in dark */
  --kcds-color-surface-elevated:    #FFFFFF;
  --kcds-color-surface-disabled:    #EAEAEA;   /* disabled control surface */
  --kcds-color-surface-dark:        #1F2023;
  --kcds-color-surface-tile-day:    #FFFFFF;   /* calendar day card */

  /* Track background — for progress bars, sliders, meters, sentiment
   * bars sitting inside white panels. Needs contrast against the panel
   * it sits on, not subtle plane tones. Dark-mode value is tuned for
   * 1.67:1 against `--kcds-darkgray-surface` (designer's own ratio). */
  --kcds-color-track-bg:            var(--kcds-gray-200);

  --kcds-color-border-default:  #CCD5DD;
  --kcds-color-border-subtle:   #EAEFF3;
  --kcds-color-border-strong:   #74838A;
  --kcds-color-border-focus:    #FF881A;

  --kcds-color-status-success:  #00A01A;
  --kcds-color-status-error:    #F03E3E;
  --kcds-color-status-warning:  #FF881A;
  --kcds-color-status-info:     var(--kcds-blue-500);
  --kcds-color-status-featured: #8543DA;
  --kcds-color-ai-suggestion:   #8543DA;
  --kcds-color-ai-suggestion-bg:#EDDFFF;
  --kcds-color-ai-bg:           var(--kcds-violet-50);
  --kcds-color-ai-border:       rgba(133, 67, 218, 0.25);
  --kcds-color-ai-flagged:      #FDCA16;        /* AI flagged for human review */
  --kcds-color-ai-flagged-bg:   #FFF8E6;

  /* Status -fill values (saturated mid-tone for inline icons inside tinted bg). */
  --kcds-color-status-success-fill:  #35C04C;
  --kcds-color-status-error-fill:    #F03E3E;
  --kcds-color-status-warning-fill:  #FDCA16;
  --kcds-color-status-info-fill:     var(--kcds-blue-500);
  --kcds-color-status-featured-fill: #8543DA;
  --kcds-color-status-neutral:       #74838A;
  --kcds-color-status-neutral-bg:    #F3F7F9;

  /* Severity tiers (1=info → 5=critical) — risk / incident classification. */
  --kcds-color-severity-1: var(--kcds-blue-500);
  --kcds-color-severity-2: #35C04C;
  --kcds-color-severity-3: #FDCA16;
  --kcds-color-severity-4: #FF881A;
  --kcds-color-severity-5: #F03E3E;

  /* Sensitivity tiers (4 levels per designer spec). */
  --kcds-color-sensitivity-public:           #9A9A9A;
  --kcds-color-sensitivity-internal:         var(--kcds-blue-500);
  --kcds-color-sensitivity-confidential:     #FF881A;
  --kcds-color-sensitivity-highly-sensitive: #F03E3E;

  /* Decorative tile pairs — KPI tiles, sidebar nav icons, category cards. */
  --kcds-color-tile-info-bg:     var(--kcds-blue-50);  --kcds-color-tile-info-fg:     var(--kcds-blue-500);
  --kcds-color-tile-featured-bg: #EDDFFF;  --kcds-color-tile-featured-fg: #8543DA;
  --kcds-color-tile-success-bg:  #ECFFEF;  --kcds-color-tile-success-fg:  #00A01A;
  --kcds-color-tile-warning-bg:  #FFEDDC;  --kcds-color-tile-warning-fg:  #FF881A;
  --kcds-color-tile-error-bg:    #FFF0F0;  --kcds-color-tile-error-fg:    #F03E3E;
  --kcds-color-tile-neutral-bg:  #F3F7F9;  --kcds-color-tile-neutral-fg:  #404A4F;

  /* Achievement badges (gold / silver / bronze / locked). */
  --kcds-color-achievement-gold-bg:    #FFF4D6; --kcds-color-achievement-gold-fg:    #FDCA16;
  --kcds-color-achievement-silver-bg:  #F3F7F9; --kcds-color-achievement-silver-fg:  #74838A;
  --kcds-color-achievement-bronze-bg:  #FFE6D1; --kcds-color-achievement-bronze-fg:  #EA9F59;
  --kcds-color-achievement-locked-bg:  #EAEFF3; --kcds-color-achievement-locked-fg:  #9A9A9A;

  /* Status soft-background tints — for "approaching deadline" cards,
   * inline success/error messages, info banners. Pair with the matching
   * --kcds-color-status-* foreground. Dark theme overrides below. */
  --kcds-color-status-success-bg: #ECFFEF;
  --kcds-color-status-error-bg:   #FFF0F0;
  --kcds-color-status-warning-bg: #FFF1E4;
  --kcds-color-status-info-bg:    var(--kcds-blue-50);

  /* Status border tokens — KCDS v1.5.0 (CMB-1247). */
  --kcds-color-status-success-border:  #A6DEAF;

  /* ADR 034 — text ON a status tint. The base hue is the colour of the thing;
     this is the colour text may be when it sits on that thing's own tint. */
  --kcds-color-status-success-on-tint:  #008616;
  --kcds-color-status-error-on-tint:    #DB1111;
  --kcds-color-status-warning-on-tint:  #AE5400;
  --kcds-color-status-info-on-tint:     var(--kcds-blue-500);
  --kcds-color-status-featured-on-tint: #823FD9;
  --kcds-color-status-neutral-on-tint:  #667379;
  --kcds-color-status-featured-bg:      var(--kcds-violet-50);

  /* Severity 1-5 — tint plus the text tier that may sit on it. */
  --kcds-color-severity-1-bg:#E8F0FA; --kcds-color-severity-1-on-tint: var(--kcds-blue-500);
  --kcds-color-severity-2-bg:#EBF9ED; --kcds-color-severity-2-on-tint:#238033;
  --kcds-color-severity-3-bg:#FFFAE8; --kcds-color-severity-3-on-tint:#8D6E01;
  --kcds-color-severity-4-bg:#FFF3E8; --kcds-color-severity-4-on-tint:#B35600;
  --kcds-color-severity-5-bg:#FEECEC; --kcds-color-severity-5-on-tint:#D61111;

  /* Data-sensitivity tiers — same shape. */
  --kcds-color-sensitivity-public-bg:#F5F5F5;            --kcds-color-sensitivity-public-on-tint:#6F6F6F;
  --kcds-color-sensitivity-internal-bg:#E8F0FA;          --kcds-color-sensitivity-internal-on-tint: var(--kcds-blue-500);
  --kcds-color-sensitivity-confidential-bg:#FFF3E8;      --kcds-color-sensitivity-confidential-on-tint:#B35600;
  --kcds-color-sensitivity-highly-sensitive-bg:#FEECEC;  --kcds-color-sensitivity-highly-sensitive-on-tint:#D61111;

  /* Icon sizes. */
  --kcds-icon-xs: 12px;  --kcds-icon-sm: 16px;  --kcds-icon-md: 20px;
  --kcds-icon-lg: 24px;  --kcds-icon-xl: 32px;

  --kcds-color-status-error-border:    #FABBBB;
  --kcds-color-status-warning-border:  #FFCFA3;
  --kcds-color-status-info-border:     #B7DCFF;
  --kcds-color-status-featured-border: #D4BDF2;
  --kcds-color-status-neutral-border:  #CCD5DD;

  /* Density-coupled tokens — resolve from data-kcds-density attribute.
   * Component authors who read these get density-awareness for free
   * without remembering to declare per-component compact overrides.
   * Default values are comfortable; [data-kcds-density="compact"] block
   * below redeclares for compact. Spec: 02-cross-cutting/density.md §
   * "Density tokens (9)". */
  --kcds-density-radius-control:   16px;     /* buttons, inputs */
  --kcds-density-radius-card:      16px;
  --kcds-density-radius-container: 32px;
  --kcds-density-gap:              16px;     /* form rows, list gaps */
  --kcds-density-section-gap:      32px;     /* between page sections */
  --kcds-density-page-padding:     24px;     /* content padding from page edge */
  --kcds-density-text-base:        16px;
  --kcds-density-input-height:     52px;     /* canonical comfortable input height */
  --kcds-density-button-height:    56px;     /* canonical comfortable medium button */

  /* KCDS v1.6.0 ADR 020 — per-suite accent ramp, semantic 50-700.
     Root default is the master orange. Per-suite blocks below
     override for Learn / Comply / Grow / Internal. Consume through the semantic
     accent-N names, which resolve per suite automatically. */
  --kcds-color-accent-50:  #FFF1E4;
  --kcds-color-accent-100: #FFE5CD;
  --kcds-color-accent-200: #FFD4AD;
  --kcds-color-accent-300: #FFBF83;
  --kcds-color-accent-400: #FFA551;
  --kcds-color-accent-500: #FF881A;
  --kcds-color-accent-600: #FF6F00;
  --kcds-color-accent-700: #C75F00;
  /* Back-compat: --kcds-color-primary-* is the pre-ADR-020 name for the
     same ramp. Consumers on the older name keep working; new consumers
     should prefer --kcds-color-accent-N. */
  --kcds-color-primary-50:  var(--kcds-color-accent-50);
  --kcds-color-primary-100: var(--kcds-color-accent-100);
  --kcds-color-primary-200: var(--kcds-color-accent-200);
  --kcds-color-primary-300: var(--kcds-color-accent-300);
  --kcds-color-primary-400: var(--kcds-color-accent-400);
  --kcds-color-primary-500: var(--kcds-color-accent-500);
  --kcds-color-primary-600: var(--kcds-color-accent-600);
  --kcds-color-primary-700: var(--kcds-color-accent-700);

  /* ── KCDS scales ── */

  /* Typography */
  --kcds-font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --kcds-font-mono:   'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --kcds-text-display: 80px;
  --kcds-text-h1:      32px;
  --kcds-text-h2:      24px;
  --kcds-text-h3:      20px;
  --kcds-text-h4:      18px;
  --kcds-text-h5:      16px;
  --kcds-text-body-l:  18px;
  --kcds-text-body-m:  16px;
  --kcds-text-body-s:  14px;
  --kcds-text-caption: 12px;
  --kcds-text-label:   11px;
  --kcds-text-link:    16px;        /* same px as body-m; consumers use weight 700 */
  --kcds-line-height-tight:   1.2;
  --kcds-line-height-normal:  1.4;         /* KCDS v1.6.0 designer call — was 1.5; 1.5 stays available via -relaxed */
  --kcds-line-height-relaxed: 1.5;
  --kcds-font-weight-regular:  400;
  --kcds-font-weight-bold:     700;

  /* Spacing — pixel-named per designer doc */
  --kcds-spacing-0:   0;
  --kcds-spacing-2:   2px;          /* hairline — rare */
  --kcds-spacing-4:   4px;
  --kcds-spacing-8:   8px;
  --kcds-spacing-12:  12px;
  --kcds-spacing-16:  16px;
  --kcds-spacing-20:  20px;
  --kcds-spacing-24:  24px;
  --kcds-spacing-32:  32px;
  --kcds-spacing-40:  40px;
  --kcds-spacing-48:  48px;
  --kcds-spacing-64:  64px;
  --kcds-spacing-80:  80px;         /* marketing pages only */
  --kcds-spacing-128: 128px;        /* marketing-page hero */

  /* Container max-widths (per designer's containers). */
  --kcds-container-max-portal:  1632px;
  --kcds-container-max-content: 720px;
  --kcds-container-max-form:    480px;

  /* Radius */
  --kcds-radius-0:  0;
  --kcds-radius-2:  2px;            /* hairline — subtle softening */
  --kcds-radius-4:  4px;
  --kcds-radius-8:  8px;
  --kcds-radius-12: 12px;
  --kcds-radius-16: 16px;
  --kcds-radius-20: 20px;
  --kcds-radius-24: 24px;
  --kcds-radius-32: 32px;
  --kcds-radius-full: 9999px;
  --kcds-radius-md:  var(--kcds-radius-8);  /* KCDS v1.6.0 ADR 019 — compact control radius */

  /* Shadow */
  /* Six-tier elevation scale per designer spec.
   * Each is a two-shadow stack — immediate contact + softer ambient.
   * Cool-dark base (#1F2023) matches KCDS text colour; low opacity keeps
   * shadows subtle. Legacy sm/md/lg names kept as aliases below. */
  --kcds-shadow-0: none;
  --kcds-shadow-1: 0 1px 2px rgba(31,32,35,.04),
                   0 1px 3px rgba(31,32,35,.06);
  --kcds-shadow-2: 0 4px 8px rgba(31,32,35,.06),
                   0 2px 4px rgba(31,32,35,.04);
  --kcds-shadow-3: 0 12px 24px rgba(31,32,35,.08),
                   0 4px 8px rgba(31,32,35,.04);
  --kcds-shadow-4: 0 8px 16px -4px rgba(31,32,35,0.10),
                   0 16px 32px -8px rgba(31,32,35,0.10);
  --kcds-shadow-5: 0 12px 24px -6px rgba(31,32,35,0.12),
                   0 24px 48px -12px rgba(31,32,35,0.12);
  /* Aliases for legacy sm/md/lg consumers (pre-Phase 6). */
  --kcds-shadow-sm: var(--kcds-shadow-1);
  --kcds-shadow-md: var(--kcds-shadow-2);
  --kcds-shadow-lg: var(--kcds-shadow-3);

  /* Scrim tokens — backdrop opacity per overlay type. */
  --kcds-scrim-modal:  rgba(31,32,35,0.50);
  --kcds-scrim-drawer: rgba(31,32,35,0.30);
  --kcds-scrim-tour:   rgba(31,32,35,0.70);

  /* Z-index — 10 named tiers (extends earlier 8). */
  --kcds-z-base:       0;
  --kcds-z-raised:     10;
  --kcds-z-dropdown:   100;
  --kcds-z-popover:    200;
  --kcds-z-fixed-nav:  500;
  --kcds-z-overlay:    1000;
  --kcds-z-modal-back: 2000;
  --kcds-z-modal:      2001;
  --kcds-z-toast:      9000;
  --kcds-z-tour:       9500;

  /* Transition */
  --kcds-transition-fast:   120ms ease;
  --kcds-transition-normal: 200ms ease;
  --kcds-transition-slow:   320ms ease;

}

/* ── KCDS component metrics — comfortable density (default) ──
 * Split into its own selector list so a scoped subtree can FORCE
 * comfortable even when an ancestor has data-kcds-density="compact".
 * Side-by-side previews use this pattern. The attribute is listed
 * alongside the class so it works for both its values: compact had a
 * selector and comfortable did not, so writing the attribute out with
 * the other value silently did nothing.
 * Density compact (selector below) redeclares only this same set; the
 * Layer 2 re-substitution near it carries both into --k2-*. */
:root,
[data-kcds-density="comfortable"],
.density--comfortable {
  --kcds-button-height-sm:    48px;
  --kcds-button-height-md:    56px;
  --kcds-button-height-lg:    64px;
  --kcds-button-padding-x-sm: 16px;
  --kcds-button-padding-x-md: 24px;
  --kcds-button-padding-x-lg: 32px;
  /* Constant across sizes within a density — actions.md "Typography". */
  --kcds-button-font-size-sm: 16px;
  --kcds-button-font-size-md: 16px;
  --kcds-button-font-size-lg: 16px;
  --kcds-button-font-weight:  400;
  --kcds-button-radius-sm:    16px;
  --kcds-button-radius-md:    20px;
  --kcds-button-radius-lg:    24px;

  /* Input Large is 56px, NOT the button's 64px — separate scales. */
  --kcds-input-height-sm: 48px;
  --kcds-input-height-md: 52px;
  --kcds-input-height-lg: 56px;
  --kcds-input-radius-sm: 16px;
  --kcds-input-radius-md: 20px;
  --kcds-input-radius-lg: 24px;
  --kcds-input-padding-x: 16px;
  --kcds-input-font-size: 16px;

  --kcds-card-radius:    16px;   /* comfortable density-radius-card per radius.md */
  --kcds-card-padding:   24px;
  --kcds-dialog-radius:  16px;   /* matches comfortable card radius */
  --kcds-dropdown-radius:12px;
  --kcds-toast-radius:   12px;
  --kcds-tooltip-radius: 8px;
  --kcds-tooltip-padding: 6px 10px;
  --kcds-alert-radius:   12px;
  --kcds-alert-padding:  16px;
  --kcds-badge-radius:   9999px;
  --kcds-badge-padding:  4px 12px;
  --kcds-badge-font-size:12px;
  --kcds-badge-font-weight: 700;

  --kcds-table-cell-padding: 12px 16px;
  --kcds-table-font-size:    14px;
  --kcds-table-header-font-size: 12px;
  --kcds-table-header-font-weight: 700;

  --kcds-avatar-size-sm: 28px;
  --kcds-avatar-size-md: 40px;
  --kcds-avatar-size-lg: 56px;
  --kcds-avatar-size-xl: 80px;

  --kcds-progress-height: 8px;
  --kcds-progress-radius: 9999px;

  --kcds-icon-size-sm:  14px;
  --kcds-icon-size-md:  18px;
  --kcds-icon-size-lg:  20px;
}

/* ============================================================
   K2 BRIDGE — chains all --k2-* through --kcds-*
   Declared at :root AND [data-theme="kcds"] so a nested
   <main data-theme="kcds"> inside a non-KCDS parent reinstates
   the KCDS bridge for that subtree. NO --kcds-* declarations
   here — those stay at :root only so axis cascades through.
   ============================================================ */
:root,
[data-theme="kcds"] {

  /* ──────────────────────────────────────────────────────────
     K2 LAYER 2 — CANONICAL SEMANTIC API (v1.1.0-aligned)
     ──────────────────────────────────────────────────────────
     This is the API K2 components MUST consume. Verbose semantic
     names mirror KCDS v1.1.0 vocabulary 1:1, so any compliant
     design system can plug in by populating these tokens. The
     legacy short-name aliases below this block remain in place
     for backward compatibility during the v1.1.0 migration and
     will be removed once all components are ported.
     ────────────────────────────────────────────────────────── */

  /* Brand — semantic states (no numeric stops) */
  --k2-color-primary:           var(--kcds-color-primary);
  --k2-color-primary-hover:     var(--kcds-color-primary-hover);
  --k2-color-primary-active:    var(--kcds-color-primary-active);
  --k2-color-primary-tint:      var(--kcds-color-primary-tint);
  --k2-color-primary-fill:      var(--kcds-color-primary-fill);
  --k2-color-on-primary:        var(--kcds-color-on-primary);
  --k2-color-on-primary-tint:   var(--kcds-color-on-primary-tint);

  /* Theme-invariant "over media" tokens — stay identical in light/dark.
     Use for UI painted directly over photography or video (banner text,
     carousel overlays, media-viewer chrome) where the underlying content
     already provides its own contrast context. */
  --k2-color-static-white:   #ffffff;
  --k2-color-on-media:       #ffffff;
  --k2-color-scrim-dark:     rgba(0, 0, 0, 0.5);
  --k2-color-scrim-darker:   rgba(0, 0, 0, 0.7);

  /* Media-thumbnail size scale — for preview affordances on file-upload,
     avatars-in-list, image galleries. Never scaled by density (thumb
     dimensions read the same across compact/comfortable). */
  --k2-media-thumb-sm: 64px;
  --k2-media-thumb-md: 96px;
  --k2-media-thumb-lg: 150px;

  /* Text */
  --k2-color-text-primary:        var(--kcds-color-text-primary);
  --k2-color-text-primary-admin:  var(--kcds-color-text-primary-admin);
  --k2-color-text-secondary:      var(--kcds-color-text-secondary);
  --k2-color-text-tertiary:       var(--kcds-color-text-tertiary);
  --k2-color-text-disabled:       var(--kcds-color-text-disabled);
  --k2-color-text-on-dark:        var(--kcds-color-text-on-dark);
  --k2-color-text-link:           var(--kcds-color-text-link);

  /* Surface */
  --k2-color-surface-default:      var(--kcds-color-surface-default);
  --k2-color-surface-canvas:       var(--kcds-color-surface-canvas);
  --k2-color-surface-canvas-warm:  var(--kcds-color-surface-canvas-warm);
  --k2-color-surface-subtle:       var(--kcds-color-surface-subtle);
  --k2-color-surface-hover:        var(--kcds-color-surface-hover);
  --k2-color-backdrop:             var(--kcds-color-backdrop);
  --k2-color-surface-elevated:     var(--kcds-color-surface-elevated);
  --k2-color-surface-disabled:     var(--kcds-color-surface-disabled);
  --k2-color-surface-dark:         var(--kcds-color-surface-dark);
  --k2-color-surface-tile-day:     var(--kcds-color-surface-tile-day);

  /* Border */
  --k2-color-border-default:    var(--kcds-color-border-default);
  --k2-color-border-subtle:     var(--kcds-color-border-subtle);
  --k2-color-border-strong:     var(--kcds-color-border-strong);
  --k2-color-border-focus:      var(--kcds-color-border-focus);

  /* Status — success / warning / error / info / featured / neutral */
  --k2-color-status-success:        var(--kcds-color-status-success);
  --k2-color-status-success-bg:     var(--kcds-color-status-success-bg);
  --k2-color-status-success-fill:   var(--kcds-color-status-success-fill);
  --k2-color-status-success-border: var(--kcds-color-status-success-border);
  --k2-color-status-warning:        var(--kcds-color-status-warning);
  --k2-color-status-warning-bg:     var(--kcds-color-status-warning-bg);
  --k2-color-status-warning-fill:   var(--kcds-color-status-warning-fill);
  --k2-color-status-warning-border: var(--kcds-color-status-warning-border);
  --k2-color-status-error:          var(--kcds-color-status-error);
  --k2-color-status-error-bg:       var(--kcds-color-status-error-bg);
  --k2-color-status-error-fill:     var(--kcds-color-status-error-fill);
  --k2-color-status-error-border:   var(--kcds-color-status-error-border);
  --k2-color-status-info:           var(--kcds-color-status-info);
  --k2-color-status-info-bg:        var(--kcds-color-status-info-bg);
  --k2-color-status-info-border:    var(--kcds-color-status-info-border);
  --k2-color-status-featured:       var(--kcds-color-status-featured);
  --k2-color-status-featured-bg:    var(--kcds-color-status-featured-bg);
  --k2-color-status-featured-border:var(--kcds-color-status-featured-border);
  /* ADR 034 text-on-tint tier, bridged so components read --k2-* only. */
  --k2-color-status-success-on-tint:  var(--kcds-color-status-success-on-tint,  currentColor);
  --k2-color-status-error-on-tint:    var(--kcds-color-status-error-on-tint,    currentColor);
  --k2-color-status-warning-on-tint:  var(--kcds-color-status-warning-on-tint,  currentColor);
  --k2-color-status-info-on-tint:     var(--kcds-color-status-info-on-tint,     currentColor);
  --k2-color-status-featured-on-tint: var(--kcds-color-status-featured-on-tint, currentColor);
  --k2-color-status-neutral-on-tint:  var(--kcds-color-status-neutral-on-tint,  currentColor);
  --k2-color-status-featured-bg:      var(--kcds-color-status-featured-bg);

  /* KCDS defines no on-tint tier for the brand accent or the AI hue, so these
     fall back to today's value and change nothing. They exist so the component
     reads a token rather than a hue, and picks up a real value the day one is
     specified — the brand orange does not clear AA on its own tint at any
     current ramp step, which is a palette decision, not a component one. */
  --k2-color-primary-on-tint: var(--kcds-color-primary-on-tint, var(--k2-color-primary-active));
  --k2-color-ai-on-tint:      var(--kcds-color-ai-on-tint,      var(--k2-color-ai-suggestion));

  --k2-color-severity-1-bg: var(--kcds-color-severity-1-bg); --k2-color-severity-1-on-tint: var(--kcds-color-severity-1-on-tint);
  --k2-color-severity-2-bg: var(--kcds-color-severity-2-bg); --k2-color-severity-2-on-tint: var(--kcds-color-severity-2-on-tint);
  --k2-color-severity-3-bg: var(--kcds-color-severity-3-bg); --k2-color-severity-3-on-tint: var(--kcds-color-severity-3-on-tint);
  --k2-color-severity-4-bg: var(--kcds-color-severity-4-bg); --k2-color-severity-4-on-tint: var(--kcds-color-severity-4-on-tint);
  --k2-color-severity-5-bg: var(--kcds-color-severity-5-bg); --k2-color-severity-5-on-tint: var(--kcds-color-severity-5-on-tint);

  --k2-color-sensitivity-public-bg:            var(--kcds-color-sensitivity-public-bg);
  --k2-color-sensitivity-public-on-tint:       var(--kcds-color-sensitivity-public-on-tint);
  --k2-color-sensitivity-internal-bg:          var(--kcds-color-sensitivity-internal-bg);
  --k2-color-sensitivity-internal-on-tint:     var(--kcds-color-sensitivity-internal-on-tint);
  --k2-color-sensitivity-confidential-bg:      var(--kcds-color-sensitivity-confidential-bg);
  --k2-color-sensitivity-confidential-on-tint: var(--kcds-color-sensitivity-confidential-on-tint);
  --k2-color-sensitivity-highly-sensitive-bg:      var(--kcds-color-sensitivity-highly-sensitive-bg);
  --k2-color-sensitivity-highly-sensitive-on-tint: var(--kcds-color-sensitivity-highly-sensitive-on-tint);

  --k2-icon-xs: var(--kcds-icon-xs); --k2-icon-sm: var(--kcds-icon-sm); --k2-icon-md: var(--kcds-icon-md);
  --k2-icon-lg: var(--kcds-icon-lg); --k2-icon-xl: var(--kcds-icon-xl);
  --k2-color-status-neutral:        var(--kcds-color-status-neutral);
  --k2-color-status-neutral-bg:     var(--kcds-color-status-neutral-bg);
  --k2-color-status-neutral-border: var(--kcds-color-status-neutral-border);

  /* AI augmentation */
  --k2-color-ai-suggestion:     var(--kcds-color-ai-suggestion);
  --k2-color-ai-suggestion-bg:  var(--kcds-color-ai-suggestion-bg);
  --k2-color-ai-bg:             var(--kcds-color-ai-bg);
  --k2-color-ai-border:         var(--kcds-color-ai-border);
  --k2-color-ai-flagged:        var(--kcds-color-ai-flagged);
  --k2-color-ai-flagged-bg:     var(--kcds-color-ai-flagged-bg);

  /* Severity 1-5 (compliance / safety / PIP) */
  --k2-color-severity-1:        var(--kcds-color-severity-1);
  --k2-color-severity-2:        var(--kcds-color-severity-2);
  --k2-color-severity-3:        var(--kcds-color-severity-3);
  --k2-color-severity-4:        var(--kcds-color-severity-4);
  --k2-color-severity-5:        var(--kcds-color-severity-5);

  /* Sensitivity tiers (PII classification) */
  --k2-color-sensitivity-public:           var(--kcds-color-sensitivity-public);
  --k2-color-sensitivity-internal:         var(--kcds-color-sensitivity-internal);
  --k2-color-sensitivity-confidential:     var(--kcds-color-sensitivity-confidential);
  --k2-color-sensitivity-highly-sensitive: var(--kcds-color-sensitivity-highly-sensitive);

  /* Decorative tiles — bg / fg pairs */
  --k2-color-tile-info-bg:      var(--kcds-color-tile-info-bg);
  --k2-color-tile-info-fg:      var(--kcds-color-tile-info-fg);
  --k2-color-tile-featured-bg:  var(--kcds-color-tile-featured-bg);
  --k2-color-tile-featured-fg:  var(--kcds-color-tile-featured-fg);
  --k2-color-tile-success-bg:   var(--kcds-color-tile-success-bg);
  --k2-color-tile-success-fg:   var(--kcds-color-tile-success-fg);
  --k2-color-tile-warning-bg:   var(--kcds-color-tile-warning-bg);
  --k2-color-tile-warning-fg:   var(--kcds-color-tile-warning-fg);
  --k2-color-tile-neutral-bg:   var(--kcds-color-tile-neutral-bg);
  --k2-color-tile-neutral-fg:   var(--kcds-color-tile-neutral-fg);

  /* Achievement badges */
  --k2-color-achievement-gold-bg:    var(--kcds-color-achievement-gold-bg);
  --k2-color-achievement-gold-fg:    var(--kcds-color-achievement-gold-fg);
  --k2-color-achievement-silver-bg:  var(--kcds-color-achievement-silver-bg);
  --k2-color-achievement-silver-fg:  var(--kcds-color-achievement-silver-fg);
  --k2-color-achievement-bronze-bg:  var(--kcds-color-achievement-bronze-bg);
  --k2-color-achievement-bronze-fg:  var(--kcds-color-achievement-bronze-fg);
  --k2-color-achievement-locked-bg:  var(--kcds-color-achievement-locked-bg);
  --k2-color-achievement-locked-fg:  var(--kcds-color-achievement-locked-fg);

  /* Additional surface / utility */
  --k2-color-track-bg:          var(--kcds-color-track-bg);
  --k2-color-tile-error-bg:     var(--kcds-color-tile-error-bg, var(--kcds-color-status-error-bg));
  --k2-color-tile-error-fg:     var(--kcds-color-tile-error-fg, var(--kcds-color-status-error));
  --k2-scrim-modal:             var(--kcds-scrim-modal, rgba(31, 32, 35, 0.40));

  /* Spacing scale (4px grid, semantic on top of legacy t-shirts below) */
  --k2-space-0:    var(--kcds-spacing-0);
  --k2-space-2:    var(--kcds-spacing-2);
  --k2-space-4:    var(--kcds-spacing-4);
  --k2-space-8:    var(--kcds-spacing-8);
  --k2-space-12:   var(--kcds-spacing-12);
  --k2-space-16:   var(--kcds-spacing-16);
  --k2-space-20:   var(--kcds-spacing-20);
  --k2-space-24:   var(--kcds-spacing-24);
  --k2-space-32:   var(--kcds-spacing-32);
  --k2-space-40:   var(--kcds-spacing-40);
  --k2-space-48:   var(--kcds-spacing-48);
  --k2-space-64:   var(--kcds-spacing-64);
  --k2-space-80:   var(--kcds-spacing-80);
  --k2-space-128:  var(--kcds-spacing-128);

  /* Radius scale */
  --k2-radius-0:    var(--kcds-radius-0);
  --k2-radius-2:    var(--kcds-radius-2);
  --k2-radius-4:    var(--kcds-radius-4);
  --k2-radius-8:    var(--kcds-radius-8);
  --k2-radius-12:   var(--kcds-radius-12);
  --k2-radius-16:   var(--kcds-radius-16);
  --k2-radius-24:   var(--kcds-radius-24);
  --k2-radius-32:   var(--kcds-radius-32);

  /* Typography — canonical semantic */
  --k2-text-h1:        var(--kcds-text-h1);
  --k2-text-h2:        var(--kcds-text-h2);
  --k2-text-h3:        var(--kcds-text-h3);
  --k2-text-h4:        var(--kcds-text-h4);
  --k2-text-h5:        var(--kcds-text-h5);
  --k2-text-body-l:    var(--kcds-text-body-l);
  --k2-text-body-m:    var(--kcds-text-body-m);
  --k2-text-body-s:    var(--kcds-text-body-s);
  --k2-text-caption:   var(--kcds-text-caption);
  --k2-text-label:     var(--kcds-text-label);

  /* Typography slot aliases used by some component CSS — same values
     as the canonical h1/h2/h4/h5 above, exposed under the alternate
     names KCDS publishes (heading-2, heading-m, heading-s, display-s).
     A bridge populates them; components can use either name. */
  --k2-text-display-s:    var(--kcds-text-display-s, var(--kcds-text-display, 80px));
  --k2-text-heading-2:    var(--kcds-text-heading-2, var(--kcds-text-h2));
  --k2-text-heading-m:    var(--kcds-text-heading-m, var(--kcds-text-h4));
  --k2-text-heading-s:    var(--kcds-text-heading-s, var(--kcds-text-h5));
  --k2-text-weight-bold:  var(--kcds-text-weight-bold, var(--kcds-font-weight-bold, 700));

  /* Motion / easing slot */
  --k2-ease-out:        var(--kcds-ease-out, cubic-bezier(0.16, 1, 0.3, 1));

  /* ──────────────────────────────────────────────────────────
     K2 LAYER 2 — ALTERNATE NAME FORMS (semantic synonyms)
     ──────────────────────────────────────────────────────────
     Same values as the canonical semantic vocabulary above,
     exposed under shorter / numeric-stop / t-shirt names that
     some authors prefer:

       --k2-text             ≡ --k2-color-text-primary
       --k2-bg               ≡ --k2-color-surface-canvas
       --k2-border           ≡ --k2-color-border-default
       --k2-space-md         ≡ --k2-space-12
       --k2-radius-md        ≡ --k2-radius-12
       --k2-color-primary-500≡ --k2-color-primary
       --k2-color-success-50 ≡ --k2-color-status-success-bg
       …

     Both forms are valid K2 API. Pick whichever reads better in
     context — they resolve to identical values and follow the
     same dark / category cascades.

     This block is SEPARATE from the per-component slot tokens
     below (--k2-button-*, --k2-input-*, --k2-card-*, etc.).
     Those slots enable per-component / per-instance customization
     and are an intentional, permanent part of K2's API.
     ────────────────────────────────────────────────────────── */

  /* Typography */
  --k2-font-family: var(--kcds-font-family);
  --k2-font-mono:   var(--kcds-font-mono);
  --k2-font-size-xs:   var(--kcds-text-label);     /* 11px */
  --k2-font-size-sm:   var(--kcds-text-caption);   /* 12px */
  --k2-font-size-base: var(--kcds-text-body-s);    /* 14px */
  --k2-font-size-md:   var(--kcds-text-body-s);    /* 14px */
  --k2-font-size-lg:   var(--kcds-text-body-m);    /* 16px */
  --k2-font-size-xl:   var(--kcds-text-body-l);    /* 18px */
  --k2-font-size-2xl:  var(--kcds-text-h2);
  --k2-font-size-3xl:  var(--kcds-text-h1);
  --k2-font-weight-normal:   var(--kcds-font-weight-regular);
  --k2-font-weight-medium:   var(--kcds-font-weight-regular);
  --k2-font-weight-bold:     var(--kcds-font-weight-bold);
  --k2-line-height-tight:    var(--kcds-line-height-tight);
  --k2-line-height-normal:   var(--kcds-line-height-normal);
  --k2-line-height-relaxed:  var(--kcds-line-height-relaxed);
  --k2-letter-spacing-tight: -0.011em;
  --k2-letter-spacing-normal: 0;
  --k2-letter-spacing-wide:   0.04em;

  /* Primary color scale — back-compat alias for the pre-ADR-020 name.
     New consumers should prefer --k2-color-accent-* (semantic per-suite ramp). */
  --k2-color-primary-50:  var(--kcds-color-primary-50);
  --k2-color-primary-100: var(--kcds-color-primary-100);
  --k2-color-primary-200: var(--kcds-color-primary-200);
  --k2-color-primary-300: var(--kcds-color-primary-300);
  --k2-color-primary-400: var(--kcds-color-primary-400);
  --k2-color-primary-500: var(--kcds-color-primary-500);
  --k2-color-primary-600: var(--kcds-color-primary-600);
  --k2-color-primary-700: var(--kcds-color-primary-700);

  /* KCDS v1.6.0 ADR 020 — suite accent ramp (semantic 50-700). Same values
     as --k2-color-primary-*, exposed under the KCDS canonical accent name. */
  --k2-color-accent-50:  var(--kcds-color-accent-50);
  --k2-color-accent-100: var(--kcds-color-accent-100);
  --k2-color-accent-200: var(--kcds-color-accent-200);
  --k2-color-accent-300: var(--kcds-color-accent-300);
  --k2-color-accent-400: var(--kcds-color-accent-400);
  --k2-color-accent-500: var(--kcds-color-accent-500);
  --k2-color-accent-600: var(--kcds-color-accent-600);
  --k2-color-accent-700: var(--kcds-color-accent-700);

  /* Status families */
  --k2-color-success-50:  var(--kcds-green-50);
  --k2-color-success-100: var(--kcds-green-50);
  --k2-color-success-200: #C9F2D2;
  --k2-color-success-400: var(--kcds-green-400);
  --k2-color-success-500: var(--kcds-green-500);
  --k2-color-success-600: var(--kcds-color-status-success);
  --k2-color-success-700: var(--kcds-green-700);
  --k2-color-success-800: var(--kcds-green-800);

  --k2-color-warning-50:  #FFF8E6;
  --k2-color-warning-100: #FFF3D6;
  --k2-color-warning-200: #FFE4A8;
  --k2-color-warning-500: var(--kcds-color-status-warning);
  --k2-color-warning-600: var(--kcds-color-primary-hover);
  --k2-color-warning-700: var(--kcds-color-primary-active);

  --k2-color-danger-50:  var(--kcds-red-50);
  --k2-color-danger-100: #FFE0E0;
  --k2-color-danger-200: #FFB8B8;
  --k2-color-danger-500: var(--kcds-color-status-error);
  --k2-color-danger-600: var(--kcds-red-600);
  --k2-color-danger-700: #A82323;

  --k2-color-info-50:  var(--kcds-blue-50);
  --k2-color-info-100: #CEEAFF;
  --k2-color-info-500: var(--kcds-color-status-info);
  --k2-color-info-600: #1E6FBF;
  --k2-color-info-700: #1E5798;

  --k2-color-neutral-50:  var(--kcds-gray-50);
  --k2-color-neutral-100: var(--kcds-gray-100);
  --k2-color-neutral-200: var(--kcds-gray-200);
  --k2-color-neutral-300: var(--kcds-gray-300);
  --k2-color-neutral-400: var(--kcds-gray-400);
  --k2-color-neutral-500: var(--kcds-gray-500);
  --k2-color-neutral-600: var(--kcds-gray-600);
  --k2-color-neutral-700: var(--kcds-gray-700);
  --k2-color-neutral-800: var(--kcds-gray-900);
  --k2-color-neutral-900: var(--kcds-gray-950);

  --k2-color-ai-50:  var(--kcds-violet-50);
  --k2-color-ai-500: var(--kcds-color-ai-suggestion);
  --k2-color-ai-600: #6A2EB6;
  --k2-color-ai-700: #4F2782;

  /* Surface / text / borders */
  --k2-bg:              var(--kcds-color-surface-canvas);
  --k2-bg-secondary:    var(--kcds-color-surface-subtle);
  --k2-bg-tertiary:     var(--kcds-gray-200);
  --k2-surface:         var(--kcds-color-surface-default);
  --k2-surface-raised:  var(--kcds-color-surface-elevated);
  --k2-surface-overlay: rgba(255,255,255,0.85);
  --k2-surface-glass:   rgba(255,255,255,0.72);
  --k2-overlay:         rgba(31,32,35,0.40);

  --k2-text:            var(--kcds-color-text-primary);
  --k2-text-secondary:  var(--kcds-color-text-secondary);
  --k2-text-tertiary:   var(--kcds-color-text-tertiary);
  --k2-text-quaternary: var(--kcds-color-text-disabled);
  --k2-text-on-primary: var(--kcds-color-on-primary);
  --k2-text-link:       var(--kcds-color-text-link);

  --k2-border:          var(--kcds-color-border-default);
  --k2-border-hover:    var(--kcds-color-border-strong);
  --k2-border-focus:    var(--kcds-color-border-focus);
  --k2-border-subtle:   var(--kcds-color-border-subtle);

  /* Focus ring — 3px tinted box-shadow */
  /* Canonical KCDS focus: 2px solid ring at the category accent color
     (3:1 contrast against any KC surface — passes WCAG 1.4.11). The
     earlier 35%-opacity tint was visually quieter but fell below 3:1
     on white surfaces and failed the contrast rule. */
  --k2-focus-ring:
    0 0 0 2px var(--kcds-color-surface-default, #FFFFFF),
    0 0 0 4px var(--kcds-color-border-focus);

  /* Radius t-shirts */
  --k2-radius-sm:   var(--kcds-radius-8);
  /* --kcds-radius-md is the 8px compact control radius; Layer 2 pointed at radius-12,
     so every component falling back to --k2-radius-md rendered 12px. */
  --k2-radius-md:   var(--kcds-radius-md);
  --k2-radius-lg:   var(--kcds-radius-16);
  --k2-radius-xl:   var(--kcds-radius-20);
  --k2-radius-2xl:  var(--kcds-radius-24);
  --k2-radius-full: var(--kcds-radius-full);

  /* Spacing t-shirts */
  --k2-space-0:   0;
  --k2-space-px:  1px;
  --k2-space-0-5: 2px;
  --k2-space-xs:  var(--kcds-spacing-4);
  --k2-space-sm:  var(--kcds-spacing-8);
  --k2-space-md:  var(--kcds-spacing-12);
  --k2-space-lg:  var(--kcds-spacing-16);
  --k2-space-xl:  var(--kcds-spacing-24);
  --k2-space-2xl: var(--kcds-spacing-32);
  --k2-space-3xl: var(--kcds-spacing-48);
  --k2-space-4xl: var(--kcds-spacing-64);

  /* Tenant (Tier 3) on the K2 layer — either layer works. */
  --k2-tenant-primary:        var(--kcds-tenant-primary);
  --k2-tenant-primary-hover:  var(--kcds-tenant-primary-hover);
  --k2-tenant-primary-active: var(--kcds-tenant-primary-active);
  --k2-tenant-primary-fill:   var(--kcds-tenant-primary-fill);
  --k2-tenant-primary-tint:   var(--kcds-tenant-primary-tint);
  --k2-tenant-on-primary:     var(--kcds-tenant-on-primary);
  --k2-tenant-logo-url:       var(--kcds-tenant-logo-url);
  --k2-tenant-logo-dark-url:  var(--kcds-tenant-logo-dark-url);
  --k2-tenant-logo-white-url: var(--kcds-tenant-logo-white-url);
  --k2-tenant-header-bg:      var(--kcds-tenant-header-bg);
  --k2-tenant-footer-bg:      var(--kcds-tenant-footer-bg);
  --k2-tenant-footer-text:    var(--kcds-tenant-footer-text);

  /* <k2-logo>: KCDS is KC's design system, so the DS default mark is
     the KC mark. Inlined as a data: URL so:
       (1) no relative URL = no CDN/dev path differences,
       (2) ::part can't reach into nested shadow roots, but custom
           properties DO inherit through shadow DOM cleanly, so the
           var() inside K2LogoStyles picks it up at any nesting depth.
     Apps that want a different default just override this var on
     <html> / their app root; apps with their own brand asset slot
     it in via <img slot="mark"> (highest-priority override). */
  /* This theme's mark. White-labelling is a separate axis, not folded in here:
     k2-logo reads the --kcds-tenant-logo-* slots itself and replaces the whole
     lockup, and folding the tenant URL into the mark slot squeezed a wide tenant
     lockup into the 34px mark box. */
  --k2-logo-mark-src: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 147 147' fill='none'%3E%3Cpath d='M130.475 16.3742C113.39 -0.712928 67.0054 -4.38757 36.9701 5.16651V71.3101L55.1566 48.3436H72.9757L49.0944 75.5359L73.1594 102.545H55.3403L36.9701 79.4862V102.545H23.2843V11.1378C20.7124 12.6995 18.3243 14.445 16.3954 16.3742C-5.46514 38.2383 -5.46514 108.608 16.3954 130.472C38.256 152.336 108.614 152.336 130.475 130.472C152.335 108.608 152.335 38.2383 130.475 16.3742ZM90.6112 87.5704C92.9074 90.4183 96.0304 91.7963 99.8881 91.7963C105.399 91.7963 109.073 89.3159 110.727 84.3551H125.515C124.045 90.2345 121.014 94.9197 116.605 98.3187C112.196 101.81 106.593 103.463 99.98 103.463C94.7445 103.463 90.1519 102.361 86.1105 100.064C82.069 97.6757 78.8542 94.4604 76.6498 90.2345C74.3535 86.0087 73.2513 81.0479 73.2513 75.4441C73.2513 69.8403 74.3535 64.9714 76.6498 60.7455C78.9461 56.5197 82.069 53.2125 86.1105 50.9158C90.1519 48.5273 94.8363 47.4249 99.98 47.4249C106.685 47.4249 112.288 49.0785 116.605 52.4776C121.014 55.7847 124.045 60.4699 125.515 66.5331H110.727C109.9 64.1446 108.614 62.3991 106.685 61.0211C104.848 59.6431 102.552 59.0001 99.7963 59.0001C95.8467 59.0001 92.8156 60.4699 90.5193 63.3178C88.223 66.1656 87.1208 70.1159 87.1208 75.3522C87.1208 80.5886 88.223 84.5388 90.5193 87.3867L90.6112 87.5704Z' fill='%23FF881A'/%3E%3Cpath d='M37.062 102.453V79.3944L55.4323 102.453H73.2514L49.1864 75.4442L73.0677 48.2518H55.2486L37.062 71.2183V5.07471C31.9184 6.7283 27.3258 8.74935 23.3762 11.1379V102.453H37.062Z' fill='white'/%3E%3Cpath d='M99.98 59.1839C102.736 59.1839 105.032 59.827 106.869 61.205C108.798 62.4911 110.084 64.3284 110.91 66.7169H125.698C124.229 60.6538 121.198 55.9686 116.789 52.6614C112.38 49.2624 106.869 47.6088 100.164 47.6088C94.9282 47.6088 90.3357 48.803 86.2942 51.0997C82.2528 53.3963 79.038 56.6117 76.8336 60.9294C74.5373 65.0633 73.4351 70.0241 73.4351 75.6279C73.4351 81.2318 74.5373 86.1925 76.8336 90.4184C79.1298 94.5524 82.2528 97.8595 86.2942 100.248C90.3357 102.545 95.0201 103.647 100.164 103.647C106.777 103.647 112.38 101.902 116.789 98.5026C121.198 95.0117 124.229 90.4184 125.698 84.5389H110.91C109.257 89.4997 105.583 91.9801 100.072 91.9801C96.1223 91.9801 93.0912 90.6021 90.7949 87.7543C88.4987 84.9064 87.3964 80.8643 87.3964 75.7198C87.3964 70.5753 88.4987 66.5332 90.7949 63.6853C93.0912 60.8375 96.2141 59.3676 100.072 59.3676L99.98 59.1839Z' fill='white'/%3E%3C/svg%3E");
  --k2-logo-mark-size:       34px;   /* canonical KCDS wide-lockup mark height */

  /* Shadows */
  --k2-shadow-xs: var(--kcds-shadow-xs, 0 1px 2px rgba(31,32,35,.04));
  --k2-shadow-sm: var(--kcds-shadow-sm);
  --k2-shadow-md: var(--kcds-shadow-md);
  --k2-shadow-lg: var(--kcds-shadow-lg);
  --k2-shadow-xl: 0 24px 48px rgba(31,32,35,.12), 0 12px 24px rgba(31,32,35,.06);
  --k2-shadow-inset: inset 0 1px 2px rgba(31,32,35,.05);

  /* Transitions */
  --k2-transition-fast:   var(--kcds-transition-fast);
  --k2-transition-normal: var(--kcds-transition-normal);
  --k2-transition-slow:   var(--kcds-transition-slow);
  --k2-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --k2-ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --k2-ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);

  /* Z-index */
  --k2-z-base:     0;
  --k2-z-raised:   1;
  --k2-z-dropdown: 1000;
  --k2-z-sticky:   1020;
  --k2-z-modal:    1040;
  --k2-z-popover:  1060;
  --k2-z-tooltip:  1080;
  --k2-z-toast:    1100;

  /* Component slot tokens — all chained through KCDS layer */

  /* Input */
  --k2-input-height-sm: var(--kcds-input-height-sm);
  --k2-input-height-md: var(--kcds-input-height-md);
  --k2-input-height-lg: var(--kcds-input-height-lg);
  /* Color slots route through the K2 layer so alt themes' overrides of
     --k2-color-* automatically propagate. Non-color slots (heights,
     radii, paddings) stay on the KCDS layer. */
  --k2-input-bg:        var(--k2-color-surface-default);
  --k2-input-border:    var(--k2-color-border-default);
  --k2-input-border-hover: var(--k2-color-border-strong);
  --k2-input-border-focus: var(--k2-color-border-focus);
  --k2-input-shadow:    none;
  --k2-input-radius:    var(--kcds-input-radius-md);
  --k2-input-radius-sm: var(--kcds-input-radius-sm);
  --k2-input-radius-lg: var(--kcds-input-radius-lg);
  --k2-input-padding-x: var(--kcds-input-padding-x);
  --k2-input-font-size: var(--kcds-input-font-size);
  --k2-input-placeholder-color: var(--k2-color-text-secondary);

  /* Button — heights, paddings, radii, and font-weight all already
     density-driven via --kcds-* tokens overridden inside
     [data-kcds-density="compact"]. Comfortable: 16px Regular(400)
     labels per actions.md. Compact: 14px Bold(700). */
  --k2-button-height-sm:    var(--kcds-button-height-sm);
  --k2-button-height-md:    var(--kcds-button-height-md);
  --k2-button-height-lg:    var(--kcds-button-height-lg);
  --k2-button-font-size-sm: var(--kcds-button-font-size-sm);
  --k2-button-font-size-md: var(--kcds-button-font-size-md);
  --k2-button-font-size-lg: var(--kcds-button-font-size-lg);
  --k2-button-padding-x-sm: var(--kcds-button-padding-x-sm);
  --k2-button-padding-x-md: var(--kcds-button-padding-x-md);
  --k2-button-padding-x-lg: var(--kcds-button-padding-x-lg);
  --k2-button-radius:       var(--kcds-button-radius-md);
  --k2-button-radius-sm:    var(--kcds-button-radius-sm);
  --k2-button-radius-lg:    var(--kcds-button-radius-lg);
  --k2-button-font-weight:  var(--kcds-button-font-weight);
  --k2-button-shadow:       none;

  /* Card (component reads -border-radius / -border-color naming) */
  --k2-card-border-radius: var(--kcds-card-radius);
  --k2-card-padding:       var(--kcds-card-padding);
  --k2-card-bg:            var(--k2-color-surface-default);
  --k2-card-border-color:  var(--k2-color-border-subtle);
  --k2-card-shadow:        var(--kcds-shadow-sm);

  /* Badge */
  --k2-badge-radius:      var(--kcds-badge-radius);
  --k2-badge-padding:     var(--kcds-badge-padding);
  --k2-badge-font-size:   var(--kcds-badge-font-size);
  --k2-badge-font-weight: var(--kcds-badge-font-weight);

  /* Alert / Toast */
  --k2-alert-radius:    var(--kcds-alert-radius);
  --k2-alert-padding:   var(--kcds-alert-padding);
  --k2-toast-radius:    var(--kcds-toast-radius);
  --k2-toast-padding:   12px 16px;
  --k2-toast-bg:        var(--kcds-color-surface-dark);
  --k2-toast-color:     var(--kcds-color-on-primary);
  --k2-toast-shadow:    var(--kcds-shadow-lg);

  /* Dialog */
  /* Dialog renders on the elevated surface step per designer doc §
   * "Surface hierarchy" (line 4129) — "Modals and popovers sit lighter
   * still." In light theme surface-elevated == surface-default == #FFF,
   * so this is a no-op there; in dark it lifts to #21272D. */
  --k2-dialog-bg:       var(--kcds-color-surface-elevated);
  --k2-dialog-radius:   var(--kcds-dialog-radius);
  --k2-dialog-shadow:   var(--kcds-shadow-lg);

  /* Dropdown / Popover / Tooltip */
  --k2-dropdown-bg:     var(--kcds-color-surface-elevated);
  --k2-dropdown-radius: var(--kcds-dropdown-radius);
  --k2-dropdown-border: var(--kcds-color-border-subtle);
  --k2-dropdown-shadow: var(--kcds-shadow-lg);
  --k2-tooltip-bg:      var(--kcds-color-surface-dark);
  --k2-tooltip-color:   var(--kcds-color-on-primary);
  --k2-tooltip-radius:  var(--kcds-tooltip-radius);
  --k2-tooltip-padding: var(--kcds-tooltip-padding);
  --k2-tooltip-font-size: var(--kcds-text-caption);

  /* Tabs. The underline indicator is retired: active is weight + text-primary,
     so the active label is no longer painted in the brand colour. --k2-tab-active-indicator
     is kept for consumers still drawing their own indicator. */
  --k2-tab-color:            var(--kcds-color-text-tertiary);
  --k2-tab-color-hover:      var(--kcds-color-text-primary);
  --k2-tab-color-active:     var(--kcds-color-text-primary);
  --k2-tab-active-indicator: var(--kcds-color-primary);
  --k2-tab-border:           var(--kcds-color-border-subtle);
  --k2-tabs-nav-border:      1px solid var(--kcds-color-border-subtle);

  /* Avatar */
  --k2-avatar-size-sm: var(--kcds-avatar-size-sm);
  --k2-avatar-size-md: var(--kcds-avatar-size-md);
  --k2-avatar-size-lg: var(--kcds-avatar-size-lg);
  --k2-avatar-size-xl: var(--kcds-avatar-size-xl);
  --k2-avatar-radius:  var(--kcds-radius-full);
  --k2-avatar-bg:      var(--kcds-color-surface-canvas);
  --k2-avatar-color:   var(--kcds-color-text-tertiary);

  /* Table */
  --k2-table-header-bg:        var(--kcds-color-surface-canvas);
  --k2-table-header-color:     var(--kcds-color-text-tertiary);
  --k2-table-header-font-size: var(--kcds-table-header-font-size);
  --k2-table-header-font-weight: var(--kcds-table-header-font-weight);
  --k2-table-row-border:       var(--kcds-color-border-subtle);
  --k2-table-row-hover-bg:     var(--kcds-color-surface-canvas);
  --k2-table-row-selected-bg:  var(--kcds-color-primary-tint);
  --k2-table-cell-padding:     var(--kcds-table-cell-padding);
  --k2-table-font-size:        var(--kcds-table-font-size);

  /* Switch / checkbox / radio */
  --k2-switch-off-bg:           var(--kcds-gray-300);
  --k2-switch-on-bg:            var(--kcds-color-primary);
  --k2-switch-thumb-bg:         var(--kcds-gray-0);
  --k2-checkbox-bg:             var(--kcds-color-surface-default);
  --k2-checkbox-border:         2px solid var(--kcds-color-border-default);
  --k2-checkbox-bg-checked:     var(--kcds-color-primary);
  --k2-checkbox-border-checked: var(--kcds-color-primary);
  --k2-checkbox-icon-color:     var(--kcds-color-on-primary);
  --k2-checkbox-radius:         var(--kcds-radius-4);
  --k2-radio-border:           2px solid var(--kcds-color-border-default);
  --k2-radio-border-checked:   2px solid var(--kcds-color-primary);
  --k2-radio-border-hover:     2px solid var(--kcds-color-primary);
  --k2-radio-dot-color:        var(--kcds-color-primary);
  --k2-radio-bg:               var(--kcds-color-surface-default);

  /* Progress */
  --k2-progress-track:    var(--kcds-color-border-subtle);
  --k2-progress-fill:     var(--kcds-color-primary);
  --k2-progress-radius:   var(--kcds-progress-radius);
  --k2-progress-height:   var(--kcds-progress-height);

  /* Stepper */
  --k2-stepper-line:     var(--kcds-color-border-subtle);
  --k2-stepper-active:   var(--kcds-color-primary);
  --k2-stepper-complete: var(--kcds-color-status-success);

  /* Sidebar / nav */
  --k2-sidebar-bg:        var(--kcds-color-surface-default);
  --k2-sidebar-fg:        var(--kcds-color-text-primary);
  --k2-sidebar-muted:     var(--kcds-color-text-tertiary);
  --k2-sidebar-active-bg: var(--kcds-color-primary-tint);
  --k2-sidebar-active-fg: var(--kcds-color-on-primary-tint);
  --k2-sidebar-border:    var(--kcds-color-border-subtle);

  /* Link */
  --k2-link-color:       var(--kcds-color-text-link);
  --k2-link-hover-color: var(--kcds-color-primary-hover);
}

/* ============================================================
   AXIS OVERRIDES — only touch the --kcds-* layer. The K2 bridge
   above resolves the var() chain at consume time, so axis values
   propagate into nested-theme subtrees through inheritance —
   even when a child element has [data-theme="kcds"].
   ============================================================ */

/* ── Dark theme ── (mirrors notes/kcds-design-system.html lines 178-283)
 * Designer rules followed verbatim:
 *   • Surface stepping (canvas → surface → elevated) communicates depth.
 *   • Status colors LIFT to *-400/300 palette values for dark contrast.
 *   • Tint/fill become rgba overlays so they don't read as "glowing burns".
 *   • Shadow tokens INTENTIONALLY stay at their light values — they
 *     degrade gracefully on dark surfaces (the rgba(31,32,35,0.04) base
 *     is near-invisible against #181D22). DO NOT redeclare shadows here.
 *     Depth comes from surface stepping + intrinsic 1px borders on cards
 *     and elevated containers (designer doc §"Elevation in dark", line 4211).
 */
/* The K2App nested-theme architecture sets data-theme="kcds" on its
 * `.main` content frame so the KCDS token block at :root,[data-theme="kcds"]
 * re-applies inside that subtree. That same block re-declares K2 bridges
 * like --k2-bg-tertiary to LIGHT values, which would otherwise defeat the
 * dark-axis override above. Match BOTH the document-root case AND the
 * nested-frame case so the dark cascade reaches deep components. */
[data-kcds-theme="dark"],
[data-k2-theme="dark"],
[data-kcds-theme="dark"] [data-theme="kcds"],
[data-k2-theme="dark"] [data-theme="kcds"],
[data-theme="kcds"][data-kcds-theme="dark"],
[data-theme="kcds"][data-k2-theme="dark"],
[data-theme="kcds"][data-k2-theme="dark"] {
  /* Surfaces */
  --kcds-color-surface-default:  var(--kcds-darkgray-surface);
  --kcds-color-surface-canvas:   var(--kcds-darkgray-canvas);
  --kcds-color-surface-subtle:   var(--kcds-darkgray-subtle);   /* #1C2228 resting */
  --kcds-color-surface-hover:    #262D34;                       /* one step above elevated */
  --kcds-color-backdrop:         rgba(0, 0, 0, 0.60);
  --kcds-color-surface-elevated: var(--kcds-darkgray-elevated);
  --kcds-color-surface-disabled: #232830;
  --kcds-color-surface-dark:     var(--kcds-darkgray-elevated);
  --kcds-color-surface-tile-day: var(--kcds-darkgray-elevated);

  /* Text */
  --kcds-color-text-primary:    #E8EAED;
  --kcds-color-text-secondary:  #A0A8B0;
  --kcds-color-text-tertiary:   #74808A;
  --kcds-color-text-disabled:   #525C66;
  --kcds-color-text-on-dark:    #FFFFFF;

  /* Border */
  --kcds-color-border-default:  var(--kcds-darkgray-border-default);
  --kcds-color-border-subtle:   var(--kcds-darkgray-border);
  --kcds-color-border-strong:   var(--kcds-darkgray-border-strong);

  /* Status — lifted for dark contrast (designer table, line 4200-4209) */
  --kcds-color-status-success:  #4ADE80;
  --kcds-color-status-error:    #F87171;
  --kcds-color-status-warning:  #FBBF24;
  --kcds-color-status-info:     #60A5FA;
  --kcds-color-status-featured: #A78BFA;
  --kcds-color-ai-suggestion:   #A78BFA;

  /* Status tint backgrounds become rgba overlays (designer line 277-283) */
  --kcds-green-50:  rgba(53, 192, 76, 0.15);
  --kcds-green-400: #7DDF8E;
  --kcds-green-800: #2A9436;
  --kcds-red-50:    rgba(240, 62, 62, 0.15);
  --kcds-blue-50:   rgba(50, 157, 255, 0.15);
  --kcds-violet-50: rgba(133, 67, 218, 0.18);

  /* K2 bridge tokens bound to fixed greys need a dark-mode override.
   * --k2-bg-tertiary is the chrome's grey stage; let it sit one step above
   * the canvas (slightly lighter) so dark surfaces pop against it. */
  --k2-bg-tertiary:     var(--kcds-darkgray-elevated);
  --k2-surface-overlay: rgba(15, 20, 25, 0.85);
  --k2-surface-glass:   rgba(15, 20, 25, 0.72);

  /* K2 component neutrals — light-mode greys are too bright in dark.
   * Switch track + similar surfaces use --k2-color-neutral-300 by
   * default; without a dark override that token resolves to #EAEAEA
   * (light grey) against a 15,20,25 canvas → ugly contrast inversion.
   * Repoint the neutral scale so components inherit dark-appropriate
   * greys without each component needing its own override. */
  --k2-color-neutral-100: var(--kcds-darkgray-elevated);
  --k2-color-neutral-200: var(--kcds-darkgray-border);
  --k2-color-neutral-300: var(--kcds-darkgray-border-strong);
  --k2-color-neutral-400: #4A5562;
  --k2-color-neutral-500: #5C6773;
  --k2-color-neutral-600: #74808A;
  --k2-color-neutral-700: #A0A8B0;
  --k2-color-neutral-800: #C8CCD2;
  --k2-color-neutral-900: #E8EAED;

  /* Primary surfaces soften in dark — full-saturation hue against a
     dark canvas reads too vibrant. Mixing 14% of the dark surface back
     into the primary keeps the hue identifiable while reducing
     perceived brightness. Affects everything bound to --k2-color-
     primary-500 (k2-button primary, k2-progress-bar fill, k2-tab
     active indicator, etc); kcds-level tokens stay untouched so
     designer-spec'd surfaces (e.g. category chips, hero accents) keep
     their canonical hue. */
  --k2-color-primary-500: color-mix(in srgb, var(--kcds-color-primary-500) 86%, var(--kcds-color-surface-default));

  /* Track background — tuned literal: 1.67:1 contrast against
   * darkgray-surface, the canonical's own ratio. */
  --kcds-color-track-bg: #3A424B;

  /* Tile-* tints become translucent overlays in dark — matches the
   * canonical's dark-mode tile treatment (colors.md §"Dark-theme
   * remapping: pastels become rgba overlays"). FG values lift to
   * the dark-theme accent text colors used elsewhere. */
  --kcds-color-tile-info-bg:     rgba(50, 157, 255, 0.18);
  --kcds-color-tile-info-fg:     #93C5FD;
  --kcds-color-tile-featured-bg: rgba(133, 67, 218, 0.18);
  --kcds-color-tile-featured-fg: #C4B5FD;
  --kcds-color-tile-success-bg:  rgba(53, 192, 76, 0.18);
  --kcds-color-tile-success-fg:  #4ADE80;
  --kcds-color-tile-warning-bg:  rgba(251, 191, 36, 0.18);
  --kcds-color-tile-warning-fg:  #FBBF24;
  --kcds-color-tile-error-bg:    rgba(248, 113, 113, 0.22);
  --kcds-color-tile-error-fg:    #FCA5A5;
  --kcds-color-tile-neutral-bg:  rgba(255, 255, 255, 0.06);
  --kcds-color-tile-neutral-fg:  #BCC6CC;

  /* Dark counterpart — :root-only values rendered as pastels on the dark canvas. */
  --kcds-color-achievement-gold-bg:    rgba(253, 202, 22, 0.16);
  --kcds-color-achievement-gold-fg:    #FFD84D;
  --kcds-color-achievement-silver-bg:  rgba(188, 198, 204, 0.14);
  --kcds-color-achievement-silver-fg:  #CBD5DB;
  --kcds-color-achievement-bronze-bg:  rgba(234, 159, 89, 0.16);
  --kcds-color-achievement-bronze-fg:  #F0B37A;
  --kcds-color-achievement-locked-bg:  rgba(255, 255, 255, 0.05);
  --kcds-color-achievement-locked-fg:  #8A96A0;

  /* Overlay hue is the LIGHT base primitive, not the lifted dark text colour. */
  --kcds-color-status-success-bg: rgba(53, 192, 76, 0.15);    /* green-500  */
  --kcds-color-status-error-bg:   rgba(240, 62, 62, 0.15);    /* red-500    */
  --kcds-color-status-warning-bg: rgba(255, 136, 26, 0.15);   /* orange-500 */

  /* ADR 034 — the on-tint tier inverts with the theme: on a dark tint the
     readable text is the light end of the ramp, not the dark one. */
  --kcds-color-sensitivity-confidential-bg: rgba(251, 146, 60, 0.15);
  --kcds-color-sensitivity-confidential-on-tint: #FB923C;
  --kcds-color-sensitivity-highly-sensitive-bg: rgba(248, 113, 113, 0.15);
  --kcds-color-sensitivity-highly-sensitive-on-tint: #F87171;
  --kcds-color-sensitivity-internal-bg: rgba(96, 165, 250, 0.15);
  --kcds-color-sensitivity-internal-on-tint: #60A5FA;
  --kcds-color-sensitivity-public-bg: rgba(160, 168, 176, 0.15);
  --kcds-color-sensitivity-public-on-tint: #A0A8B0;
  --kcds-color-severity-1-bg: rgba(96,165,250,.15);
  --kcds-color-severity-1-on-tint: #60A5FA;
  --kcds-color-severity-2-bg: rgba(74,222,128,.15);
  --kcds-color-severity-2-on-tint: #4ADE80;
  --kcds-color-severity-3-bg: rgba(251,191,36,.15);
  --kcds-color-severity-3-on-tint: #FBBF24;
  --kcds-color-severity-4-bg: rgba(251,146,60,.15);
  --kcds-color-severity-4-on-tint: #FB923C;
  --kcds-color-severity-5-bg: rgba(248,113,113,.15);
  --kcds-color-severity-5-on-tint: #F87171;
  --kcds-color-status-error-on-tint: #F87171;
  --kcds-color-status-featured-on-tint: #A78BFA;
  --kcds-color-status-info-on-tint: #60A5FA;
  --kcds-color-status-neutral-on-tint: #A0A8B0;
  --kcds-color-status-success-on-tint: #4ADE80;
  --kcds-color-status-warning-on-tint: #FBBF24;
  --kcds-color-status-info-bg:    rgba(50, 157, 255, 0.15);   /* blue-500   */

  /* Status border tokens in dark — brighter siblings of the fills. */
  --kcds-color-status-success-border:  #4ADE80;
  --kcds-color-status-error-border:    #F87171;
  --kcds-color-status-warning-border:  #FBBF24;
  --kcds-color-status-info-border:     #60A5FA;
  --kcds-color-status-featured-border: #A78BFA;
  --kcds-color-status-neutral-border:  #3A424B;

  /* Shadows intentionally NOT redeclared — see header comment. */
}

/* Legacy orange in dark — only when no product category is set, matching
 * the designer's :not([data-kcds-product-category]) guard. The category-
 * specific blocks below redeclare these tokens directly for the four
 * suites: learn / comply / grow / thrive (perform = thrive alias).
 *
 * Scoped to :root so the rule only matches the document root. The K2App
 * shell sets data-kcds-theme="dark" on inner elements (.main, k2-app
 * host) as well — those don't carry the product-category attribute, so
 * the un-scoped form would fire on .main and shadow over whatever the
 * <html> cascade set (the category-correct dark colour). With :root the
 * inner elements just inherit. */
:root[data-kcds-theme="dark"]:not([data-kcds-product-category]),
:root[data-k2-theme="dark"]:not([data-kcds-product-category]),
:root[data-k2-theme="dark"]:not([data-kcds-product-category]) {
  --kcds-color-primary:        #FF881A;
  --kcds-color-primary-hover:  #FF9D40;
  --kcds-color-primary-active: #E0780F;
  --kcds-color-primary-fill:   rgba(255, 136, 26, 0.18);
  --kcds-color-primary-tint:   rgba(255, 136, 26, 0.10);
  /* ADR 012 exception: white-on-master-orange (2.39:1) is the documented
     KCDS choice; brand orange must not be darkened, dark text off-brand. */
  --kcds-color-on-primary:     #FFFFFF;
  --kcds-color-on-primary-tint:#FFB060;
  --kcds-color-text-link:      #FFB060;
  --kcds-color-border-focus:   #FF881A;

  /* Extended primary scale (K2-only — designer doesn't ramp Tier 2). */
  --kcds-color-primary-50:  rgba(255,136,26,0.10);
  --kcds-color-primary-100: rgba(255,136,26,0.18);
  --kcds-color-primary-200: rgba(255,136,26,0.24);
  --kcds-color-primary-300: #FF7A00;
  --kcds-color-primary-400: #FF7A00;
  --kcds-color-primary-500: #FF881A;
  --kcds-color-primary-600: #FF9D40;
  --kcds-color-primary-700: #FFB060;
}

/* ── Product suites — light ──
 * Accent = suite, four suites: Learn=vermilion, Comply=blue, Grow=emerald,
 * Hire=periwinkle (added 2026-09-23). Internal = the master orange.
 * Thrive suite REMOVED (ADR 014); `thrive`/`perform` selectors are back-compat aliases
 * to Grow — KC Talent and KC Performance moved to Grow.
 * ADR 020: each suite publishes the full accent-50…700 ramp. Consume through the
 * semantic --kcds-color-accent-* names (which resolve per suite); never compute your
 * own intermediate shades. --kcds-color-primary-* names are back-compat aliases at the
 * same values so consumers depending on the legacy scale keep working.
 * Tint/fill: --kcds-color-primary-tint → accent-50, --kcds-color-primary-fill → accent-100.
 * All four suites clear 4.5:1 for white-on-primary, text-on-white and
 * text-on-tint. Internal is the one documented exception. */
[data-kcds-product-category="learn"] {
  /* Learn = vermilion (white-on-primary 4.59:1). Learn clears AA on its own now,
     so it carries no colour exception; the master orange moved to internal. */
  --kcds-color-accent-50:  #FAE8E3;
  --kcds-color-accent-100: #F6D5CB;
  --kcds-color-accent-200: #F0BAAA;
  --kcds-color-accent-300: #E99780;
  --kcds-color-accent-400: #E06D4C;
  --kcds-color-accent-500: #D63F13;
  --kcds-color-accent-600: #B63610;
  --kcds-color-accent-700: #9A2D0E;
  --kcds-color-primary:        var(--kcds-color-accent-500);
  --kcds-color-primary-hover:  var(--kcds-color-accent-600);
  --kcds-color-primary-active: var(--kcds-color-accent-700);
  --kcds-color-primary-fill:   var(--kcds-color-accent-100);
  --kcds-color-primary-tint:   var(--kcds-color-accent-50);
  --kcds-color-on-primary:     #FFFFFF;
  --kcds-color-on-primary-tint:var(--kcds-color-accent-700);
  --kcds-color-text-link:      var(--kcds-color-accent-500);
  --kcds-color-border-focus:   var(--kcds-color-accent-500);
  --kcds-color-primary-50:  var(--kcds-color-accent-50);
  --kcds-color-primary-100: var(--kcds-color-accent-100);
  --kcds-color-primary-200: var(--kcds-color-accent-200);
  --kcds-color-primary-300: var(--kcds-color-accent-300);
  --kcds-color-primary-400: var(--kcds-color-accent-400);
  --kcds-color-primary-500: var(--kcds-color-accent-500);
  --kcds-color-primary-600: var(--kcds-color-accent-600);
  --kcds-color-primary-700: var(--kcds-color-accent-700);
}
[data-kcds-product-category="comply"] {
  /* Comply = blue (white-on-primary 5.38:1). Teal is retired.
     Shares its hex with status-info; they are separated by role, not value. */
  --kcds-color-accent-50:  #E3EDFA;
  --kcds-color-accent-100: #CCDEF5;
  --kcds-color-accent-200: #ABC8EF;
  --kcds-color-accent-300: #81ADE7;
  --kcds-color-accent-400: #4D8BDD;
  --kcds-color-accent-500: #1567D2;
  --kcds-color-accent-600: #1258B2;
  --kcds-color-accent-700: #0F4A97;
  --kcds-color-primary:        var(--kcds-color-accent-500);
  --kcds-color-primary-hover:  var(--kcds-color-accent-600);
  --kcds-color-primary-active: var(--kcds-color-accent-700);
  --kcds-color-primary-fill:   var(--kcds-color-accent-100);
  --kcds-color-primary-tint:   var(--kcds-color-accent-50);
  --kcds-color-on-primary-tint:var(--kcds-color-accent-700);
  --kcds-color-text-link:      var(--kcds-color-accent-500);
  --kcds-color-border-focus:   var(--kcds-color-accent-500);
  --kcds-color-primary-50:  var(--kcds-color-accent-50);
  --kcds-color-primary-100: var(--kcds-color-accent-100);
  --kcds-color-primary-200: var(--kcds-color-accent-200);
  --kcds-color-primary-300: var(--kcds-color-accent-300);
  --kcds-color-primary-400: var(--kcds-color-accent-400);
  --kcds-color-primary-500: var(--kcds-color-accent-500);
  --kcds-color-primary-600: var(--kcds-color-accent-600);
  --kcds-color-primary-700: var(--kcds-color-accent-700);
}
[data-kcds-product-category="grow"],
[data-kcds-product-category="thrive"],
[data-kcds-product-category="perform"] {
  /* Grow = emerald (white-on-primary 4.66:1). Blue moved to Comply.
     `thrive`/`perform` are back-compat aliases for Grow. */
  --kcds-color-accent-50:  #E2F0EB;
  --kcds-color-accent-100: #C9E4DA;
  --kcds-color-accent-200: #A7D3C3;
  --kcds-color-accent-300: #7BBDA5;
  --kcds-color-accent-400: #45A280;
  --kcds-color-accent-500: #0A8558;
  --kcds-color-accent-600: #08714B;
  --kcds-color-accent-700: #07603F;
  --kcds-color-primary:        var(--kcds-color-accent-500);
  --kcds-color-primary-hover:  var(--kcds-color-accent-600);
  --kcds-color-primary-active: var(--kcds-color-accent-700);
  --kcds-color-primary-fill:   var(--kcds-color-accent-100);
  --kcds-color-primary-tint:   var(--kcds-color-accent-50);
  --kcds-color-on-primary-tint:var(--kcds-color-accent-700);
  --kcds-color-text-link:      var(--kcds-color-accent-500);
  --kcds-color-border-focus:   var(--kcds-color-accent-500);
  --kcds-color-primary-50:  var(--kcds-color-accent-50);
  --kcds-color-primary-100: var(--kcds-color-accent-100);
  --kcds-color-primary-200: var(--kcds-color-accent-200);
  --kcds-color-primary-300: var(--kcds-color-accent-300);
  --kcds-color-primary-400: var(--kcds-color-accent-400);
  --kcds-color-primary-500: var(--kcds-color-accent-500);
  --kcds-color-primary-600: var(--kcds-color-accent-600);
  --kcds-color-primary-700: var(--kcds-color-accent-700);
}
[data-kcds-product-category="hire"] {
  /* Hire = periwinkle (4th suite, designer 2026-09-23). White on-primary
     4.63:1, measured. Own ramp —
     --kcds-violet-* stays reserved for AI augmentation. */
  --kcds-color-accent-50:  #EDECFE;
  --kcds-color-accent-100: #DEDBFD;
  --kcds-color-accent-200: #C9C5FC;
  --kcds-color-accent-300: #AFA8FB;
  --kcds-color-accent-400: #8E84FA;
  --kcds-color-accent-500: #6A5DF8;
  --kcds-color-accent-600: #5A4FD3;
  --kcds-color-accent-700: #4C43B3;
  --kcds-color-primary:        var(--kcds-color-accent-500);
  --kcds-color-primary-hover:  var(--kcds-color-accent-600);
  --kcds-color-primary-active: var(--kcds-color-accent-700);
  --kcds-color-primary-fill:   var(--kcds-color-accent-100);
  --kcds-color-primary-tint:   var(--kcds-color-accent-50);
  --kcds-color-on-primary-tint:var(--kcds-color-accent-700);
  --kcds-color-text-link:      var(--kcds-color-accent-500);
  --kcds-color-border-focus:   var(--kcds-color-accent-500);
  --kcds-color-primary-50:  var(--kcds-color-accent-50);
  --kcds-color-primary-100: var(--kcds-color-accent-100);
  --kcds-color-primary-200: var(--kcds-color-accent-200);
  --kcds-color-primary-300: var(--kcds-color-accent-300);
  --kcds-color-primary-400: var(--kcds-color-accent-400);
  --kcds-color-primary-500: var(--kcds-color-accent-500);
  --kcds-color-primary-600: var(--kcds-color-accent-600);
  --kcds-color-primary-700: var(--kcds-color-accent-700);
}
/* ADR 015: internal admin/ops products (KC User Directory, KC Admin Tools,
   KC USMP, Integrations, Communications) resolve to neutral dark-gray chrome.
   Accent ramp resolves to the neutral gray scale so components consuming
   accent-N still render correctly (ADR 020). */
[data-kcds-product-category="internal"],
[data-kcds-product-category="platform"] {
  /* Internal/admin = the master orange, same chain as the no-category default.
     Not a suite. White-on-primary is 2.39:1 and is the one documented AA
     exception left in the system — warnings here need an icon or a leading
     stripe, never colour alone. text-link uses accent-700 to clear AA. */
  --kcds-color-accent-50:  #FFF1E4;
  --kcds-color-accent-100: #FFE5CD;
  --kcds-color-accent-200: #FFD4AD;
  --kcds-color-accent-300: #FFBF83;
  --kcds-color-accent-400: #FFA551;
  --kcds-color-accent-500: #FF881A;
  --kcds-color-accent-600: #FF6F00;
  --kcds-color-accent-700: #C75F00;
  --kcds-color-primary:        var(--kcds-color-accent-500);
  --kcds-color-primary-hover:  var(--kcds-color-accent-600);
  --kcds-color-primary-active: var(--kcds-color-accent-700);
  --kcds-color-primary-fill:   var(--kcds-color-accent-200);
  --kcds-color-primary-tint:   var(--kcds-color-accent-100);
  --kcds-color-on-primary-tint:var(--kcds-color-accent-700);
  --kcds-color-text-link:      var(--kcds-color-accent-700);
  --kcds-color-border-focus:   #404A4F;
  --kcds-color-primary-50:  var(--kcds-color-accent-50);
  --kcds-color-primary-100: var(--kcds-color-accent-100);
  --kcds-color-primary-200: var(--kcds-color-accent-200);
  --kcds-color-primary-300: var(--kcds-color-accent-300);
  --kcds-color-primary-400: var(--kcds-color-accent-400);
  --kcds-color-primary-500: var(--kcds-color-accent-500);
  --kcds-color-primary-600: var(--kcds-color-accent-600);
  --kcds-color-primary-700: var(--kcds-color-accent-700);
}

/* ── Dark × Suites ──
 * PD-205 OKLCH L≈0.55 calibration (each suite's dark primary is perceptually
 * balanced for AA on white text). Four suites — `thrive`/`perform`
 * are back-compat aliases to Grow. Dark accent scale: 50-100 as transparent hue
 * washes over the dark canvas (soft, not solid); 200+ solid values. */
[data-kcds-theme="dark"][data-kcds-product-category="learn"],
[data-k2-theme="dark"][data-kcds-product-category="learn"],
[data-kcds-theme="dark"] [data-kcds-product-category="learn"],
[data-k2-theme="dark"] [data-kcds-product-category="learn"],
[data-k2-theme="dark"] [data-kcds-product-category="learn"] {
  /* Learn dark = vermilion. Clears AA on its own; it carries no colour exception. */
  --kcds-color-accent-50:  rgba(214,63,19,0.10);
  --kcds-color-accent-100: rgba(214,63,19,0.20);
  --kcds-color-accent-200: rgba(214,63,19,0.24);
  --kcds-color-accent-300: #B63610;
  --kcds-color-accent-400: #D63F13;
  --kcds-color-accent-500: #D63F13;
  --kcds-color-accent-600: #DB5227;
  --kcds-color-accent-700: #E99780;
  --kcds-color-primary:        #D63F13;
  --kcds-color-primary-hover:  #DB5227;
  --kcds-color-primary-active: #B63610;
  --kcds-color-primary-fill:   var(--kcds-color-accent-100);
  --kcds-color-primary-tint:   var(--kcds-color-accent-50);
  --kcds-color-on-primary:     #FFFFFF;
  --kcds-color-on-primary-tint:#E99780;
  --kcds-color-text-link:      #E99780;
  --kcds-color-border-focus:   #D63F13;
  --kcds-color-primary-50:  var(--kcds-color-accent-50);
  --kcds-color-primary-100: var(--kcds-color-accent-100);
  --kcds-color-primary-200: var(--kcds-color-accent-200);
  --kcds-color-primary-300: var(--kcds-color-accent-300);
  --kcds-color-primary-400: var(--kcds-color-accent-400);
  --kcds-color-primary-500: var(--kcds-color-accent-500);
  --kcds-color-primary-600: var(--kcds-color-accent-600);
  --kcds-color-primary-700: var(--kcds-color-accent-700);
}
[data-kcds-theme="dark"][data-kcds-product-category="comply"],
[data-k2-theme="dark"][data-kcds-product-category="comply"],
[data-kcds-theme="dark"] [data-kcds-product-category="comply"],
[data-k2-theme="dark"] [data-kcds-product-category="comply"],
[data-k2-theme="dark"] [data-kcds-product-category="comply"] {
  /* Comply dark = blue. */
  --kcds-color-accent-50:  rgba(21,103,210,0.10);
  --kcds-color-accent-100: rgba(21,103,210,0.20);
  --kcds-color-accent-200: rgba(21,103,210,0.24);
  --kcds-color-accent-300: #1258B2;
  --kcds-color-accent-400: #1567D2;
  --kcds-color-accent-500: #1567D2;
  --kcds-color-accent-600: #2C77D7;
  --kcds-color-accent-700: #81ADE7;
  --kcds-color-primary:        #1567D2;
  --kcds-color-primary-hover:  #2C77D7;
  --kcds-color-primary-active: #1258B2;
  --kcds-color-primary-fill:   var(--kcds-color-accent-100);
  --kcds-color-primary-tint:   var(--kcds-color-accent-50);
  --kcds-color-on-primary-tint:#81ADE7;
  --kcds-color-text-link:      #81ADE7;
  --kcds-color-border-focus:   #1567D2;
  --kcds-color-primary-50:  var(--kcds-color-accent-50);
  --kcds-color-primary-100: var(--kcds-color-accent-100);
  --kcds-color-primary-200: var(--kcds-color-accent-200);
  --kcds-color-primary-300: var(--kcds-color-accent-300);
  --kcds-color-primary-400: var(--kcds-color-accent-400);
  --kcds-color-primary-500: var(--kcds-color-accent-500);
  --kcds-color-primary-600: var(--kcds-color-accent-600);
  --kcds-color-primary-700: var(--kcds-color-accent-700);
}
[data-kcds-theme="dark"][data-kcds-product-category="grow"],
[data-k2-theme="dark"][data-kcds-product-category="grow"],
[data-kcds-theme="dark"] [data-kcds-product-category="grow"],
[data-k2-theme="dark"] [data-kcds-product-category="grow"],
[data-kcds-theme="dark"][data-kcds-product-category="thrive"],
[data-k2-theme="dark"][data-kcds-product-category="thrive"],
[data-kcds-theme="dark"] [data-kcds-product-category="thrive"],
[data-k2-theme="dark"] [data-kcds-product-category="thrive"],
[data-kcds-theme="dark"][data-kcds-product-category="perform"],
[data-k2-theme="dark"][data-kcds-product-category="perform"],
[data-kcds-theme="dark"] [data-kcds-product-category="perform"],
[data-k2-theme="dark"] [data-kcds-product-category="perform"],
[data-k2-theme="dark"] [data-kcds-product-category="perform"] {
  /* Grow dark = emerald. `thrive`/`perform` are back-compat aliases to Grow. */
  --kcds-color-accent-50:  rgba(10,133,88,0.10);
  --kcds-color-accent-100: rgba(10,133,88,0.20);
  --kcds-color-accent-200: rgba(10,133,88,0.24);
  --kcds-color-accent-300: #08714B;
  --kcds-color-accent-400: #0A8558;
  --kcds-color-accent-500: #0A8558;
  --kcds-color-accent-600: #229169;
  --kcds-color-accent-700: #7BBDA5;
  --kcds-color-primary:        #0A8558;
  --kcds-color-primary-hover:  #229169;
  --kcds-color-primary-active: #08714B;
  --kcds-color-primary-fill:   var(--kcds-color-accent-100);
  --kcds-color-primary-tint:   var(--kcds-color-accent-50);
  --kcds-color-on-primary-tint:#7BBDA5;
  --kcds-color-text-link:      #7BBDA5;
  --kcds-color-border-focus:   #0A8558;
  --kcds-color-primary-50:  var(--kcds-color-accent-50);
  --kcds-color-primary-100: var(--kcds-color-accent-100);
  --kcds-color-primary-200: var(--kcds-color-accent-200);
  --kcds-color-primary-300: var(--kcds-color-accent-300);
  --kcds-color-primary-400: var(--kcds-color-accent-400);
  --kcds-color-primary-500: var(--kcds-color-accent-500);
  --kcds-color-primary-600: var(--kcds-color-accent-600);
  --kcds-color-primary-700: var(--kcds-color-accent-700);
}
[data-kcds-theme="dark"][data-kcds-product-category="hire"],
[data-k2-theme="dark"][data-kcds-product-category="hire"],
[data-kcds-theme="dark"] [data-kcds-product-category="hire"],
[data-k2-theme="dark"] [data-kcds-product-category="hire"] {
  /* Hire dark = periwinkle. */
  --kcds-color-accent-50:  rgba(106,93,248,0.10);
  --kcds-color-accent-100: rgba(106,93,248,0.20);
  --kcds-color-accent-200: rgba(106,93,248,0.24);
  --kcds-color-accent-300: #5A4FD3;
  --kcds-color-accent-400: #6A5DF8;
  --kcds-color-accent-500: #6A5DF8;
  --kcds-color-accent-600: #796DF9;
  --kcds-color-accent-700: #AFA8FB;
  --kcds-color-primary:        #6A5DF8;
  --kcds-color-primary-hover:  #796DF9;
  --kcds-color-primary-active: #5A4FD3;
  --kcds-color-primary-fill:   var(--kcds-color-accent-100);
  --kcds-color-primary-tint:   var(--kcds-color-accent-50);
  --kcds-color-on-primary-tint:#AFA8FB;
  --kcds-color-text-link:      #AFA8FB;
  --kcds-color-border-focus:   #6A5DF8;
  --kcds-color-primary-50:  var(--kcds-color-accent-50);
  --kcds-color-primary-100: var(--kcds-color-accent-100);
  --kcds-color-primary-200: var(--kcds-color-accent-200);
  --kcds-color-primary-300: var(--kcds-color-accent-300);
  --kcds-color-primary-400: var(--kcds-color-accent-400);
  --kcds-color-primary-500: var(--kcds-color-accent-500);
  --kcds-color-primary-600: var(--kcds-color-accent-600);
  --kcds-color-primary-700: var(--kcds-color-accent-700);
}
/* Internal dark = lighter neutral gray for AA on the dark canvas. */
[data-kcds-theme="dark"][data-kcds-product-category="internal"],
[data-k2-theme="dark"][data-kcds-product-category="internal"],
[data-kcds-theme="dark"] [data-kcds-product-category="internal"],
[data-k2-theme="dark"] [data-kcds-product-category="internal"],
[data-kcds-theme="dark"][data-kcds-product-category="platform"],
[data-k2-theme="dark"][data-kcds-product-category="platform"],
[data-kcds-theme="dark"] [data-kcds-product-category="platform"],
[data-k2-theme="dark"] [data-kcds-product-category="platform"],
[data-k2-theme="dark"] [data-kcds-product-category="platform"] {
  --kcds-color-accent-50:  rgba(255,136,26,0.10);
  --kcds-color-accent-100: rgba(255,136,26,0.18);
  --kcds-color-accent-200: rgba(255,136,26,0.24);
  --kcds-color-accent-300: #E0780F;
  --kcds-color-accent-400: #FF881A;
  --kcds-color-accent-500: #FF881A;
  --kcds-color-accent-600: #FF9D40;
  --kcds-color-accent-700: #FFB060;
  --kcds-color-primary:        #FF881A;
  --kcds-color-primary-hover:  #FF9D40;
  --kcds-color-primary-active: #E0780F;
  --kcds-color-primary-fill:   var(--kcds-color-accent-100);
  --kcds-color-primary-tint:   var(--kcds-color-accent-50);
  --kcds-color-on-primary-tint:#FFB060;
  --kcds-color-text-link:      #FFB060;
  --kcds-color-border-focus:   #FF881A;
  --kcds-color-primary-50:  var(--kcds-color-accent-50);
  --kcds-color-primary-100: var(--kcds-color-accent-100);
  --kcds-color-primary-200: var(--kcds-color-accent-200);
  --kcds-color-primary-300: var(--kcds-color-accent-300);
  --kcds-color-primary-400: var(--kcds-color-accent-400);
  --kcds-color-primary-500: var(--kcds-color-accent-500);
  --kcds-color-primary-600: var(--kcds-color-accent-600);
  --kcds-color-primary-700: var(--kcds-color-accent-700);
}
/* Layer 2 re-substitution for the category axis.
   --k2-color-* are declared once at :root, so they resolve there and a descendant
   that only overrides --kcds-color-* inherits the already-resolved root value —
   components would keep the default accent. KCDS documents setting the category on
   <body>, which is a descendant, so without this the attribute does nothing for
   components. Attribute-presence selector, so it covers every category and both
   themes, including ones added later. */
[data-kcds-product-category] {
  --k2-color-primary: var(--kcds-color-primary);
  --k2-color-primary-hover: var(--kcds-color-primary-hover);
  --k2-color-primary-active: var(--kcds-color-primary-active);
  --k2-color-primary-tint: var(--kcds-color-primary-tint);
  --k2-color-primary-fill: var(--kcds-color-primary-fill);
  --k2-color-on-primary: var(--kcds-color-on-primary);
  --k2-color-on-primary-tint: var(--kcds-color-on-primary-tint);
  --k2-color-text-link: var(--kcds-color-text-link);
  --k2-color-border-focus: var(--kcds-color-border-focus);
  --k2-color-primary-50: var(--kcds-color-primary-50);
  --k2-color-primary-100: var(--kcds-color-primary-100);
  --k2-color-primary-200: var(--kcds-color-primary-200);
  --k2-color-primary-300: var(--kcds-color-primary-300);
  --k2-color-primary-400: var(--kcds-color-primary-400);
  --k2-color-primary-500: var(--kcds-color-primary-500);
  --k2-color-primary-600: var(--kcds-color-primary-600);
  --k2-color-primary-700: var(--kcds-color-primary-700);
  --k2-color-accent-50: var(--kcds-color-accent-50);
  --k2-color-accent-100: var(--kcds-color-accent-100);
  --k2-color-accent-200: var(--kcds-color-accent-200);
  --k2-color-accent-300: var(--kcds-color-accent-300);
  --k2-color-accent-400: var(--kcds-color-accent-400);
  --k2-color-accent-500: var(--kcds-color-accent-500);
  --k2-color-accent-600: var(--kcds-color-accent-600);
  --k2-color-accent-700: var(--kcds-color-accent-700);
  --k2-color-warning-600: var(--kcds-color-primary-hover);
  --k2-color-warning-700: var(--kcds-color-primary-active);
}


/* ── Density compact ──
 * Two selectors: the attribute for whole-document toggling, the
 * class for side-by-side scoped comparison (designer's pattern).
 * Both override only --kcds-* metrics; the Layer 2 re-substitution
 * below carries them into --k2-* on any element but the root. */
[data-kcds-density="compact"],
.density--compact {
  --kcds-button-height-sm:    28px;
  --kcds-button-height-md:    32px;
  --kcds-button-height-lg:    40px;
  --kcds-button-padding-x-sm: 12px;
  --kcds-button-padding-x-md: 16px;
  --kcds-button-padding-x-lg: 16px;
  --kcds-button-font-size-sm: 14px;
  --kcds-button-font-size-md: 14px;
  --kcds-button-font-size-lg: 14px;
  --kcds-button-font-weight:  700;
  --kcds-button-radius-sm:    8px;
  --kcds-button-radius-md:    8px;
  --kcds-button-radius-lg:    8px;

  /* Compact uses one uniform radius; comfortable scales it per size. */
  --kcds-input-height-sm: 28px;
  --kcds-input-height-md: 32px;
  --kcds-input-height-lg: 40px;
  --kcds-input-radius-sm: var(--kcds-radius-md);
  --kcds-input-radius-md: var(--kcds-radius-md);
  --kcds-input-radius-lg: var(--kcds-radius-md);
  --kcds-input-padding-x: 8px;
  --kcds-input-font-size: 14px;

  --kcds-card-radius:    8px;
  --kcds-card-padding:   16px;
  --kcds-dialog-radius:  8px;
  --kcds-dropdown-radius:8px;
  --kcds-toast-radius:   8px;
  --kcds-alert-radius:   8px;
  --kcds-alert-padding:  12px;
  --kcds-badge-padding:  2px 8px;
  --kcds-badge-font-size: 11px;

  --kcds-table-cell-padding: 8px 12px;
  --kcds-table-font-size:    13px;

  --kcds-avatar-size-sm: 24px;
  --kcds-avatar-size-md: 32px;
  --kcds-avatar-size-lg: 40px;
  --kcds-avatar-size-xl: 56px;

  --kcds-progress-height: 6px;

  --kcds-icon-size-sm: 12px;
  --kcds-icon-size-md: 14px;
  --kcds-icon-size-lg: 16px;

  /* Density-coupled compact overrides — full 9-token set per spec.
     KCDS v1.6.0 ADR 019: compact control radius 4→8 (= --kcds-radius-md). */
  --kcds-density-radius-control:   var(--kcds-radius-md);
  --kcds-density-radius-card:      8px;
  --kcds-density-radius-container: 8px;
  --kcds-density-gap:              12px;
  --kcds-density-section-gap:      24px;
  --kcds-density-page-padding:     16px;
  --kcds-density-text-base:        14px;
  --kcds-density-input-height:     32px;
  --kcds-density-button-height:    32px;     /* compact medium */
}

/* Rule 5 — Mobile forces comfortable density (density.md). On a touch
 * viewport, compact would produce 28-32px hit targets below the 44×44
 * accessibility floor. Override every density-coupled token back to
 * comfortable values regardless of [data-kcds-density="compact"]. */
@media (pointer: coarse) {
  [data-kcds-density="compact"] {
    --kcds-density-radius-control:   16px;
    --kcds-density-radius-card:      16px;
    --kcds-density-radius-container: 32px;
    --kcds-density-gap:              16px;
    --kcds-density-section-gap:      32px;
    --kcds-density-page-padding:     24px;
    --kcds-density-text-base:        16px;
    --kcds-density-input-height:     52px;
    --kcds-density-button-height:    56px;
  }
}

/* Layer 2 re-substitution for the density axis — same trap as the category
   axis above. --k2-* are declared once at :root, so they resolve there; a
   descendant that only overrides --kcds-* inherits the already-resolved root
   value and keeps the root's geometry. Density set on <html> happened to work
   (both selectors match the same element); set anywhere else it did nothing.
   That broke the class form outright, which exists for scoped side-by-side
   comparison — the one case that is never on the root.
   Attribute-presence plus both classes, so it covers .density--comfortable
   forcing comfortable inside a compact document, and any value added later. */
/* ── High contrast ────────────────────────────────────────────────────
   K2 owns the mode axis: data-k2-theme = light | dark | high-contrast.
   A consumer activates a mode; a theme supplies its values. What follows is
   this theme's take, deliberately conservative — it hardens the tokens that
   carry meaning (borders, text tiers, focus) and leaves hues alone, so a
   product opting in gets legibility without a second palette to maintain.
   prefers-contrast: more opts in for users who asked the OS for it. */
:root[data-k2-theme="high-contrast"],
[data-k2-theme="high-contrast"] {
  --kcds-color-text-secondary: var(--kcds-color-text-primary);
  --kcds-color-text-tertiary:  var(--kcds-color-text-primary);
  --kcds-color-border-subtle:  var(--kcds-color-border-strong);
  --kcds-color-border-default: var(--kcds-color-border-strong);
  --kcds-focus-ring-width: 3px;
  --kcds-shadow-sm: none;
  --kcds-shadow-md: none;
  --kcds-shadow-lg: none;
}
@media (prefers-contrast: more) {
  :root:not([data-k2-theme="light"]):not([data-k2-theme="dark"]) {
    --kcds-color-text-secondary: var(--kcds-color-text-primary);
    --kcds-color-text-tertiary:  var(--kcds-color-text-primary);
    --kcds-color-border-subtle:  var(--kcds-color-border-strong);
    --kcds-color-border-default: var(--kcds-color-border-strong);
    --kcds-focus-ring-width: 3px;
  }
}

/* Tenant logo slots re-substituted wherever a tenant is scoped, not only at
   :root — same reason as the axes below. Attribute-presence, so an app can
   scope a tenant to a subtree with one attribute. */
[data-kcds-tenant] {
  --k2-tenant-logo-url:       var(--kcds-tenant-logo-url);
  --k2-tenant-logo-dark-url:  var(--kcds-tenant-logo-dark-url);
  --k2-tenant-logo-white-url: var(--kcds-tenant-logo-white-url);
}

/* Layer 2 re-substitution for the mode axis — a mode set below :root would
   otherwise inherit the already-resolved root values. */
[data-k2-theme],
[data-kcds-theme] {
  --k2-color-text-secondary: var(--kcds-color-text-secondary);
  --k2-color-text-tertiary:  var(--kcds-color-text-tertiary);
  --k2-color-border-subtle:  var(--kcds-color-border-subtle);
  --k2-color-border-default: var(--kcds-color-border-default);
}

[data-kcds-density],
.density--compact,
.density--comfortable {
  --k2-button-height-sm:         var(--kcds-button-height-sm);
  --k2-button-height-md:         var(--kcds-button-height-md);
  --k2-button-height-lg:         var(--kcds-button-height-lg);
  --k2-button-padding-x-sm:      var(--kcds-button-padding-x-sm);
  --k2-button-padding-x-md:      var(--kcds-button-padding-x-md);
  --k2-button-padding-x-lg:      var(--kcds-button-padding-x-lg);
  --k2-button-font-size-sm:      var(--kcds-button-font-size-sm);
  --k2-button-font-size-md:      var(--kcds-button-font-size-md);
  --k2-button-font-size-lg:      var(--kcds-button-font-size-lg);
  --k2-button-font-weight:       var(--kcds-button-font-weight);
  --k2-button-radius-sm:         var(--kcds-button-radius-sm);
  --k2-button-radius:            var(--kcds-button-radius-md);
  --k2-button-radius-lg:         var(--kcds-button-radius-lg);

  --k2-input-height-sm:          var(--kcds-input-height-sm);
  --k2-input-height-md:          var(--kcds-input-height-md);
  --k2-input-height-lg:          var(--kcds-input-height-lg);
  --k2-input-radius-sm:          var(--kcds-input-radius-sm);
  --k2-input-radius:             var(--kcds-input-radius-md);
  --k2-input-radius-lg:          var(--kcds-input-radius-lg);
  --k2-input-padding-x:          var(--kcds-input-padding-x);
  --k2-input-font-size:          var(--kcds-input-font-size);

  --k2-card-padding:             var(--kcds-card-padding);
  --k2-card-border-radius:       var(--kcds-card-radius);
  --k2-dialog-radius:            var(--kcds-dialog-radius);
  --k2-dropdown-radius:          var(--kcds-dropdown-radius);
  --k2-toast-radius:             var(--kcds-toast-radius);
  --k2-alert-radius:             var(--kcds-alert-radius);
  --k2-alert-padding:            var(--kcds-alert-padding);
  --k2-tooltip-radius:           var(--kcds-tooltip-radius);
  --k2-tooltip-padding:          var(--kcds-tooltip-padding);

  --k2-badge-padding:            var(--kcds-badge-padding);
  --k2-badge-font-size:          var(--kcds-badge-font-size);
  --k2-badge-font-weight:        var(--kcds-badge-font-weight);
  --k2-badge-radius:             var(--kcds-badge-radius);

  --k2-table-cell-padding:       var(--kcds-table-cell-padding);
  --k2-table-font-size:          var(--kcds-table-font-size);
  --k2-table-header-font-size:   var(--kcds-table-header-font-size);
  --k2-table-header-font-weight: var(--kcds-table-header-font-weight);

  --k2-avatar-size-sm:           var(--kcds-avatar-size-sm);
  --k2-avatar-size-md:           var(--kcds-avatar-size-md);
  --k2-avatar-size-lg:           var(--kcds-avatar-size-lg);
  --k2-avatar-size-xl:           var(--kcds-avatar-size-xl);

  --k2-progress-height:          var(--kcds-progress-height);
  --k2-progress-radius:          var(--kcds-progress-radius);
}

/* ============================================================
   Motion system — 5 durations × 4 easings + named keyframes
   ============================================================ */
:root {
  --kcds-duration-instant:    0ms;
  --kcds-duration-fast:       100ms;
  --kcds-duration-default:    200ms;
  --kcds-duration-slow:       300ms;
  --kcds-duration-deliberate: 500ms;

  --kcds-ease-out:    cubic-bezier(0, 0, 0.2, 1);     /* default — appearing */
  --kcds-ease-in:     cubic-bezier(0.4, 0, 1, 1);     /* disappearing */
  --kcds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);   /* continuous */
  --kcds-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);  /* personality / celebration */
}

/* Named animation keyframes — use these, don't invent new ones. */
@keyframes kcds-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes kcds-fade-out  { from { opacity: 1; } to { opacity: 0; } }
@keyframes kcds-slide-in-end {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
[dir="rtl"] @keyframes kcds-slide-in-end {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes kcds-modal-enter {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@keyframes kcds-press-feedback {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.97); }
}
@keyframes kcds-spinner {
  to { transform: rotate(360deg); }
}
@keyframes kcds-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Global prefers-reduced-motion guard — required by spec. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Lang-based font stacks. The rule splits by SCRIPT, not locale:
   Lato renders Latin in every locale, Noto covers Arabic/Hebrew.
   Lato must come FIRST — the Noto subsets ship Latin glyphs, so
   leading with Noto let it claim Latin and English product names
   inside an Arabic UI rendered off-brand (KCDS A4).
   Lato has no Arabic/Hebrew coverage, so those scripts fall
   through to Noto exactly as before.
   Designer rule: Arabic uses 17px base + line-height 1.7.
   ============================================================ */
:lang(ar), [lang="ar"] {
  --kcds-font-family: 'Lato', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  /* Layer 2 re-declared, not just Layer 3: --k2-font-family: var(--kcds-font-family)
     substitutes at :root, so a descendant that only overrides --kcds-* inherits the
     already-resolved base stack. Without this, <div lang="ar"> inside an English page
     gets no Noto. (<html lang="ar"> works either way — the override lands on :root.) */
  --k2-font-family: 'Lato', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --kcds-text-body-m: 17px;
  --kcds-line-height-relaxed: 1.7;
}
:lang(he), [lang="he"] {
  --kcds-font-family: 'Lato', 'Noto Sans Hebrew', 'Segoe UI', Tahoma, sans-serif;
  --k2-font-family:   'Lato', 'Noto Sans Hebrew', 'Segoe UI', Tahoma, sans-serif;
}
/* Urdu. Nastaliq is the preferred style but is not mirrored on
   the KC CDN yet, so it resolves only where locally installed; Noto Sans Arabic is the
   self-hosted fallback and covers the Arabic-script codepoints Urdu uses. */
:lang(ur), [lang="ur"] {
  --kcds-font-family: 'Lato', 'Noto Nastaliq Urdu', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --k2-font-family:   'Lato', 'Noto Nastaliq Urdu', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* ============================================================
   Utilities — drop-in CSS classes consumers paste anywhere.
   ============================================================ */
.kcds-line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kcds-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kcds-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kcds-line-clamp-none {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.kcds-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* CSS Grid base with min-width:0 on every child. Default `min-width:auto`
 * means a wide child (long course title, code block, table row) can force
 * its track to expand and push horizontal scroll to the page itself —
 * the canonical's Overflow Pattern #3 (08-canonical-references/README.md
 * v0.12.1). Compose with your own grid-template-* declarations. */
.kcds-grid           { display: grid; }
.kcds-grid > *       { min-width: 0; }

/* `display: contents` for layout-transparent page custom elements. Apply to
 * any custom element that wraps multiple sections inside a flex/grid parent
 * (typically <main class="page"> or similar). Without it, the custom element
 * becomes an opaque box between the parent's gap/grid rules and the section
 * children — breaking vertical rhythm. With it, the children participate in
 * the parent's layout directly.
 *
 *   <main class="page" style="display:flex;gap:24px">
 *     <kcds-home-page class="kcds-page-host">
 *       <section>…</section>   ← these now get the 24px gap
 *       <section>…</section>
 *     </kcds-home-page>
 *   </main>
 */
.kcds-page-host { display: contents; }

/* ============================================================
   GLOBAL SCROLLBAR THEMING
   Browsers default to OS scrollbars — on a dark KC surface that
   renders as a glaring white bar. Resolve through semantic tokens
   so the scrollbars flip with the theme automatically (canonical
   reference §5 v0.12.5).
   ============================================================ */
* {
  scrollbar-color: var(--kcds-color-text-tertiary) var(--kcds-color-surface-subtle);
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--kcds-color-surface-subtle); }
*::-webkit-scrollbar-thumb {
  background: var(--kcds-color-text-tertiary);
  border: 2px solid var(--kcds-color-surface-subtle);
  border-radius: var(--kcds-radius-full, 999px);
}
*::-webkit-scrollbar-thumb:hover { background: var(--kcds-color-text-secondary); }
*::-webkit-scrollbar-corner { background: var(--kcds-color-surface-subtle); }

/* ============================================================
   GLOBAL LINK THEMING
   Default <a> color follows the theme link token, not the browser
   blue. Themes override --kcds-color-text-link to retune.
   ============================================================ */
a {
  color: var(--kcds-color-text-link, var(--kcds-color-primary, #FF881A));
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--kcds-color-border-focus, var(--kcds-color-primary, #FF881A));
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================================
   ACCESSIBILITY UTILITIES — required by accessibility.md
   ============================================================ */

/* .sr-only — visually hidden but available to assistive tech. Mandatory
 * on every page baseline; many KC components emit screen-reader-only
 * text (stepper progress, status badge prefixes, table captions, icon-
 * only buttons, live regions) and assume this class is defined. */
.sr-only,
.kcds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-within,
.kcds-sr-only-focusable:focus,
.kcds-sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: revert;
  margin: revert;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Viewport-conditional utilities — explicit display rules so a phone-only
 * component doesn't render on desktop and vice versa. */
.kcds-mobile-only { display: revert; }
.kcds-desktop-only { display: none; }
@media (min-width: 768px) {
  .kcds-mobile-only { display: none; }
  .kcds-desktop-only { display: revert; }
}

/* Bidi isolation — numbers, IDs, codes, URLs, currency, timestamps
 * stay LTR inside RTL UI. Without this, "Order #1234" reorders to
 * "1234# Order" in Arabic / Hebrew context. (multilingual.md) */
.kcds-bidi-ltr,
.kcds-code,
.kcds-number,
.kcds-id,
.kcds-currency,
.kcds-timestamp {
  unicode-bidi: isolate;
  direction: ltr;
}

/* German compound-word hyphenation — long compounds break tight layouts
 * without this. (multilingual.md → German) */
[lang="de"] { hyphens: auto; }

/* KCDS v1.6.0 D2 — WCAG 2.5.5 Target Size (44×44px minimum) on coarse
 * pointers. Applied at the shadow-host level for K2 controls whose
 * visible size is smaller than 44px (icon buttons at sm/md, checkboxes,
 * radios, switch, tag remove). Visible paint is unchanged; the host
 * grows so the hit area meets AA. */
@media (pointer: coarse) {
  k2-icon-button, k2-checkbox, k2-radio, k2-switch, k2-tag[removable] {
    min-width:  44px;
    min-height: 44px;
  }
}