/**
 * UI kit tokens (app/includes/kit/AGENTS.md R12-R13).
 *
 * Every value is an RGB triplet so Tailwind's kit-* colors keep alpha
 * support (bg-kit-surface/80). Mode lives on <html data-kit-mode>; the
 * Style Studio theme stays on body[data-hh-theme] or [data-hh-theme-scope]
 * (cosmetics.css owns the --hh-accent-N values). Load AFTER cosmetics.css.
 *
 * A var() inside a custom property resolves where it is declared, so the
 * accent mapping is re-declared on every theme element below; otherwise a
 * theme scope would inherit the root's emerald.
 *
 * Surfaces are flat. Only the page backdrop carries color (see Backdrop
 * below). Themes tint the dark neutrals only; light mode neutrals never
 * change with the theme.
 */

/* Kit shell base: Poppins is self-hosted in poppins.css. */
html[data-kit-mode] body {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Dark (default) */
:root,
[data-kit-mode="dark"] {
    --kit-ground: 10 22 38;
    --kit-surface: 18 33 54;
    --kit-raised: 28 45 68;
    --kit-line: 37 55 80;
    --kit-ink: 240 243 248;
    --kit-ink-2: 200 208 220;
    --kit-muted: 139 150 170;
    --kit-faint: 98 110 130;
    --kit-streak: 251 146 60;
    --kit-chain: 125 211 252;
    --kit-xp: 250 204 21;
    --kit-danger: 248 113 113;
    --kit-on-acc: 255 255 255;
    /* Backdrop glows: the old backdrop's teal and blue */
    --kit-glow-1: 45 212 191;
    --kit-glow-2: 59 130 246;
}

/* Light */
[data-kit-mode="light"] {
    --kit-ground: 246 247 249;
    --kit-surface: 255 255 255;
    --kit-raised: 240 242 245;
    --kit-line: 228 231 236;
    --kit-ink: 16 24 40;
    --kit-ink-2: 52 64 84;
    --kit-muted: 102 112 133;
    --kit-faint: 152 162 179;
    --kit-streak: 234 88 12;
    --kit-chain: 2 132 199;
    --kit-xp: 161 98 7;
    --kit-danger: 220 38 38;
    --kit-on-acc: 255 255 255;
}

/* Accent mapping, per mode, on the mode element and every theme element */
:root,
[data-kit-mode="dark"],
[data-kit-mode="dark"] body[data-hh-theme],
[data-kit-mode="dark"] [data-hh-theme-scope],
[data-kit-mode="dark"][data-hh-theme-scope] {
    --kit-acc: var(--hh-accent-500);
    --kit-acc-ink: var(--hh-accent-300);
    --kit-acc-soft: var(--hh-accent-950);
}

/* A theme's backdrop glows come from its accent */
[data-kit-mode="dark"] body[data-hh-theme] {
    --kit-glow-1: var(--hh-accent-500);
    --kit-glow-2: var(--hh-accent-700);
}

[data-kit-mode="light"],
[data-kit-mode="light"] body[data-hh-theme],
[data-kit-mode="light"] [data-hh-theme-scope],
[data-kit-mode="light"][data-hh-theme-scope] {
    --kit-acc: var(--hh-accent-600);
    --kit-acc-ink: var(--hh-accent-700);
    --kit-acc-soft: var(--hh-accent-50);
}

/* Dark theme tints: ground, surface, raised, line. Derived from each
   theme's Style Studio surface swatch (CosmeticsService::THEMES). */
[data-kit-mode="dark"] body[data-hh-theme="ocean"],
[data-kit-mode="dark"] [data-hh-theme-scope="ocean"],
[data-kit-mode="dark"][data-hh-theme-scope="ocean"] {
    --kit-ground: 7 15 27; --kit-surface: 17 30 49; --kit-raised: 29 41 60; --kit-line: 41 53 70;
}
[data-kit-mode="dark"] body[data-hh-theme="sunset"],
[data-kit-mode="dark"] [data-hh-theme-scope="sunset"],
[data-kit-mode="dark"][data-hh-theme-scope="sunset"] {
    --kit-ground: 18 12 7; --kit-surface: 34 25 17; --kit-raised: 46 36 29; --kit-line: 57 48 41;
}
[data-kit-mode="dark"] body[data-hh-theme="orchid"],
[data-kit-mode="dark"] [data-hh-theme-scope="orchid"],
[data-kit-mode="dark"][data-hh-theme-scope="orchid"] {
    --kit-ground: 14 10 25; --kit-surface: 28 21 45; --kit-raised: 39 33 56; --kit-line: 51 45 67;
}
[data-kit-mode="dark"] body[data-hh-theme="rose"],
[data-kit-mode="dark"] [data-hh-theme-scope="rose"],
[data-kit-mode="dark"][data-hh-theme-scope="rose"] {
    --kit-ground: 18 9 20; --kit-surface: 34 20 37; --kit-raised: 46 32 49; --kit-line: 57 44 60;
}
[data-kit-mode="dark"] body[data-hh-theme="aurora"],
[data-kit-mode="dark"] [data-hh-theme-scope="aurora"],
[data-kit-mode="dark"][data-hh-theme-scope="aurora"] {
    --kit-ground: 6 16 23; --kit-surface: 15 31 42; --kit-raised: 27 42 53; --kit-line: 39 53 64;
}
[data-kit-mode="dark"] body[data-hh-theme="nebula"],
[data-kit-mode="dark"] [data-hh-theme-scope="nebula"],
[data-kit-mode="dark"][data-hh-theme-scope="nebula"] {
    --kit-ground: 18 8 23; --kit-surface: 34 18 42; --kit-raised: 46 30 53; --kit-line: 57 42 64;
}
[data-kit-mode="dark"] body[data-hh-theme="gold"],
[data-kit-mode="dark"] [data-hh-theme-scope="gold"],
[data-kit-mode="dark"][data-hh-theme-scope="gold"] {
    --kit-ground: 19 13 5; --kit-surface: 36 27 13; --kit-raised: 48 38 25; --kit-line: 59 50 38;
}
[data-kit-mode="dark"] body[data-hh-theme="blossom"],
[data-kit-mode="dark"] [data-hh-theme-scope="blossom"],
[data-kit-mode="dark"][data-hh-theme-scope="blossom"] {
    --kit-ground: 25 13 24; --kit-surface: 46 27 44; --kit-raised: 57 38 55; --kit-line: 68 50 66;
}
[data-kit-mode="dark"] body[data-hh-theme="lavender"],
[data-kit-mode="dark"] [data-hh-theme-scope="lavender"],
[data-kit-mode="dark"][data-hh-theme-scope="lavender"] {
    --kit-ground: 21 17 35; --kit-surface: 39 33 62; --kit-raised: 50 44 72; --kit-line: 61 55 82;
}

/* Backdrop. Only kit pages get it: a body marked [data-kit-page] (kit
   shell) or one holding a [data-kit-page] region (Today in the old shell),
   so old pages keep the old backdrop until they migrate (owner 2026-10-11).
   html[data-kit-bg] picks the option while the owner compares them:
   glow (default, a dark take on the old backdrop), classic (the old
   backdrop itself) or flat. Light mode is always flat. The glows sit on a
   fixed layer because iOS ignores background-attachment: fixed. */
html[data-kit-mode]:not([data-kit-bg="classic"]) body[data-kit-page],
html[data-kit-mode]:not([data-kit-bg="classic"]) body:has([data-kit-page]),
html[data-kit-mode="light"] body[data-kit-page],
html[data-kit-mode="light"] body:has([data-kit-page]) {
    background: rgb(var(--kit-ground)) !important;
}
html[data-kit-mode="dark"]:not([data-kit-bg="classic"]):not([data-kit-bg="flat"]) body[data-kit-page]::before,
html[data-kit-mode="dark"]:not([data-kit-bg="classic"]):not([data-kit-bg="flat"]) body:has([data-kit-page])::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 620px at 88% -12%, rgb(var(--kit-glow-1) / 0.42), transparent 62%),
        radial-gradient(820px 620px at -12% 112%, rgb(var(--kit-glow-2) / 0.38), transparent 58%);
}

