/* === TOKENS.CSS === */
/* Defines design logic and variables for both modes */

:root {
    /* === SHARED BASICS === */
    --font-primary: 'Oxanium', sans-serif;
    --font-hud: 'Orbitron', 'Montserrat', 'Arial', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --cut-corner: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    --cut-corner-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);

    /* === THEME: TERMINAL (DEFAULT) === */
    --bg-primary: #0B0B12;
    --bg-secondary: #0f1218;
    --bg-card: #1a1f2e;
    --bg-overlay: rgba(11, 11, 18, 0.95);

    --text-primary: #e9ecff;
    --text-secondary: #b7c0ff;
    --text-muted: #8b93b7;

    --accent-primary: #00fff0;
    /* Cyan */
    --accent-secondary: #8c61ff;
    /* Purple */
    --accent-gold: #ffd534;
    --accent-danger: #ff4757;
    --accent-glow: rgba(0, 255, 240, 0.3);

    --border-subtle: #202437;
    --border-bright: #2a3342;

    --shadow-base: 0 4px 16px rgba(0, 0, 0, 0.4);

    /* Texture */
    --grid-color: rgba(140, 97, 255, 0.1);
    --grid-bg: url('../images/manga_circuitry_bg.png');
    /* Fallback / Existing */
}

/* === THEME: DOSSIER (LIGHT/CERAMIC) === */
:root[data-theme="dossier"] {
    /* ...keep existing bg/text... */
    --bg-primary: #f2f3f7;
    --bg-secondary: #eef0f5;
    --bg-card: #ffffff;
    --bg-overlay: rgba(242, 243, 247, 0.95);

    --text-primary: #1a1f2e;
    --text-secondary: #5a6b8c;
    --text-muted: #8b93b7;

    --accent-primary: #00b8ad;
    /* teal: address/system highlights */
    --accent-secondary: #6c5ce7;
    /* purple: frames/buttons */
    --accent-glow: rgba(108, 92, 231, 0.15);

    --border-subtle: #dbe0ea;
    --border-bright: #cfd6e4;

    --shadow-base: 0 4px 20px rgba(108, 92, 231, 0.08);

    /* Texture Overrides */
    --grid-color: rgba(0, 0, 0, 0.03);
    --grid-bg: none;
}

/* Common Utilities */
.text-mono {
    font-family: var(--font-mono);
}

.text-hud {
    font-family: var(--font-hud);
}

.text-accent {
    color: var(--accent-primary);
}

.text-gold {
    color: var(--accent-gold);
}

.mp-cut {
    clip-path: var(--cut-corner);
}