/* ════════════════════════════════════════════════════════════════════════
   khio-ui.css — the landing page's design language, for the signed-in app.
   2026-09-27: "the beautiful UI you put into the landing page should be
   implemented into the actual website". The landing (landing-day.css) and the
   site bar (site-chrome.css) set their tokens on their own elements; this is
   the same look as app-wide tokens and components, prefixed so nothing an app
   page already defines is touched.

   Type: Crimson Pro for display, Open Runde (Inter behind it) for the rest.
   Colour: warm paper and near-black ink, one blue for links and focus.
   Buttons: the landing's tactile ones, dark by default, .is-light for the
   second action, .is-sm for tight rows. Both flip in dark mode.
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400..600;1,400..600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/open-runde@5.3.0/latin-400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/open-runde@5.3.0/latin-500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/open-runde@5.3.0/latin-600.css');

:root {
    --k-paper: #fbfaf7;
    --k-surface: #ffffff;
    --k-ink: #111114;
    --k-ink-2: rgba(17, 17, 20, .64);
    --k-ink-3: rgba(17, 17, 20, .45);
    --k-line: rgba(17, 17, 20, .09);
    --k-hover: rgba(17, 17, 20, .045);
    --k-blue: #0a84ff;
    --k-good: #248a4a;
    --k-bad: #c23b32;
    --k-display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
    --k-sans: 'Open Runde', 'Inter', system-ui, -apple-system, sans-serif;
    --k-ease: cubic-bezier(.22, 1, .36, 1);
    --k-shadow: 0 .5px 1px rgba(0, 0, 0, .04), 0 2px 6px rgba(0, 0, 0, .05), 0 12px 32px rgba(0, 0, 0, .06);
}
html[data-theme="dark"] {
    --k-paper: #111114;
    --k-surface: #1a1a1e;
    --k-ink: #f5f4f0;
    --k-ink-2: rgba(245, 244, 240, .68);
    --k-ink-3: rgba(245, 244, 240, .44);
    --k-line: rgba(255, 255, 255, .09);
    --k-hover: rgba(255, 255, 255, .06);
    --k-blue: #409cff;
    --k-good: #5fcb84;
    --k-bad: #f0857a;
    --k-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
}

/* ── Buttons: tactile, as on the landing ──────────────────────────────── */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 13px; font: 500 15px/1 var(--k-sans); color: #fff; white-space: nowrap; cursor: pointer; text-decoration: none;
    background: linear-gradient(#3a3a3a 0%, #3a3a3a 52%, #2c2c2c 80%, #1f1f1f 100%);
    box-shadow: 0 .5px 1px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .1), 0 4px 12px rgba(0, 0, 0, .08), inset 0 0 0 1.25px #353535, inset 0 0 12px rgba(255, 255, 255, .1);
    transition: transform .18s var(--k-ease), filter .2s ease, opacity .2s ease; }
.k-btn svg { width: 17px; height: 17px; flex: none; }
.k-btn:hover { filter: brightness(1.14); }
.k-btn:active { transform: translateY(1px) scale(.985); }
.k-btn:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 2px; }
.k-btn:disabled { opacity: .45; cursor: default; filter: none; transform: none; }
.k-btn.is-light { color: #1c1c1c;
    background: linear-gradient(#edecea 0%, #edecea 65%, #dcdcdc 85%, #c4c4c4 100%);
    box-shadow: 0 .5px 1px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .04), inset 0 0 0 1.25px #c9c7c4, inset 0 0 12px #fff; }
.k-btn.is-light:hover { filter: brightness(1.03); }
.k-btn.is-sm { height: 34px; padding: 0 13px; border-radius: 11px; font-size: 14px; }
html[data-theme="dark"] .k-btn { color: #1c1c1c; background: linear-gradient(#f4f3f1 0%, #edecea 65%, #d9d9d9 100%); box-shadow: inset 0 0 0 1.25px #c9c7c4, inset 0 0 12px #fff; }
html[data-theme="dark"] .k-btn.is-light { color: #f5f4f0; background: linear-gradient(#3a3a3a 0%, #3a3a3a 52%, #2c2c2c 80%, #1f1f1f 100%); box-shadow: inset 0 0 0 1.25px #353535; }

/* ── Type ─────────────────────────────────────────────────────────────── */
.k-display { font-family: var(--k-display); font-weight: 500; letter-spacing: -.02em; line-height: 1.02; }

/* ── Motion: the landing's rise-in ────────────────────────────────────── */
@keyframes k-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.k-rise { animation: k-rise .6s var(--k-ease) both; }
@media (prefers-reduced-motion: reduce) { .k-rise { animation: none; } }