/*
* Kreisleriana Design System -- Colors & Type
* Derived from apps/hemidemi-web/src/styles/theme.css and apps/website/src/styles/global.css
*
* Two palettes are exported:
* - [data-brand="hemidemi"] (DEFAULT on :root) -- warm ivory + muted gold
* - [data-brand="kreisleriana"] -- warm ivory + muted teal (marketing)
*
* Dark mode:
* - [data-theme="dark"] -- coffee/charcoal surfaces, brighter gold
*/
/* --- Self-hosted typefaces -----------------------------
* Inter (300-700) and JetBrains Mono (400, 500).
* latin-ext covers diacritics for European composer names;
* both subsets preserved for completeness.
* -------------------------------------------------------- */
/* Icons are still served from Google -- Material Symbols ligatures.
MUST be first: @import rules must precede @font-face and other declarations. */
/* Inter */
@font-face { font-family:"Inter"; font-style:normal; font-weight:300; font-display:swap;
src:url("fonts/inter-300-latin.woff2") format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:300; font-display:swap;
src:url("fonts/inter-300-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
src:url("fonts/inter-400-latin.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap;
src:url("fonts/inter-400-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
src:url("fonts/inter-500-latin.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap;
src:url("fonts/inter-500-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
src:url("fonts/inter-600-latin.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap;
src:url("fonts/inter-600-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap;
src:url("fonts/inter-700-latin.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap;
src:url("fonts/inter-700-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* JetBrains Mono -- INTERNAL / developer register; rarely appears in public surfaces. */
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap;
src:url("fonts/jetbrains-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap;
src:url("fonts/jetbrains-mono-400-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap;
src:url("fonts/jetbrains-mono-500-latin.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap;
src:url("fonts/jetbrains-mono-500-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* end self-hosted typefaces */
/* Jost -- geometric display face (Futura lineage). Headlines, wordmark, display. */
@font-face { font-family:"Jost"; font-style:normal; font-weight:400; font-display:swap;
src:url("fonts/jost-400-latin.woff2") format("woff2"); }
@font-face { font-family:"Jost"; font-style:normal; font-weight:400; font-display:swap;
src:url("fonts/jost-400-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Jost"; font-style:normal; font-weight:500; font-display:swap;
src:url("fonts/jost-500-latin.woff2") format("woff2"); }
@font-face { font-family:"Jost"; font-style:normal; font-weight:500; font-display:swap;
src:url("fonts/jost-500-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Jost"; font-style:normal; font-weight:600; font-display:swap;
src:url("fonts/jost-600-latin.woff2") format("woff2"); }
@font-face { font-family:"Jost"; font-style:normal; font-weight:600; font-display:swap;
src:url("fonts/jost-600-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:"Jost"; font-style:normal; font-weight:700; font-display:swap;
src:url("fonts/jost-700-latin.woff2") format("woff2"); }
@font-face { font-family:"Jost"; font-style:normal; font-weight:700; font-display:swap;
src:url("fonts/jost-700-latin-ext.woff2") format("woff2");
unicode-range:U+0100-02AF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root,
[data-brand="hemidemi"] {
/* -- Primary text (slate) -- */
--color-primary: #4A5568;
--color-primary-dark: #2D3748;
--color-primary-light: #718096;
/* -- Accent (muted gold) -- */
--color-accent: #B8860B;
--color-accent-dark: #8B6914;
--color-accent-light: #D4AF37;
--color-accent-hover: #8B6914;
--color-secondary: #B8860B;
/* -- Feedback -- */
--color-success: #48874A;
--color-success-light: #D4EDDA;
--color-success-dark: #2D5A2E;
--color-warning: #C9850A;
--color-warning-light: #FFF3CD;
--color-warning-dark: #856404;
--color-error: #C53030;
--color-error-light: #FED7D7;
--color-error-dark: #9B2C2C;
--color-info: #4A6FA5;
--color-info-light: #D6E4F0;
--color-info-dark: #2C5282;
/* -- Surfaces (warm ivory) -- */
--color-background: #FDFCFA;
--color-background-secondary: #F8F6F1;
--color-background-alt: #F8F6F1;
--color-surface: #FFFFFF;
--color-surface-hover: #F8F6F1;
/* -- Text -- */
--color-text: #292524;
--color-text-secondary: #78716C;
--color-text-inverse: #FFFFFF;
/* -- Borders -- */
--color-border: #E7E5E4;
--color-border-light: #F0EFEC;
/* -- Shadows -- */
--color-shadow: rgba(41, 37, 36, 0.08);
--color-shadow-light: rgba(41, 37, 36, 0.04);
/* -- Watercolor washes (hero backdrops) -- */
--color-wash-sienna: rgba(210, 149, 100, 0.20);
--color-wash-umber: rgba(139, 121, 94, 0.15);
--color-wash-blue: rgba( 29, 61, 94, 0.10);
/* -- Brand-only accents -- */
--color-brand-indigo: #1A237E; /* app icon ground only */
/* --------------- Type --------------- */
/* Serif removed -- display & body both run on Inter.
--font-serif retained as an alias to --font-sans
so legacy references keep compiling. */
--font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-display: "Jost", "Futura", "Century Gothic", var(--font-sans);
--font-serif: var(--font-sans);
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--font-icon: "Material Symbols Outlined";
--font-size-xs: 0.75rem; /* 12 */
--font-size-sm: 0.875rem; /* 14 */
--font-size-base: 1rem; /* 16 */
--font-size-md: 1.125rem; /* 18 */
--font-size-lg: 1.25rem; /* 20 */
--font-size-xl: 1.5rem; /* 24 */
--font-size-2xl: 2rem; /* 32 */
--font-size-3xl: 2.5rem; /* 40 */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* --------------- Spacing --------------- */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-xxl: 3rem;
/* --------------- Radii (deliberately small) --------------- */
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
--radius-xl: 8px;
--radius-round: 50%;
--radius-full: 9999px;
/* --------------- Shadows (restrained) --------------- */
--shadow-sm: 0 1px 2px var(--color-shadow-light);
--shadow-md: 0 2px 8px var(--color-shadow);
--shadow-lg: 0 4px 12px var(--color-shadow);
--shadow-xl: 0 12px 40px var(--color-shadow);
/* --------------- Motion --------------- */
--transition-fast: 150ms ease;
--transition-normal: 300ms ease;
--transition-slow: 500ms ease;
/* --------------- Z-index --------------- */
--z-index-base: 1;
--z-index-dropdown: 100;
--z-index-sticky: 200;
--z-index-modal-backdrop: 1000;
--z-index-modal: 1001;
--z-index-popover: 1100;
--z-index-tooltip: 1200;
--z-index-notification: 9999;
}
/* ---------------------------------------------
* Kreisleriana (marketing) -- teal accent variant
* --------------------------------------------- */
[data-brand="kreisleriana"] {
--color-background: #FAFAF7;
--color-background-secondary: #F4F3EF;
--color-surface: #EEEEE8;
--color-surface-hover: #E5E4DE;
--color-text: #2D2D2D;
--color-text-secondary: #6B6B6B;
--color-border: #E0DFD8;
--color-border-light: #EAEAE4;
--color-accent: #3B7C8A;
--color-accent-dark: #2D6470;
--color-accent-light: #4A9BAC;
--color-accent-hover: #2D6470;
--color-secondary: #3B7C8A;
}
/* ---------------------------------------------
* Dark mode (hemidemi)
* --------------------------------------------- */
[data-theme="dark"] {
--color-primary: #A0AEC0;
--color-primary-dark: #718096;
--color-primary-light: #CBD5E0;
--color-accent: #D4AF37;
--color-accent-dark: #B7953C;
--color-accent-light: #E8C547;
--color-accent-hover: #E8C547;
--color-secondary: #D4AF37;
--color-success: #68D391;
--color-success-light: #276749;
--color-success-dark: #9AE6B4;
--color-warning: #ECC94B;
--color-warning-light: #744210;
--color-warning-dark: #F6E05E;
--color-error: #FC8181;
--color-error-light: #742A2A;
--color-error-dark: #FEB2B2;
--color-info: #63B3ED;
--color-info-light: #2A4365;
--color-info-dark: #90CDF4;
--color-background: #1C1917;
--color-background-secondary: #292524;
--color-background-alt: #292524;
--color-surface: #44403C;
--color-surface-hover: #57534E;
--color-text: #F5F5F4;
--color-text-secondary: #A8A29E;
--color-text-inverse: #1C1917;
--color-border: #57534E;
--color-border-light: #44403C;
--color-shadow: rgba(0, 0, 0, 0.40);
--color-shadow-light: rgba(0, 0, 0, 0.25);
--color-wash-sienna: rgba(210, 149, 100, 0.08);
--color-wash-umber: rgba(139, 121, 94, 0.06);
--color-wash-blue: rgba( 29, 61, 94, 0.05);
}
/* =============================================
* Semantic / element-level styles
* ============================================= */
body, .body {
font-family: var(--font-sans);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: 1.6;
letter-spacing: -0.011em;
color: var(--color-text);
background: var(--color-background);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, .h1 {
font-family: var(--font-display);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-medium);
letter-spacing: -0.01em;
line-height: 1.1;
color: var(--color-text);
}
h2, .h2 {
font-family: var(--font-display);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-medium);
letter-spacing: -0.005em;
line-height: 1.15;
color: var(--color-text);
}
h3, .h3 {
font-family: var(--font-display);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
letter-spacing: 0;
line-height: 1.2;
color: var(--color-text);
}
h4, .h4 {
font-family: var(--font-serif);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: 1.35;
color: var(--color-text);
}
h5, .h5, h6, .h6 {
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.01em;
color: var(--color-text);
}
p, .p {
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-text);
text-wrap: pretty;
}
.lead {
font-family: var(--font-sans);
font-size: var(--font-size-md);
line-height: 1.7;
color: var(--color-text-secondary);
}
.eyebrow {
font-family: var(--font-sans);
font-size: 0.8rem;
font-weight: var(--font-weight-medium);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-accent);
}
.small, small {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.caption {
font-size: var(--font-size-xs);
letter-spacing: 0.02em;
color: var(--color-text-secondary);
}
code, .code, kbd, pre {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--color-background-secondary);
padding: 0.1em 0.35em;
border-radius: var(--radius-sm);
color: var(--color-text);
}
.icon {
font-family: var(--font-icon);
font-weight: normal;
font-style: normal;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "liga";
}
a, .link {
color: var(--color-accent);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover, .link:hover { color: var(--color-accent-dark); }
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
/* ============================================================
* Kreisleriana — Bauhaus UI layer
* Shared design language extracted from the Identity (IDP)
* sign-in panel and the Service-dispatch intranet homepage.
*
* Depends on: colors_and_type.css (tokens + fonts)
* Scope: apply on an element carrying data-brand="kreisleriana"
* (or :root). Adds the geometric / hard-edged layer
* on top of the base ivory + Jost system.
*
* Drop both stylesheets into the app, in this order:
*
*
* ============================================================ */
:root,
[data-brand="kreisleriana"]{
/* --- Bauhaus primaries (the geometric mark palette) --- */
--kb-ink: #1C1917; /* near-black — borders, text, fills */
--kb-paper: #FDFCFA; /* warm ivory ground */
--kb-tint: #F8F2E3; /* hover wash */
--kb-tint-2: #F0E5CC; /* active / focus wash */
--kb-red: #C53030; /* signal red — offset shadow, accents */
--kb-blue: #2563EB; /* circle / avatar */
--kb-yellow: #FACC21; /* triangle */
/* --- Hard-edge primitives --- */
--kb-rule: 1.5px solid var(--kb-ink); /* hairline / border */
--kb-radius: 0; /* corners are square */
--kb-offset: 3px; /* shadow throw */
--kb-ease: 120ms ease; /* shared timing */
}
/* ------------------------------------------------------------
* 1. Hard offset shadow + "press in"
* The signature interaction: a flat red shadow thrown down-
* right that collapses as the element translates into it.
* Use .kb-press on any clickable dark surface.
* ---------------------------------------------------------- */
.kb-press{
border-radius:var(--kb-radius);
box-shadow:var(--kb-offset) var(--kb-offset) 0 0 var(--kb-red);
transition:transform var(--kb-ease), box-shadow var(--kb-ease);
}
.kb-press:hover{
transform:translate(var(--kb-offset), var(--kb-offset));
box-shadow:0 0 0 0 var(--kb-red);
}
/* ------------------------------------------------------------
* 2. Button — dark fill, square, red shadow
* ---------------------------------------------------------- */
.kb-btn{
display:inline-block;
font-family:var(--font-display);
font-size:15px;font-weight:500;letter-spacing:.02em;
padding:12px 16px;cursor:pointer;
color:var(--kb-paper);background:var(--kb-ink);
border:var(--kb-rule);border-radius:var(--kb-radius);
box-shadow:var(--kb-offset) var(--kb-offset) 0 0 var(--kb-red);
transition:transform var(--kb-ease), box-shadow var(--kb-ease);
}
.kb-btn:hover{
transform:translate(var(--kb-offset), var(--kb-offset));
box-shadow:0 0 0 0 var(--kb-red);
}
.kb-btn--block{width:100%;text-align:center}
/* ------------------------------------------------------------
* 3. Field — square input, tint progression on hover/focus
* ---------------------------------------------------------- */
.kb-label{
display:block;font-family:var(--font-sans);
font-size:10.5px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--color-text-secondary);
margin:0 0 5px;
}
.kb-input{
width:100%;font-family:var(--font-sans);font-size:14px;
padding:11px 12px;color:var(--kb-ink);background:var(--kb-paper);
border:var(--kb-rule);border-radius:var(--kb-radius);
outline:none;transition:background var(--kb-ease);
}
.kb-input:hover:not(:focus){background:var(--kb-tint)}
.kb-input:focus{background:var(--kb-tint-2)}
.kb-field{margin-bottom:14px}
/* ------------------------------------------------------------
* 4. Link — underline grows + turns red on hover
* ---------------------------------------------------------- */
.kb-link{
font-family:var(--font-display);font-weight:500;
color:var(--kb-ink);text-decoration:none;line-height:1.1;
border-bottom:2px solid transparent;padding-bottom:1px;
transition:color var(--kb-ease), border-color var(--kb-ease);
}
.kb-link:hover{color:var(--kb-red);border-bottom-color:var(--kb-red)}
/* hairline-underline variant (footer links) */
.kb-link--quiet{
font-family:var(--font-sans);font-size:12px;font-weight:400;
border-bottom:1px solid var(--color-border);
}
.kb-link--quiet:hover{color:var(--kb-ink);border-bottom-color:var(--kb-ink)}
/* ------------------------------------------------------------
* 5. Lockup — tracked mono caps label
* ---------------------------------------------------------- */
.kb-lockup{
font-family:var(--font-mono);font-size:9px;font-weight:500;
letter-spacing:.16em;text-transform:uppercase;
color:var(--color-text-secondary);
}
/* ------------------------------------------------------------
* 6. Hairline rule — full-strength ink divider
* ---------------------------------------------------------- */
.kb-rule{height:1.5px;background:var(--kb-ink);border:0;margin:18px 0 4px}
/* ------------------------------------------------------------
* 7. Geometric marks — the brand's four primitives.
*
* ---------------------------------------------------------- */
.kb-glyph{flex:0 0 auto;display:inline-block;width:22px;height:22px;position:relative}
.kb-glyph--circle{border-radius:50%;background:var(--kb-blue)}
.kb-glyph--square{background:var(--kb-red)}
.kb-glyph--triangle{
width:0;height:0;background:none;
border-left:11px solid transparent;border-right:11px solid transparent;
border-bottom:19px solid var(--kb-yellow);
}
.kb-glyph--slash{background:none}
.kb-glyph--slash::before{
content:"";position:absolute;left:9px;top:-1px;width:4px;height:24px;
background:var(--kb-ink);transform:rotate(12deg);transform-origin:center;
}
/* section header: glyph + Jost title */
.kb-head{display:flex;align-items:center;gap:13px;margin:0 0 6px}
.kb-head h2,.kb-head .kb-title{
font-family:var(--font-display);font-size:24px;font-weight:600;
letter-spacing:-.01em;margin:0;line-height:1;color:var(--kb-ink);
}
/* ------------------------------------------------------------
* 8. Avatar + SSO menu — login-state control
* ---------------------------------------------------------- */
.kb-avatar{
width:40px;height:40px;flex:0 0 auto;padding:0;cursor:pointer;
display:flex;align-items:center;justify-content:center;
color:#fff;background:var(--kb-blue);border:var(--kb-rule);
font-family:var(--font-display);font-size:16px;font-weight:600;
transition:transform var(--kb-ease), box-shadow var(--kb-ease);
}
.kb-avatar:hover,
.kb-avatar[aria-expanded="true"]{box-shadow:2px 2px 0 0 var(--kb-red)}
.kb-menu{
position:absolute;top:calc(100% + 12px);right:0;z-index:10;
min-width:150px;display:none;
background:var(--color-surface,#fff);border:var(--kb-rule);
box-shadow:4px 4px 0 0 var(--kb-red);
}
.kb-menu.is-open{display:block}
.kb-menu button{
width:100%;text-align:left;cursor:pointer;
font-family:var(--font-display);font-size:14px;font-weight:500;
padding:12px 16px;color:var(--kb-ink);background:none;border:0;
transition:background var(--kb-ease), color var(--kb-ease);
}
.kb-menu button:hover{background:var(--kb-ink);color:var(--kb-paper)}
/* ------------------------------------------------------------
* 9. Plate — borderless layout shell.
* The shared container idiom: no card outline, no drop
* shadow; the mark and a single hairline carry the frame.
* ---------------------------------------------------------- */
.kb-plate{background:transparent;border:0;border-radius:var(--kb-radius)}
/* ============================================================
* 10. Component extensions
* Surfaces the bauhaus primitive layer does not cover but
* the IdP account pages need: alerts, tables, account nav,
* permission lists, and mono code blocks. Same idiom --
* square corners, hairline ink rules, signal-red accents.
* ============================================================ */
/* page furniture shared by the auth + dispatch shells */
.kb-sub{
font-family:var(--font-sans);font-size:13px;line-height:1.55;
color:var(--color-text-secondary);margin:0 0 18px;
}
.kb-foot{
font-family:var(--font-mono);font-size:9px;font-weight:500;
letter-spacing:.16em;text-transform:uppercase;
color:var(--color-text-secondary);text-align:center;margin-top:18px;
}
/* button variants -- ghost (secondary), danger, and a compact size for
in-table actions. Primary .kb-btn (red offset shadow) is in section 2. */
.kb-btn--ghost{
color:var(--kb-ink);background:var(--kb-paper);
box-shadow:var(--kb-offset) var(--kb-offset) 0 0 var(--kb-ink);
}
.kb-btn--ghost:hover{box-shadow:0 0 0 0 var(--kb-ink)}
.kb-btn--danger{background:var(--color-error);border-color:var(--color-error)}
.kb-btn--sm{padding:7px 11px;font-size:13px}
/* alert -- square block, hairline border, left rule carries the signal */
.kb-alert{
font-family:var(--font-sans);font-size:13px;line-height:1.5;
padding:10px 12px;margin:0 0 14px;border:var(--kb-rule);
border-left-width:4px;border-radius:var(--kb-radius);
color:var(--kb-ink);background:var(--kb-paper);
}
.kb-alert--err{border-color:var(--color-error);background:var(--color-error-light)}
.kb-alert--ok{border-color:var(--color-success);background:var(--color-success-light)}
/* table -- hairline ink rules, tracked mono header */
.kb-table{width:100%;border-collapse:collapse;font-family:var(--font-sans);font-size:13.5px}
.kb-table th,.kb-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--color-border)}
.kb-table th{
font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:.12em;
text-transform:uppercase;color:var(--color-text-secondary);
border-bottom:var(--kb-rule);
}
.kb-table tr:last-child td{border-bottom:0}
/* account nav -- a row of kb-links above the cards */
.kb-account-nav{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 20px}
/* permission / scope list -- hairline dividers, Jost name + muted desc */
.kb-list{list-style:none;margin:0 0 16px;padding:0}
.kb-list li{padding:11px 0;border-bottom:1px solid var(--color-border)}
.kb-list li:last-child{border-bottom:0}
.kb-list .kb-list-name{
display:block;font-family:var(--font-display);font-size:14px;font-weight:500;
letter-spacing:-.005em;color:var(--kb-ink);
}
.kb-list .kb-list-desc{
display:block;font-family:var(--font-sans);font-size:12.5px;
color:var(--color-text-secondary);margin-top:1px;
}
/* mono code block -- recovery codes, provisioning URIs, fresh tokens */
.kb-codes{
font-family:var(--font-mono);font-size:12.5px;line-height:1.7;
word-break:break-all;color:var(--kb-ink);background:var(--kb-tint);
border:var(--kb-rule);border-radius:var(--kb-radius);padding:12px 14px;
}
.kb-codes ol{margin:0;padding-left:1.4em}
/* inline QR for TOTP enrollment */
.kb-qr{display:block;margin:6px auto 12px;max-width:200px}