/* Yiski suite design tokens — served from yiski.com/shell/tokens.css Apps set --y-accent to their own color; everything else stays identical. Theme model (three states): - No data-theme attribute on (default): follow the OS via prefers-color-scheme. - data-theme="light" / data-theme="dark": an explicit choice made with the shell's theme switcher (persisted in localStorage by shell.js); it always wins over the OS setting. The document-level color-scheme (native form controls, scrollbars) is owned by each app in its own stylesheet; this file only themes the shell chrome, so apps with their own theming (YiskiCal skins, Yiskirun light/dark) are never overridden by the suite tokens. Visual system ("layered & tonal", Sept 2026): two surface levels on a tinted ground, hairline borders, layered shadows, Geist type, sentence-case pills with a status dot, segmented tabs. */ :root { --y-accent: #4f46e5; --y-bg: #eef0f4; --y-surface: #ffffff; --y-surface-2: #f5f6f9; --y-text: #14171c; --y-text-muted: #5d6572; --y-text-faint: #8b929e; --y-border: #dfe3e9; --y-border-strong: #c7cdd6; --y-success: #177a53; --y-warn: #9a6700; --y-danger: #b3261e; --y-shadow-sm: 0 1px 2px rgba(15, 18, 24, .06); --y-shadow: 0 1px 2px rgba(15, 18, 24, .05), 0 10px 28px -14px rgba(15, 18, 24, .22); --y-shadow-lg: 0 2px 4px rgba(15, 18, 24, .06), 0 24px 48px -20px rgba(15, 18, 24, .3); --y-radius: 12px; --y-radius-sm: 8px; --y-radius-xs: 6px; --y-font: 'Geist', system-ui, 'Segoe UI', sans-serif; --y-font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', monospace; --y-shell-height: 48px; --y-rail-width: 56px; /* derived roles — follow the accent/state color automatically in both themes */ --y-accent-soft: color-mix(in srgb, var(--y-accent) 11%, var(--y-surface)); --y-accent-ring: color-mix(in srgb, var(--y-accent) 28%, transparent); --y-accent-strong: color-mix(in srgb, var(--y-accent) 82%, var(--y-text)); --y-success-soft: color-mix(in srgb, var(--y-success) 13%, var(--y-surface)); --y-warn-soft: color-mix(in srgb, var(--y-warn) 14%, var(--y-surface)); --y-danger-soft: color-mix(in srgb, var(--y-danger) 11%, var(--y-surface)); --y-muted-soft: color-mix(in srgb, var(--y-text-muted) 12%, var(--y-surface)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --y-bg: #0e1013; --y-surface: #161a20; --y-surface-2: #1d222a; --y-text: #e9ebef; --y-text-muted: #9aa2ae; --y-text-faint: #6b7380; --y-border: #262c35; --y-border-strong: #343c48; --y-success: #4ad395; --y-warn: #e3b647; --y-danger: #ff7b86; --y-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --y-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -16px rgba(0, 0, 0, .7); --y-shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 28px 56px -20px rgba(0, 0, 0, .8); } } :root[data-theme="dark"] { --y-bg: #0e1013; --y-surface: #161a20; --y-surface-2: #1d222a; --y-text: #e9ebef; --y-text-muted: #9aa2ae; --y-text-faint: #6b7380; --y-border: #262c35; --y-border-strong: #343c48; --y-success: #4ad395; --y-warn: #e3b647; --y-danger: #ff7b86; --y-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --y-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -16px rgba(0, 0, 0, .7); --y-shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 28px 56px -20px rgba(0, 0, 0, .8); } /* Shell chrome follows the same three states (apps own their document). */ yiski-shell { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) yiski-shell { color-scheme: dark; } } :root[data-theme="dark"] yiski-shell { color-scheme: dark; } /* ---- Shared components (class names are the contract; every app may use them) ---- */ .y-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 36px; padding: .4rem .9rem; border-radius: var(--y-radius-sm); border: 1px solid color-mix(in srgb, var(--y-accent) 85%, #000); background: var(--y-accent); color: #fff; font: 600 .9rem var(--y-font); line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--y-shadow-sm); } .y-btn:hover { filter: brightness(1.06); } .y-btn:focus-visible { outline: 2px solid var(--y-accent); outline-offset: 2px; } .y-btn:disabled, .y-btn[aria-disabled="true"] { opacity: .5; cursor: default; filter: none; box-shadow: none; } .y-btn-secondary { background: var(--y-surface); color: var(--y-text); border-color: var(--y-border-strong); box-shadow: var(--y-shadow-sm); } .y-btn-secondary:hover { filter: none; background: var(--y-surface-2); } .y-btn-danger { background: var(--y-danger); border-color: color-mix(in srgb, var(--y-danger) 85%, #000); } .y-btn-danger-quiet { background: var(--y-surface); color: var(--y-danger); border-color: color-mix(in srgb, var(--y-danger) 35%, var(--y-border-strong)); box-shadow: var(--y-shadow-sm); } .y-btn-danger-quiet:hover { filter: none; background: var(--y-danger-soft); } .y-btn-ghost { background: transparent; color: var(--y-text-muted); border-color: transparent; box-shadow: none; } .y-btn-ghost:hover { filter: none; background: var(--y-surface-2); color: var(--y-text); } .y-btn-sm { min-height: 32px; padding: .3rem .7rem; font-size: .82rem; } .y-btn-lg { min-height: 44px; padding: .6rem 1.1rem; font-size: .95rem; } .y-input { min-height: 38px; padding: .5rem .75rem; border: 1px solid var(--y-border-strong); border-radius: var(--y-radius-sm); background: var(--y-surface); color: var(--y-text); font: .9rem var(--y-font); line-height: 1.3; box-shadow: inset 0 1px 2px rgba(15, 18, 24, .04); } .y-input::placeholder { color: var(--y-text-faint); } .y-input:focus { outline: none; border-color: var(--y-accent); box-shadow: 0 0 0 3px var(--y-accent-ring); } .y-input-lg { min-height: 44px; font-size: .95rem; } .y-card { background: var(--y-surface); border: 1px solid var(--y-border); border-radius: var(--y-radius); box-shadow: var(--y-shadow); padding: 1.5rem; } .y-pill { display: inline-flex; align-items: center; gap: .4rem; min-height: 22px; padding: 0 .5rem; border-radius: var(--y-radius-xs); font: 600 .75rem var(--y-font); line-height: 1; white-space: nowrap; background: var(--y-muted-soft); color: var(--y-text-muted); } .y-pill-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .y-pill-accent { background: var(--y-accent-soft); color: var(--y-accent-strong); } .y-pill-ok { background: var(--y-success-soft); color: var(--y-success); } .y-pill-warn { background: var(--y-warn-soft); color: var(--y-warn); } .y-pill-danger { background: var(--y-danger-soft); color: var(--y-danger); } .y-tabs { display: inline-flex; background: var(--y-surface-2); border: 1px solid var(--y-border); border-radius: 10px; padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; } .y-tabs > a, .y-tabs > button { padding: .45rem .9rem; border-radius: 7px; border: 0; background: transparent; font: 600 .85rem var(--y-font); color: var(--y-text-muted); text-decoration: none; white-space: nowrap; cursor: pointer; } .y-tabs > a:hover, .y-tabs > button:hover { color: var(--y-text); } .y-tabs > .active { background: var(--y-surface); color: var(--y-text); box-shadow: var(--y-shadow-sm); } .y-icon-well { width: 36px; height: 36px; border-radius: 10px; background: var(--y-accent-soft); color: var(--y-accent-strong); display: grid; place-items: center; flex: none; } .y-icon-well-neutral { background: var(--y-surface-2); color: var(--y-text-muted); } .y-icon-well-danger { background: var(--y-danger-soft); color: var(--y-danger); } .y-eyebrow { font: 600 .75rem var(--y-font); letter-spacing: .04em; text-transform: uppercase; color: var(--y-text-faint); } .y-mono { font-family: var(--y-font-mono); font-size: .82rem; } .y-chip { display: inline-flex; padding: 2px 7px; border-radius: 5px; background: var(--y-surface-2); border: 1px solid var(--y-border); font: .78rem var(--y-font-mono); color: var(--y-text); }