/**
 * MiraiSignal Theme System
 * CSS custom properties for consistent theming, dark/light mode, typography scale, spacing system.
 * Extends main.css design tokens — import AFTER main.css.
 */

/* ===== Light Theme Override ===== */
[data-theme="light"] {
    --bg-primary: #f5f5f0;
    --bg-secondary: #eaeae5;
    --bg-tertiary: #e0e0db;
    --bg-card: #ffffff;
    --bg-elevated: #f0f0eb;

    --text-primary: #1a1a18;
    --text-secondary: #505048;
    --text-dim: #909088;
    --text-tertiary: #707068;
    --text-disabled: #b0b0a8;

    --border-color: #d0d0c8;
    --border-default: #d0d0c8;
    --border-light: #e0e0d8;
    --border-hover: #a08850;
    --border-focus: #a08850;

    --accent-gold: #a08850;
    --accent-green: #4a7a50;
    --accent-red: #884848;
    --accent-blue: #486888;
    --accent-orange: #886840;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.12);

    /* Grid background override for light mode */
    --grid-line-color: rgba(0, 0, 0, 0.04);
}

/* ===== prefers-color-scheme auto-detection ===== */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg-primary: #f5f5f0;
        --bg-secondary: #eaeae5;
        --bg-tertiary: #e0e0db;
        --bg-card: #ffffff;
        --bg-elevated: #f0f0eb;

        --text-primary: #1a1a18;
        --text-secondary: #505048;
        --text-dim: #909088;
        --text-tertiary: #707068;
        --text-disabled: #b0b0a8;

        --border-color: #d0d0c8;
        --border-default: #d0d0c8;
        --border-light: #e0e0d8;
        --border-hover: #a08850;
        --border-focus: #a08850;

        --accent-gold: #a08850;
        --accent-green: #4a7a50;
        --accent-red: #884848;
        --accent-blue: #486888;
        --accent-orange: #886840;

        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.12);
    }
}

/* ===== Smooth Theme Transitions ===== */
body,
.card,
.btn,
.form-control,
.badge,
.table,
.alert,
.notification,
.toast {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* ===== Typography Scale (Modular — ratio 1.2 minor third) ===== */
:root {
    --type-scale-ratio: 1.2;

    /* Font sizes — modular scale from 0.75rem base */
    --font-xs:    0.65rem;   /* 9.1px  — captions, labels */
    --font-sm:    0.75rem;   /* 10.5px — small text */
    --font-base:  0.85rem;   /* 11.9px — body */
    --font-md:    1.0rem;    /* 14px   — emphasis */
    --font-lg:    1.2rem;    /* 16.8px — section headers */
    --font-xl:    1.44rem;   /* 20.2px — page title */
    --font-2xl:   1.728rem;  /* 24.2px — hero headline */

    /* Line heights */
    --leading-tight:  1.2;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* Letter spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.1em;
}

/* ===== Spacing System (4px base grid) ===== */
:root {
    --space-0:   0;
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
}

/* ===== Utility: Typography ===== */
.type-xs    { font-size: var(--font-xs); }
.type-sm    { font-size: var(--font-sm); }
.type-base  { font-size: var(--font-base); }
.type-md    { font-size: var(--font-md); }
.type-lg    { font-size: var(--font-lg); }
.type-xl    { font-size: var(--font-xl); }
.type-2xl   { font-size: var(--font-2xl); }

.leading-tight  { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-loose  { line-height: var(--leading-loose); }

.tracking-tight  { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide   { letter-spacing: var(--tracking-wide); }
.tracking-wider  { letter-spacing: var(--tracking-wider); }

/* ===== Utility: Spacing ===== */
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ===== Theme Toggle Button ===== */
.theme-toggle-btn {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 2px solid var(--border-color);
    border-radius: 0;
    color: var(--accent-gold);
    font-family: 'IBM Plex Mono', 'Galmuri11', 'DotGothic16', monospace;
    font-size: var(--font-sm);
    cursor: pointer;
    z-index: 9000;
    box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.4);
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.theme-toggle-btn:hover {
    border-color: var(--accent-gold);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.4);
}

.theme-toggle-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4);
}

/* ===== Focus-Visible Accessibility ===== */
:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* ===== Reduced Motion Support ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Print Styles ===== */
@media print {
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    .theme-toggle-btn,
    .toast-container,
    .notification {
        display: none !important;
    }

    .card {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    a {
        color: #000 !important;
        text-decoration: underline !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }
}