/* ============================================================================
   FLAG OS V2.0 // ENTERPRISE CYBEROS // DESIGN TOKENS
   Status: Stable | Context: Global
   ============================================================================ */

:root {
    /* --------------------------------------------------------------------------
     1. TYPOGRAPHY (The Only Truth)
     -------------------------------------------------------------------------- */
    --font-title: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Scale (Mobile / Desktop responsive via CSS locks if needed, but keeping simple first) */
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-micro: 12px;

    /* Compatibility Layer (Legacy Support - Fonts) */
    --font-primary: var(--font-title);
    --font-secondary: var(--font-body);
    --font-display: var(--font-title);
    --font-ui: var(--font-body);
    --font-mono: 'JetBrains Mono', monospace;

    /* Compatibility Layer (Legacy Support - Colors) */
    --color-primary: var(--color-accent);
    --color-primary-rgb: 255, 69, 0;
    /* Fallback approximation */
    --color-secondary: var(--color-glow);
    --color-secondary-rgb: 255, 200, 0;
    /* Fallback approximation */

    --bg-primary: var(--bg-deep);
    --bg-secondary: var(--bg-layer);
    --bg-tertiary: rgba(255, 255, 255, 0.05);

    --text-primary: #F0F0F0;
    --text-secondary: #A0A0A0;

    --border-color: var(--border-color-soft);
    --border-hover: var(--border-color-glow);

    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 8px;

    --shadow-md: var(--shadow-cyber);
    --transition-base: 0.3s ease;

    /* Gradient Fallbacks */
    --gradient-primary: linear-gradient(135deg, var(--color-accent), var(--color-glow));

    /* --------------------------------------------------------------------------
     2. COLORS & CONTEXT (The Hue System)
     -------------------------------------------------------------------------- */
    /* Default Accent Hue (Fire Orange) - Overridden by helpers like .agent-mikael */
    --accent-h: 18;
    --accent-s: 100%;
    --accent-l: 60%;

    /* Generated Colors */
    --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --color-glow: hsl(var(--accent-h), var(--accent-s), 50%);
    --color-dim: hsl(var(--accent-h), 20%, 20%);

    /* Backgrounds */
    --bg-deep: #050505;
    --bg-layer: #0B0B0B;
    --bg-panel: rgba(255, 255, 255, 0.03);

    /* Text */
    --text-primary: #F0F0F0;
    --text-secondary: #A0A0A0;
    --text-tertiary: #606060;

    /* --------------------------------------------------------------------------
     3. BORDERS & GLASS (The Structure)
     -------------------------------------------------------------------------- */
    --border-width: 1px;
    --border-color-soft: rgba(255, 255, 255, 0.1);
    --border-color-glow: rgba(var(--color-accent), 0.5);

    --radius-sm: 8px;
    --radius-md: 16px;
    /* Soft Tech */
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* --------------------------------------------------------------------------
     4. SHADOWS & GLOWS (The Atmosphere)
     -------------------------------------------------------------------------- */
    /* Deep depth + Inner light */
    --shadow-cyber:
        0 20px 50px -10px rgba(0, 0, 0, 0.8),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    --shadow-glow:
        0 0 20px rgba(var(--color-accent), 0.15),
        inset 0 0 20px rgba(var(--color-accent), 0.05);

    /* Sombra difusa suave (estilo Photoshop) */
    --shadow-soft:
        0 4px 24px -4px rgba(0, 0, 0, 0.25),
        0 2px 12px -2px rgba(0, 0, 0, 0.15),
        0 1px 6px rgba(0, 0, 0, 0.1);

    /* --------------------------------------------------------------------------
     5. TRANSITIONS
     -------------------------------------------------------------------------- */
    --ease-cinematic: cubic-bezier(0.25, 0.1, 0.25, 1.0);
    --duration-fast: 150ms;
    --duration-normal: 300ms;

    /* --------------------------------------------------------------------------
     6. LAYOUT DIMENSIONS
     -------------------------------------------------------------------------- */
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 72px;
    --topbar-h: 64px;

    /* --------------------------------------------------------------------------
     7. Z-INDEX LAYERS
     -------------------------------------------------------------------------- */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* --------------------------------------------------------------------------
     8. RGB VALUES (for rgba() usage)
     -------------------------------------------------------------------------- */
    --bg-primary-rgb: 5, 5, 5;
    --bg-secondary-rgb: 11, 11, 11;
    --bg-tertiary-rgb: 20, 20, 20;
    --border-color-rgb: 48, 48, 48;
    --text-primary-rgb: 240, 240, 240;

    /* --------------------------------------------------------------------------
     9. EFFECTS & GLOWS
     -------------------------------------------------------------------------- */
    --glow-soft: 0 0 20px rgba(255, 200, 0, 0.1);
    --glow-strong: 0 0 40px rgba(255, 200, 0, 0.2);
    --shadow-hud-card: 0 8px 32px rgba(0, 0, 0, 0.4);
    --hud-stroke-1: 1px;
    --gradient-secondary: linear-gradient(135deg, #ffc800, #ff4500);
}

/* ============================================================================
   GLOBAL RESET FORCE (The Exterminator)
   ============================================================================ */
body {
    background-color: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

    /* Tactical Grid Background */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
    font-weight: 700;
    margin-bottom: 0.5em;
    letter-spacing: -0.02em;
}

/* ============================================================================
   UTILITY CLASSES (The Tools)
   ============================================================================ */

/* Agent Contexts */
.agent-vox {
    --accent-h: 25;
}

/* Orange */
.agent-cronos {
    --accent-h: 45;
}

/* Amber */
.agent-mikael {
    --accent-h: 150;
}

/* Tech Green */
.agent-dante {
    --accent-h: 210;
}

/* Deep Blue */
.agent-zeus {
    --accent-h: 270;
}

/* Electric Purple */

/* Text Colors */
.text-accent {
    color: var(--color-accent) !important;
}

.text-dim {
    color: var(--text-secondary) !important;
}

/* Cyber Card */
.card-cyber {
    background: var(--bg-panel);
    border: var(--border-width) solid var(--border-color-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-cyber);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all var(--duration-normal) var(--ease-cinematic);
    position: relative;
    overflow: hidden;
}

.card-cyber:hover {
    border-color: var(--border-color-soft);
    box-shadow:
        0 20px 50px -10px rgba(0, 0, 0, 0.9),
        inset 0 0 20px rgba(var(--color-accent), 0.1);
    transform: translateY(-2px);
}

/* Cyber Button */
.btn-cyber {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid var(--border-color-soft);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    padding: 0 24px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-cinematic);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.btn-cyber:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow:
        0 0 15px rgba(var(--color-accent), 0.2),
        inset 0 0 0 1px rgba(var(--color-accent), 0.1);
}

