/* =============================================================
   KImotools — Theme Tokens
   Hybrid Theme: Light default + Dark via [data-theme="dark"]
   System-preference detection in inline-script, persisted in localStorage.
   ============================================================= */

/* ── Default: Light theme (per CLAUDE.md "Clean Editorial Premium") ── */
:root {
    /* Surfaces */
    --bg: #FAFAF8;
    --surface: rgba(0,0,0,0.025);
    --surface-2: rgba(0,0,0,0.04);

    /* Borders */
    --border: rgba(10,10,10,0.10);
    --border-2: rgba(10,10,10,0.15);
    --border-hover: rgba(10,10,10,0.18);

    /* Text */
    --text: #0A0A0A;
    --text-secondary: rgba(10,10,10,0.62);
    --text-muted: rgba(10,10,10,0.42);
    --text-tertiary: rgba(10,10,10,0.42);

    /* Accent — Deep Forest Green */
    --accent: #2C4A3D;
    --accent-hover: #3D6552;
    --accent-glow: rgba(44,74,61,0.10);
    --accent-subtle: rgba(44,74,61,0.06);
    --accent-on: #FAFAF8;

    /* Shadows */
    --shadow-color: rgba(10,10,10,0.08);
    --shadow-color-strong: rgba(10,10,10,0.15);

    /* Translucent backgrounds (frosted-glass nav, overlays) */
    --bg-translucent: rgba(250,250,248,0.75);
    --bg-translucent-strong: rgba(250,250,248,0.92);
    /* Hero overlay is theme-agnostic — always dark gradient over the video,
       because the video itself is dark and hero text is always rendered light. */
    --hero-overlay: linear-gradient(to bottom, rgba(6,6,14,0.55) 0%, rgba(6,6,14,0.45) 50%, rgba(6,6,14,0.75) 100%);

    /* Easings (theme-agnostic) */
    --ease: cubic-bezier(0.16,1,0.3,1);
    --ease-out: cubic-bezier(0.16,1,0.3,1);
}

/* ── Dark theme (legacy/current site look) ── */
[data-theme="dark"] {
    /* Surfaces */
    --bg: #06060e;
    --surface: rgba(255,255,255,0.04);
    --surface-2: rgba(255,255,255,0.07);

    /* Borders */
    --border: rgba(255,255,255,0.08);
    --border-2: rgba(255,255,255,0.13);
    --border-hover: rgba(255,255,255,0.14);

    /* Text */
    --text: #f0f0f5;
    --text-secondary: rgba(240,240,245,0.55);
    --text-muted: rgba(240,240,245,0.32);
    --text-tertiary: rgba(240,240,245,0.32);

    /* Accent — Purple (legacy dark style) */
    --accent: #7c5cfc;
    --accent-hover: #9b7fff;
    --accent-glow: rgba(124,92,252,0.18);
    --accent-subtle: rgba(124,92,252,0.10);
    --accent-on: #ffffff;

    /* Shadows */
    --shadow-color: rgba(0,0,0,0.4);
    --shadow-color-strong: rgba(0,0,0,0.6);

    /* Translucent backgrounds */
    --bg-translucent: rgba(6,6,14,0.7);
    --bg-translucent-strong: rgba(6,6,14,0.92);
    --hero-overlay: linear-gradient(to bottom, rgba(6,6,14,0.55) 0%, rgba(6,6,14,0.45) 50%, rgba(6,6,14,0.75) 100%);
}

/* Smooth theme transition */
:root,
:root * {
    transition-property: background-color, color, border-color;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}

/* Disable transitions on initial load to avoid flashing */
.theme-no-transition,
.theme-no-transition * {
    transition: none !important;
}

/* ── Theme toggle button ── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease);
    -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border-2);
}

.theme-toggle i {
    font-size: 1.1rem;
    line-height: 1;
}

/* Show only the icon for the *current* theme */
.theme-toggle .icon-light { display: none; }
.theme-toggle .icon-dark { display: inline; }
[data-theme="dark"] .theme-toggle .icon-light { display: inline; }
[data-theme="dark"] .theme-toggle .icon-dark { display: none; }

/* Color-scheme hint helps native UI (scrollbars, form controls) match theme */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }