/*
 * Design tokens. Every colour in the UI comes from these variables (as "R G B" triplets so
 * Tailwind opacity modifiers like bg-danger/10 work). Dark mode swaps the values on <html class="dark">.
 */
:root {
    color-scheme: light;

    --canvas: 250 250 250;       /* app background */
    --surface: 255 255 255;      /* cards, inputs, menus */
    --surface-2: 244 244 245;    /* hover, table header, subtle fills */
    --surface-3: 228 228 231;    /* pressed / stronger fills */
    --line: 228 228 231;         /* default borders */
    --line-strong: 212 212 216;  /* input borders */

    --fg: 24 24 27;              /* primary text */
    --fg-muted: 82 82 91;        /* secondary text */
    --fg-subtle: 113 113 122;    /* labels, meta */
    --fg-faint: 161 161 170;     /* placeholders, disabled */

    --primary: 24 24 27;         /* primary buttons */
    --primary-fg: 250 250 250;
    --accent: 37 99 235;         /* links, focus rings, selection */

    --danger: 220 38 38;         /* expired */
    --warning: 194 65 12;        /* expiring 0–7 days */
    --caution: 161 98 7;         /* expiring 8–30 days */
    --success: 21 128 61;        /* active */
}

.dark {
    color-scheme: dark;

    --canvas: 10 10 12;
    --surface: 20 20 23;
    --surface-2: 29 29 33;
    --surface-3: 40 40 45;
    --line: 38 38 43;
    --line-strong: 58 58 65;

    --fg: 244 244 245;
    --fg-muted: 195 195 203;
    --fg-subtle: 150 150 160;
    --fg-faint: 105 105 115;

    --primary: 244 244 245;
    --primary-fg: 20 20 23;
    --accent: 96 165 250;

    --danger: 248 113 113;
    --warning: 251 146 60;
    --caution: 250 204 21;
    --success: 74 222 128;
}

[x-cloak] { display: none !important; }

/* The page background also on <html>: phones show it above and below the page (Safari's bars, overscroll),
   which was white in dark mode while only <body> had it. */
html {
    background-color: rgb(var(--canvas));
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body { font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01"; }

::selection { background: rgb(var(--accent) / 0.2); }

:focus-visible { outline: 2px solid rgb(var(--accent) / 0.7); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

input[type="radio"], input[type="checkbox"] { accent-color: rgb(var(--accent)); }

/* Native date/calendar pickers follow the theme via color-scheme; keep the icon subtle. */
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* iOS: avoid zoom-on-focus by keeping form controls at 16px on phones. */
@media (max-width: 640px) {
    input, select, textarea { font-size: 16px !important; }
}

/* Horizontally scrollable rows (tabs) without a visible scrollbar. */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Theme switch: avoid transition flashes while the class flips. */
.theme-switching, .theme-switching * { transition: none !important; }