/* ==========================================================
   Kosh Themes  (design system shared with Beezy Sales)
   ----------------------------------------------------------
   Templates are written with Tailwind's `slate` (surfaces,
   body text) and `emerald` (accent) palettes. base.html maps
   both palettes onto the CSS variables below, so switching
   `data-theme` on <html> re-colors every page without
   touching the templates.

     dark      "B&W"      near-black, white text, white accent
     light     "Light"    white, near-black text, black accent
     terminal  "Terminal" deep green-black, phosphor-green text

   Values are space-separated RGB channels so Tailwind's
   opacity modifiers (bg-slate-900/40 …) keep working.
   ========================================================== */

:root,
[data-theme="dark"] {
    --slate-50: 250 250 250;
    --slate-100: 244 244 245;
    --slate-200: 228 228 231;
    --slate-300: 212 212 216;
    --slate-400: 161 161 170;
    --slate-500: 134 134 144;
    --slate-600: 82 82 91;
    --slate-700: 63 63 70;
    --slate-800: 39 39 48;
    --slate-900: 18 18 22;
    --slate-950: 10 10 12;

    --emerald-50: 255 255 255;
    --emerald-100: 250 250 250;
    --emerald-200: 244 244 245;
    --emerald-300: 228 228 231;
    --emerald-400: 244 244 245;
    --emerald-500: 212 212 216;
    --emerald-600: 255 255 255;
    --emerald-700: 212 212 216;
    --emerald-800: 82 82 91;
    --emerald-900: 63 63 70;
    --emerald-950: 26 26 32;

    --canvas: 10 10 12;
    --surface: 18 18 22;
    --surface-hover: 26 26 32;
    --border: 39 39 48;
    --text: 244 244 245;
    --muted: 161 161 170;
    --accent: 255 255 255;
    --ink: 10 10 12;            /* text drawn on top of the accent */
    --banner: 18 18 22;

    /* Bottom app menu is the opposite color of the theme so it always stands out */
    --nav-bg: 255 255 255;
    --nav-text: 10 10 12;
    --nav-muted: 82 82 91;
    --nav-active-bg: 10 10 12;
    --nav-active-text: 255 255 255;

    --glow: none;
    color-scheme: dark;
}

[data-theme="light"] {
    --slate-50: 255 255 255;
    --slate-100: 244 244 245;
    --slate-200: 228 228 231;
    --slate-300: 212 212 216;
    --slate-400: 113 113 122;
    --slate-500: 82 82 91;
    --slate-600: 63 63 70;
    --slate-700: 50 50 56;
    --slate-800: 39 39 42;
    --slate-900: 24 24 27;
    --slate-950: 10 10 12;

    --emerald-50: 244 244 245;
    --emerald-100: 236 236 239;
    --emerald-200: 212 212 216;
    --emerald-300: 161 161 170;
    --emerald-400: 82 82 91;
    --emerald-500: 39 39 42;
    --emerald-600: 10 10 12;
    --emerald-700: 50 50 56;
    --emerald-800: 24 24 27;
    --emerald-900: 18 18 22;
    --emerald-950: 10 10 12;

    --canvas: 255 255 255;
    --surface: 250 250 250;
    --surface-hover: 241 241 243;
    --border: 228 228 231;
    --text: 10 10 12;
    --muted: 82 82 91;
    --accent: 10 10 12;
    --ink: 255 255 255;
    --banner: 10 10 12;

    --nav-bg: 10 10 12;
    --nav-text: 255 255 255;
    --nav-muted: 161 161 170;
    --nav-active-bg: 255 255 255;
    --nav-active-text: 10 10 12;

    --glow: none;
    color-scheme: light;
}