/* Mode toggle icon: show the icon of the current mode */
[data-kit-mode="light"] .kit-dark-only,
[data-kit-mode="dark"] .kit-light-only {
    display: none;
}

/* Paid checkin look on a kit post (kitPost): the header picture, or else
   the card background, sits in the top-right corner and fades away (owner
   2026-10-15: no band across the row, no background on the whole post).
   The post is `isolate`, so the corner stays behind its text and links. */
.kit-ckcorner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: min(80%, 560px);
    height: min(100%, 132px);
    pointer-events: none;
    -webkit-mask-image: radial-gradient(130% 100% at 100% 0%, #000 30%, transparent 78%);
    mask-image: radial-gradient(130% 100% at 100% 0%, #000 30%, transparent 78%);
}
.kit-ckcorner-img {
    background: var(--hh-ckhd-img) right top / cover no-repeat;
}
/* Paid art is drawn for dark grounds; on light it stays a soft wash */
html[data-kit-mode="light"] .kit-ckcorner {
    opacity: 0.35;
}
/* Phones: in the feed the picture runs to the screen's right edge (the list
   sits 16px in: the page's p-2 plus the list's px-2), so no edge is hard
   (owner 2026-10-15). Desktop keeps it inside the column. */
@media (max-width: 767px) {
    .feed-container .kit-ckcorner {
        right: -1rem;
    }
}
/* Time, menu and name over the corner stay readable on any picture */
.kit-on-corner {
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 0 8px rgb(0 0 0 / 0.7);
}
html[data-kit-mode="light"] .kit-on-corner {
    text-shadow: 0 0 2px rgb(255 255 255 / 0.95), 0 0 8px rgb(255 255 255 / 0.8);
}

/* The Habit Huddle mark as an icon: takes the text color like a Font Awesome glyph */
.kit-logo-mark {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    background-color: currentColor;
    -webkit-mask: url('/app/assets/img/logo-mark.svg') center / contain no-repeat;
    mask: url('/app/assets/img/logo-mark.svg') center / contain no-repeat;
}
/* The mark on a white disc, as heavy as 🎯: a floor day on a filled calendar day */
.kit-logo-badge {
    position: relative;
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    border-radius: 9999px;
    background-color: rgb(var(--kit-on-acc));
}
.kit-logo-badge::before {
    content: '';
    position: absolute;
    inset: 18%;
    background-color: rgb(var(--kit-acc));
    -webkit-mask: url('/app/assets/img/logo-mark-bold.svg') center / contain no-repeat;
    mask: url('/app/assets/img/logo-mark-bold.svg') center / contain no-repeat;
}

/* The floor and ceiling ruler: a range input with tick marks under its track */
.kit-ruler {
    -webkit-appearance: none;
    appearance: none;
    height: 44px;
    background:
        repeating-linear-gradient(90deg, rgb(var(--kit-line)) 0 2px, transparent 2px 14px) center bottom / 100% 14px no-repeat,
        linear-gradient(rgb(var(--kit-line)), rgb(var(--kit-line))) center 14px / 100% 3px no-repeat;
    cursor: pointer;
}
.kit-ruler::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 34px;
    border-radius: 4px;
    background: rgb(var(--kit-acc));
}
.kit-ruler::-moz-range-thumb {
    width: 8px;
    height: 34px;
    border: 0;
    border-radius: 4px;
    background: rgb(var(--kit-acc));
}