.btn-cyber.primary {
    background: var(--color-accent);
    /* Fallback */
    background: linear-gradient(135deg, var(--color-accent) 0%, hsl(var(--accent-h), 100%, 45%) 100%);
    color: #000;
    border: none;
    box-shadow: 0 4px 15px rgba(var(--color-accent), 0.4);
}

.btn-cyber.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(var(--color-accent), 0.5);
}

/* ============================================================================
   TEMAS DE COR
   ============================================================================ */

/* TEMA OCEAN (Épico - Azul) */
[data-theme="ocean"] {
    --color-primary: #00B4D8;
    --color-secondary: #90E0EF;
    --color-primary-rgb: 0, 180, 216;
    --color-secondary-rgb: 144, 224, 239;
    --gradient-primary: linear-gradient(135deg, #00B4D8, #90E0EF);
    --gradient-secondary: linear-gradient(135deg, #90E0EF, #00B4D8);
}

/* TEMA NATURE (Raro - Verde) */
[data-theme="nature"] {
    --color-primary: #06D6A0;
    --color-secondary: #B7E4C7;
    --color-primary-rgb: 6, 214, 160;
    --color-secondary-rgb: 183, 228, 199;
    --gradient-primary: linear-gradient(135deg, #06D6A0, #B7E4C7);
    --gradient-secondary: linear-gradient(135deg, #B7E4C7, #06D6A0);
}

/* TEMA PURPLE (Mítico - Roxo) */
[data-theme="purple"] {
    --color-primary: #9333EA;
    --color-secondary: #A855F7;
    --color-primary-rgb: 147, 51, 234;
    --color-secondary-rgb: 168, 85, 247;
    --gradient-primary: linear-gradient(135deg, #9333EA, #A855F7);
    --gradient-secondary: linear-gradient(135deg, #A855F7, #9333EA);
}

/* ============================================================================
   MODO CLARO (Light Mode)
   ============================================================================ */

body[data-mode="light"],
html[data-mode="light"] body {
    --bg-deep: #F5F5F7;
    --bg-layer: #FFFFFF;
    --bg-panel: rgba(0, 0, 0, 0.03);
    --bg-primary: #F5F5F7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: rgba(0, 0, 0, 0.05);

    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-tertiary: #999999;

    --border-color-soft: rgba(0, 0, 0, 0.1);
    --border-color: rgba(0, 0, 0, 0.1);

    --shadow-cyber:
        0 4px 20px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(0, 0, 0, 0.05);

    --shadow-soft:
        0 4px 24px -4px rgba(0, 0, 0, 0.1),
        0 2px 12px -2px rgba(0, 0, 0, 0.06);

    background-color: var(--bg-deep);
    color: var(--text-primary);
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
}

body[data-mode="light"] .main-content,
html[data-mode="light"] .main-content {
    background-color: var(--bg-deep);
}

body[data-mode="light"] .card-cyber,
html[data-mode="light"] .card-cyber {
    background: var(--bg-layer);
    border-color: var(--border-color-soft);
}

body[data-mode="light"] .btn-cyber,
html[data-mode="light"] .btn-cyber {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

body[data-mode="light"] h1,
body[data-mode="light"] h2,
body[data-mode="light"] h3,
body[data-mode="light"] h4,
body[data-mode="light"] h5,
body[data-mode="light"] h6 {
    color: var(--text-primary);
}

/* ============================================================================
   CURSOR CUSTOMIZADO + HOVER EFFECTS
   ============================================================================ */

/* Cursor pointer customizado com SVG */
.btn,
.btn-primary,
.btn-secondary,
.icon-btn,
.menu-link,
.sidebar-toggle,
.tab-btn,
.agent-tile,
.lead-card,
.card-cyber:hover,
[role="button"],
button {
    cursor: pointer;
}

/* Hover scale sutil em elementos interativos */
.icon-btn {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, box-shadow 0.2s ease;
}

.icon-btn:hover {
    transform: scale(1.08);
}

.icon-btn:active {
    transform: scale(0.95);
}

/* Hover glow em botões */
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover {
    box-shadow: 0 4px 20px rgba(var(--color-primary-rgb, 255, 69, 0), 0.25);
}

/* Click effect */
.btn:active,
.btn-primary:active,
.btn-secondary:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* Focus ring acessível */
:focus-visible {
    outline: 2px solid var(--color-primary, #FF4500);
    outline-offset: 2px;
}