[data-theme="terminal"] {
    --slate-50: 220 252 226;
    --slate-100: 200 245 208;
    --slate-200: 170 235 182;
    --slate-300: 140 222 155;
    --slate-400: 110 200 128;
    --slate-500: 88 170 104;
    --slate-600: 56 110 68;
    --slate-700: 38 75 47;
    --slate-800: 30 58 38;
    --slate-900: 12 22 15;
    --slate-950: 7 13 9;

    --emerald-50: 220 252 226;
    --emerald-100: 200 250 210;
    --emerald-200: 175 245 190;
    --emerald-300: 150 240 168;
    --emerald-400: 134 239 158;
    --emerald-500: 110 215 135;
    --emerald-600: 134 239 158;
    --emerald-700: 110 215 135;
    --emerald-800: 56 110 68;
    --emerald-900: 45 90 56;
    --emerald-950: 18 36 24;

    --canvas: 7 13 9;
    --surface: 12 22 15;
    --surface-hover: 18 32 22;
    --border: 30 58 38;
    --text: 150 240 168;
    --muted: 110 200 128;
    --accent: 134 239 158;
    --ink: 7 13 9;
    --banner: 12 22 15;

    --nav-bg: 134 239 158;
    --nav-text: 7 13 9;
    --nav-muted: 30 75 42;
    --nav-active-bg: 7 13 9;
    --nav-active-text: 134 239 158;

    --glow: 0 0 2px rgb(134 239 158 / 0.25);
    color-scheme: dark;
}

/* ==========================================================
   Base + type
   Headings, labels, numbers and controls use the mono face;
   running text uses Plex Sans so long passages stay easy to read.
   ========================================================== */
html,
body {
    background-color: rgb(var(--canvas));
    color: rgb(var(--text));
}

body {
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s ease, color 0.2s ease;
}

[data-theme="terminal"] body {
    text-shadow: var(--glow);
}

h1, h2, h3, h4, h5, h6,
button,
label,
th,
nav,
.uppercase,
.font-mono,
.k-label,
.k-mono {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#page h1 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

h2, h3 {
    letter-spacing: 0.02em;
    line-height: 1.3;
}

p, li, dd, td {
    line-height: 1.65;
}

.uppercase {
    letter-spacing: 0.08em;
}

::selection {
    background: rgb(var(--accent));
    color: rgb(var(--ink));
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid rgb(var(--accent)) !important;
    outline-offset: 2px;
}

/* Never let text drop below a legible size. */
.text-\[7px\],
.text-\[8px\],
.text-\[9px\] {
    font-size: 10px !important;
}

.text-\[10px\] {
    font-size: 11px !important;
}

.text-xs {
    line-height: 1.5;
}

/* Links inside running text are underlined. */
p a:not([class*="bg-"]),
li a:not([class*="bg-"]) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================
   Components
   ========================================================== */

/* Card: the basic surface (Beezy's .custom-card) */
.k-card {
    background-color: rgb(var(--surface));
    border: 1px solid rgb(var(--border));
    border-radius: 1rem;
}

/* Accent button */
.k-btn-accent {
    background-color: rgb(var(--accent));
    color: rgb(var(--ink));
}

/* Small uppercase field label: "TODAY (DAILY)" */
.k-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(var(--muted));
}

/* Anything drawn on the solid accent uses the theme's ink color,
   whatever text class the template originally paired with it. */
.bg-emerald-400,
.bg-emerald-500,
.bg-emerald-600,
.bg-emerald-400 *,
.bg-emerald-500 *,
.bg-emerald-600 * {
    color: rgb(var(--ink)) !important;
    text-shadow: none !important;
}

/* Gradient headings (bg-clip-text) become plain, solid text. */
.bg-clip-text.text-transparent {
    background-image: none !important;
    color: rgb(var(--text)) !important;
    -webkit-text-fill-color: currentColor;
}

/* Hero / banner blocks: a solid panel (inverted in the light theme) */
.k-banner {
    background: rgb(var(--banner)) !important;
    border: 1px solid rgb(var(--border));
    border-radius: 1rem;
}

[data-theme="terminal"] .k-banner .text-white {
    color: rgb(var(--text)) !important;
}

