/* Crate brand kit tokens (team/reference/brandKit/tokens.css), light + OS dark only, no @font-face. */
:root {
--ck-brand-blue: #2563eb;
--ck-brand-blueShade: #1d4ed8;
--ck-brand-blueLt: #8ab4ff;
--ck-brand-mustard: #e9b949;
--ck-brand-mustardShade: #c99a2e;
--ck-brand-cream: #f3ede4;
--ck-brand-navy: #1a2551;
--ck-brand-rim: #3f5499;
--ck-brand-white: #ffffff;
--ck-font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
--ck-font-ui: 'Nunito', system-ui, sans-serif;
--ck-font-num: 'Inter', system-ui, sans-serif;
--ck-font-mono: 'JetBrains Mono', ui-monospace, monospace;
--ck-radius-card: 26px;
--ck-radius-tile: 20px;
--ck-radius-btn: 20px;
--ck-radius-btnSm: 16px;
--ck-radius-chip: 999px;
--ck-radius-input: 18px;
--ck-radius-cover: 14px;
--ck-radius-sheet: 28px;
--ck-radius-pill: 9px;
--ck-radius-sticker: 999px;
--ck-radius-toast: 18px;
--ck-radius-icon: 22px;
--ck-press-drop: 3px;
--ck-gutter: 20px;
--ck-bg: #f3ede4;
--ck-surface: #fffaf2;
--ck-surface2: #ebe2d3;
--ck-surface3: #ddd1bd;
--ck-raised: #fffaf2;
--ck-line: #d6cab6;
--ck-text: #1a2551;
--ck-muted: #4b5478;
--ck-faint: #5c6486;
--ck-blue: #2563eb;
--ck-blueLt: #1d4ed8;
--ck-onBlue: #ffffff;
--ck-mustard: #7a5300;
--ck-sticker: #e9b949;
--ck-heart: #d93b30;
--ck-ok: #1f6b3c;
--ck-danger: #b83227;
--ck-dangerBg: rgba(184,50,39,0.08);
--ck-dangerLine: rgba(184,50,39,0.45);
--ck-scrim: rgba(26,37,81,0.42);
--ck-bar: rgba(255,250,242,0.98);
--ck-glass: rgba(255,250,242,0.86);
--ck-glassLine: #1a2551;
--ck-tint: #dbe6fd;
--ck-tintDeep: #c9d9fb;
--ck-heroA: #2563eb;
--ck-heroB: #1d4ed8;
--ck-shadow: #1a2551;
--ck-jbTop: #dbe6fd;
--ck-jbMid: #efe8dc;
--ck-jbBottom: #f3ede4;
--ck-edge: #1a2551;
--ck-chipEdge: #1a2551;
--ck-ink: #1a2551;
--ck-primaryShade: #1d4ed8;
--ck-chipOn: #e9b949;
--ck-onChipOn: #1a2551;
--ck-chipOnShade: #c99a2e;
--ck-onSticker: #1a2551;
--ck-shadowHard: #1a2551;
--ck-heroText: #ffffff;
--ck-heroMuted: #ffffff;
--ck-heroLabel: #1a2551;
--ck-heroLabelBg: #e9b949;
--ck-heroEdge: #1a2551;
--ck-heroBtn: #fffaf2;
--ck-onHeroBtn: #1a2551;
--ck-white: #ffffff;
--ck-warnBg: #f9e8c3;
--ck-warnEdge: #1a2551;
--ck-border-card: 2.5px;
--ck-border-btn: 2.5px;
--ck-border-chip: 2px;
--ck-border-input: 2.5px;
--ck-border-tabTop: 2.5px;
--ck-border-fabRing: 3px;
--ck-border-cover: 2.5px;
--ck-border-hair: 1px;
--ck-shadow-btn: 0 4px 0 #1a2551, inset 0 -5px 0 #1d4ed8, inset 0 3px 0 rgba(255,255,255,0.28);
--ck-shadow-btnPressed: 0 1px 0 #1a2551, inset 0 3px 0 rgba(0,0,0,0.15);
--ck-shadow-card: 0 4px 0 #1a2551;
--ck-shadow-cover: 0 4px 0 #1a2551;
--ck-shadow-fab: 0 4px 0 #1a2551, inset 0 -6px 0 #1d4ed8, inset 0 3px 0 rgba(255,255,255,0.3);
--ck-shadow-chipOn: 0 3px 0 #1a2551, inset 0 -3px 0 #c99a2e;
--ck-shadow-iconBtn: 0 3px 0 #1a2551;
--ck-shadow-toast: 0 4px 0 #1a2551;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ck-bg: #151a33;
--ck-surface: #1b2142;
--ck-surface2: #2a3158;
--ck-surface3: #353d6b;
--ck-raised: #1b2142;
--ck-line: #3a4373;
--ck-text: #f3ede4;
--ck-muted: #b6bcd8;
--ck-faint: #949ec6;
--ck-blue: #2563eb;
--ck-blueLt: #8ab4ff;
--ck-onBlue: #ffffff;
--ck-mustard: #f0c862;
--ck-sticker: #e9b949;
--ck-heart: #ff6257;
--ck-ok: #7ad69a;
--ck-danger: #ff9a8e;
--ck-dangerBg: rgba(255,154,142,0.12);
--ck-dangerLine: rgba(255,154,142,0.45);
--ck-scrim: rgba(7,10,24,0.6);
--ck-bar: rgba(27,33,66,0.97);
--ck-glass: rgba(21,26,51,0.62);
--ck-glassLine: rgba(106,134,224,0.5);
--ck-tint: #24306a;
--ck-tintDeep: #2c3a80;
--ck-heroA: #2563eb;
--ck-heroB: #1d4ed8;
--ck-shadow: #070a18;
--ck-jbTop: #1e2a66;
--ck-jbMid: #151a33;
--ck-jbBottom: #0f1328;
--ck-edge: #6a86e0;
--ck-chipEdge: #3a4373;
--ck-ink: #1a2551;
--ck-primaryShade: #1a3a9e;
--ck-chipOn: #e9b949;
--ck-onChipOn: #1a2551;
--ck-chipOnShade: #c99a2e;
--ck-onSticker: #1a2551;
--ck-shadowHard: #070a18;
--ck-heroText: #ffffff;
--ck-heroMuted: #ffffff;
--ck-heroLabel: #1a2551;
--ck-heroLabelBg: #e9b949;
--ck-heroEdge: #6a86e0;
--ck-heroBtn: #fffaf2;
--ck-onHeroBtn: #1a2551;
--ck-white: #ffffff;
--ck-warnBg: #443f43;
--ck-warnEdge: #e9b949;
--ck-border-card: 2px;
--ck-border-btn: 2px;
--ck-border-chip: 2px;
--ck-border-input: 2px;
--ck-border-tabTop: 2px;
--ck-border-fabRing: 3px;
--ck-border-cover: 2px;
--ck-border-hair: 1px;
--ck-shadow-btn: 0 0 0 2px #6a86e0, 0 5px 0 2px #070a18, inset 0 -5px 0 #1a3a9e, inset 0 3px 0 rgba(255,255,255,0.28);
--ck-shadow-btnPressed: 0 0 0 2px #6a86e0, 0 1px 0 2px #070a18, inset 0 3px 0 rgba(0,0,0,0.15);
--ck-shadow-card: 0 4px 0 #070a18;
--ck-shadow-cover: 0 4px 0 #070a18;
--ck-shadow-fab: 0 0 0 2.5px #6a86e0, 0 6px 0 2px #070a18, inset 0 -6px 0 #1a3a9e, inset 0 3px 0 rgba(255,255,255,0.3);
--ck-shadow-chipOn: 0 3px 0 #070a18, inset 0 -3px 0 #c99a2e;
--ck-shadow-iconBtn: 0 3px 0 #070a18;
--ck-shadow-toast: 0 4px 0 #070a18;
}
}