/* Dot-matrix fill for banner strips (e.g. the profile cover). */
.k-banner-dots {
    background-image: radial-gradient(rgb(var(--banner-dot, var(--muted)) / 0.35) 1px, transparent 1px) !important;
    background-size: 12px 12px !important;
    border-radius: 0;
    border-width: 0 0 1px;
}

[data-theme="light"] .k-banner-dots {
    --banner-dot: 255 255 255;
}

/* Faint text: see-through tints fall below 4.5:1 on the dark
   themes, so they get the solid "muted" color instead. */
.dark .dark\:text-emerald-400\/50,
.dark .dark\:text-emerald-400\/60,
.dark .dark\:text-emerald-500\/50,
.dark .dark\:text-emerald-500\/60,
.dark .dark\:text-emerald-900\/60 {
    color: rgb(var(--muted)) !important;
}

/* Form controls */
::placeholder,
.placeholder-slate-400::placeholder,
.dark .dark\:placeholder-emerald-500\/40::placeholder {
    color: rgb(var(--muted) / 0.8) !important;
    opacity: 1;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
    border-color: rgb(var(--border)) !important;
    caret-color: rgb(var(--accent));
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    border-color: rgb(var(--accent)) !important;
}

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

/* Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--border));
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--muted));
}

html {
    scrollbar-color: rgb(var(--border)) transparent;
}

/* ==========================================================
   CRT overlay (terminal theme only, kept faint)
   ========================================================== */
.crt-overlay {
    display: none;
}

[data-theme="terminal"] .crt-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgb(0 0 0 / 0.08) 4px);
}

/* ==========================================================
   Chrome: header, app sub-navigation, bottom app menu
   ========================================================== */
.k-header {
    background-color: rgb(var(--surface));
    border-bottom: 1px solid rgb(var(--border));
}

.k-brand {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: rgb(var(--text));
}

.k-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    color: rgb(var(--muted));
    background: rgb(var(--canvas));
    border: 1px solid rgb(var(--border));
    overflow: hidden;
    transition: color 0.15s, border-color 0.15s;
}

.k-icon-btn:hover {
    color: rgb(var(--text));
    border-color: rgb(var(--muted));
}

/* Sub-navigation: pages inside the current app */
.sub-nav {
    background-color: rgb(var(--canvas));
    border-bottom: 1px solid rgb(var(--border));
}

.sub-nav-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.sub-nav-tabs::-webkit-scrollbar {
    display: none;
}

.sub-nav-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(var(--muted));
    transition: color 0.15s, background-color 0.15s;
}

.sub-nav-item:hover {
    color: rgb(var(--text));
    background-color: rgb(var(--surface-hover));
}

.sub-nav-item[aria-current="page"] {
    background-color: rgb(var(--accent));
    color: rgb(var(--ink));
    text-shadow: none;
}

/* Bottom app menu: floating, colored opposite to the theme */
.app-nav {
    background-color: rgb(var(--nav-bg));
    color: rgb(var(--nav-muted));
    text-shadow: none;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}

.app-nav-item {
    border-radius: 0.75rem;
    transition: color 0.15s, background-color 0.15s;
}

.app-nav-item:hover {
    color: rgb(var(--nav-text));
}

.app-nav-item[aria-current="page"] {
    background-color: rgb(var(--nav-active-bg));
    color: rgb(var(--nav-active-text));
}

.app-nav-badge {
    box-shadow: 0 0 0 2px rgb(var(--nav-bg));
}

/* ==========================================================
   Theme switcher (segmented control)
   ========================================================== */
.theme-switcher {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem;
    background: rgb(var(--canvas));
    border: 1px solid rgb(var(--border));
    border-radius: 0.5rem;
}

.theme-switcher button {
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(var(--muted));
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.theme-switcher button:hover {
    color: rgb(var(--text));
}

[data-theme="dark"] .theme-switcher [data-theme-option="dark"],
[data-theme="light"] .theme-switcher [data-theme-option="light"],
[data-theme="terminal"] .theme-switcher [data-theme-option="terminal"] {
    background: rgb(var(--accent));
    color: rgb(var(--ink));
    text-shadow: none;
}