/**
 * Operator Master Theme
 * =====================
 * Single source of truth for all Operator styling.
 * All pages should import this file FIRST.
 *
 * To customize: Edit variables in :root section.
 * Changes here propagate to ALL pages automatically.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================
   THEME VARIABLES - Edit these to change theme
   ============================================ */

:root {
    /* === Color Palette === */

    /* Backgrounds (darkest to lightest) */
    --op-bg-base: #000000;           /* Page background */
    --op-bg-surface: #0a0a0a;        /* Cards, panels */
    --op-bg-elevated: #111111;       /* Inputs, code blocks */
    --op-bg-hover: #1a1a1a;          /* Hover states */
    --op-bg-active: #222222;         /* Active/selected states */

    /* Text (brightest to dimmest) */
    --op-text-primary: #ededed;      /* Main text, headings */
    --op-text-secondary: #b0b0b0;    /* Body text, descriptions */
    --op-text-tertiary: #888888;     /* Labels, captions, metadata */
    --op-text-muted: #666666;        /* Timestamps, hints */
    --op-text-disabled: #444444;     /* Disabled text */

    /* Borders */
    --op-border-subtle: #1a1a1a;     /* Very subtle dividers */
    --op-border-default: #222222;    /* Default borders */
    --op-border-medium: #333333;     /* Input borders */
    --op-border-strong: #444444;     /* Emphasized borders */
    --op-border-focus: #ffffff;      /* Focus rings */

    /* Accent Colors */
    --op-accent-primary: #ffffff;    /* Primary buttons, links */
    --op-accent-success: #22c55e;    /* Success, online, active */
    --op-accent-error: #ef4444;      /* Errors, destructive */
    --op-accent-warning: #f59e0b;    /* Warnings, caution */
    --op-accent-info: #3b82f6;       /* Info, links */

    /* Semantic Colors */
    --op-prompt: #22c55e;            /* Terminal prompt */
    --op-logo: #ff3333;              /* OPERATOR logo red */

    /* === Typography === */

    /* Font Families */
    --op-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --op-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;

    /* Font Sizes */
    --op-text-xs: 11px;              /* Badges, tiny labels */
    --op-text-sm: 12px;              /* Small labels, captions */
    --op-text-base: 14px;            /* Body text, inputs, buttons */
    --op-text-md: 16px;              /* Emphasized text */
    --op-text-lg: 18px;              /* Section headers */
    --op-text-xl: 24px;              /* Page titles */
    --op-text-2xl: 32px;             /* Hero text */

    /* Font Weights */
    --op-weight-normal: 400;
    --op-weight-medium: 500;
    --op-weight-semibold: 600;
    --op-weight-bold: 700;

    /* Line Heights */
    --op-leading-tight: 1.25;
    --op-leading-normal: 1.5;
    --op-leading-relaxed: 1.75;

    /* === Spacing === */
    --op-space-1: 4px;
    --op-space-2: 8px;
    --op-space-3: 12px;
    --op-space-4: 16px;
    --op-space-5: 24px;
    --op-space-6: 32px;
    --op-space-8: 48px;

    /* === Border Radius === */
    --op-radius-sm: 4px;
    --op-radius-md: 6px;
    --op-radius-lg: 8px;
    --op-radius-xl: 12px;
    --op-radius-full: 9999px;

    /* === Shadows === */
    --op-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --op-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --op-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);

    /* === Transitions === */
    --op-transition-fast: 0.1s ease;
    --op-transition-normal: 0.15s ease;
    --op-transition-slow: 0.25s ease;

    /* === Z-Index Scale === */
    --op-z-dropdown: 100;
    --op-z-modal: 200;
    --op-z-toast: 300;

    /* ============================================
       LEGACY VARIABLE MAPPINGS
       For backwards compatibility with existing CSS
       ============================================ */

    /* Background mappings */
    --bg-darkest: var(--op-bg-base);
    --bg-dark: var(--op-bg-base);
    --bg-container: var(--op-bg-surface);
    --bg-hover: var(--op-bg-hover);
    --bg-input: var(--op-bg-elevated);
    --bg: var(--op-bg-base);

    /* Text mappings */
    --text-primary: var(--op-text-primary);
    --text-secondary: var(--op-text-secondary);
    --text-tertiary: var(--op-text-tertiary);
    --text-muted: var(--op-text-muted);

    /* Border mappings */
    --border-dark: var(--op-border-default);
    --border-medium: var(--op-border-medium);
    --border-light: var(--op-border-strong);
    --border-focus: var(--op-border-focus);
    --border: var(--op-border-medium);

    /* Accent mappings */
    --accent-primary: var(--op-accent-primary);
    --accent-secondary: var(--op-border-medium);
    --accent-success: var(--op-accent-success);
    --accent-error: var(--op-accent-error);
    --accent-warning: var(--op-accent-warning);
    --accent-info: var(--op-accent-info);
    --primary: var(--op-accent-primary);

    /* Semantic mappings */
    --prompt-color: var(--op-prompt);
    --user-color: var(--op-text-primary);
    --assistant-border: var(--op-border-medium);
    --logo-color: var(--op-logo);

    /* Font size mappings */
    --font-size-tiny: var(--op-text-xs);
    --font-size-small: var(--op-text-sm);
    --font-size-base: var(--op-text-base);
}

/* ============================================
   BASE STYLES
   ============================================ */

* {
    box-sizing: border-box;
}

html {
    font-size: var(--op-text-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--op-font-sans);
    font-size: var(--op-text-base);
    line-height: var(--op-leading-normal);
    color: var(--op-text-primary);
    background: var(--op-bg-base);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--op-font-sans);
    font-weight: var(--op-weight-semibold);
    color: var(--op-text-primary);
    margin: 0;
}

h1 { font-size: var(--op-text-2xl); }
h2 { font-size: var(--op-text-xl); }
h3 { font-size: var(--op-text-lg); }
h4 { font-size: var(--op-text-md); }
h5, h6 { font-size: var(--op-text-base); }

p {
    margin: 0 0 var(--op-space-4);
    color: var(--op-text-secondary);
}

a {
    color: var(--op-accent-info);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Code and preformatted text */
code, pre, kbd, samp {
    font-family: var(--op-font-mono);
}

code {
    font-size: 0.9em;
    padding: 2px 6px;
    background: var(--op-bg-elevated);
    border: 1px solid var(--op-border-default);
    border-radius: var(--op-radius-sm);
    color: var(--op-text-secondary);
}

pre {
    margin: 0;
    padding: var(--op-space-3);
    background: var(--op-bg-elevated);
    border: 1px solid var(--op-border-default);
    border-radius: var(--op-radius-md);
    overflow-x: auto;
}

pre code {
    padding: 0;
    background: none;
    border: none;
    font-size: 13px;
}

/* ============================================
   BUTTONS
   ============================================ */

.op-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--op-space-2);
    padding: 10px 16px;
    font-family: var(--op-font-sans);
    font-size: var(--op-text-base);
    font-weight: var(--op-weight-semibold);
    line-height: 1;
    color: var(--op-bg-base);
    background: var(--op-accent-primary);
    border: none;
    border-radius: var(--op-radius-md);
    cursor: pointer;
    transition: opacity var(--op-transition-normal);
    white-space: nowrap;
}

.op-btn:hover,
.btn:hover {
    opacity: 0.9;
}

.op-btn:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button variants */
.op-btn-sm,
.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.op-btn-lg,
.btn-lg {
    padding: 12px 24px;
}

.op-btn-secondary,
.btn-secondary {
    background: transparent;
    color: var(--op-text-primary);
    border: 1px solid var(--op-border-medium);
}

.op-btn-secondary:hover,
.btn-secondary:hover {
    background: var(--op-bg-hover);
    border-color: var(--op-border-strong);
    opacity: 1;
}

.op-btn-ghost,
.btn-ghost {
    background: transparent;
    color: var(--op-text-secondary);
}

.op-btn-ghost:hover,
.btn-ghost:hover {
    background: var(--op-bg-hover);
    color: var(--op-text-primary);
    opacity: 1;
}

.op-btn-danger,
.btn-danger {
    background: var(--op-accent-error);
    color: white;
}

.op-btn-success,
.btn-success {
    background: var(--op-accent-success);
    color: var(--op-bg-base);
}

/* Icon button */
.op-btn-icon,
.btn-icon {
    padding: var(--op-space-2);
    width: 36px;
    height: 36px;
    background: transparent;
    color: var(--op-text-tertiary);
    border: 1px solid var(--op-border-medium);
    border-radius: var(--op-radius-full);
}

.op-btn-icon:hover,
.btn-icon:hover {
    border-color: var(--op-border-strong);
    color: var(--op-text-primary);
    opacity: 1;
}

/* ============================================
   INPUTS
   ============================================ */

.op-input,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--op-font-sans);
    font-size: var(--op-text-base);
    color: var(--op-text-primary);
    background: var(--op-bg-elevated);
    border: 1px solid var(--op-border-medium);
    border-radius: var(--op-radius-md);
    outline: none;
    transition: border-color var(--op-transition-normal), box-shadow var(--op-transition-normal);
}

.op-input:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--op-border-focus);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.op-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--op-text-muted);
}

/* Small input */
.op-input-sm,
.input-sm {
    padding: 6px 10px;
    font-size: var(--op-text-sm);
}

/* ============================================
   CARDS & PANELS
   ============================================ */

.op-card,
.card {
    background: var(--op-bg-surface);
    border: 1px solid var(--op-border-default);
    border-radius: var(--op-radius-lg);
    padding: var(--op-space-4);
}

.op-card:hover,
.card:hover {
    border-color: var(--op-border-medium);
}

.op-panel {
    background: var(--op-bg-surface);
    border: 1px solid var(--op-border-default);
}

/* ============================================
   BADGES
   ============================================ */

.op-badge,
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--op-text-xs);
    font-weight: var(--op-weight-medium);
    border-radius: var(--op-radius-sm);
    background: var(--op-bg-hover);
    color: var(--op-text-secondary);
}

.op-badge-success,
.badge-success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--op-accent-success);
}

.op-badge-error,
.badge-error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--op-accent-error);
}

.op-badge-warning,
.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--op-accent-warning);
}

/* ============================================
   SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--op-border-medium);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--op-border-strong);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text colors */
.text-primary { color: var(--op-text-primary) !important; }
.text-secondary { color: var(--op-text-secondary) !important; }
.text-tertiary { color: var(--op-text-tertiary) !important; }
.text-muted { color: var(--op-text-muted) !important; }
.text-success { color: var(--op-accent-success) !important; }
.text-error { color: var(--op-accent-error) !important; }
.text-warning { color: var(--op-accent-warning) !important; }

/* Font sizes */
.text-xs { font-size: var(--op-text-xs) !important; }
.text-sm { font-size: var(--op-text-sm) !important; }
.text-base { font-size: var(--op-text-base) !important; }
.text-md { font-size: var(--op-text-md) !important; }
.text-lg { font-size: var(--op-text-lg) !important; }
.text-xl { font-size: var(--op-text-xl) !important; }

/* Font families */
.font-sans { font-family: var(--op-font-sans) !important; }
.font-mono { font-family: var(--op-font-mono) !important; }

/* Font weights */
.font-normal { font-weight: var(--op-weight-normal) !important; }
.font-medium { font-weight: var(--op-weight-medium) !important; }
.font-semibold { font-weight: var(--op-weight-semibold) !important; }
.font-bold { font-weight: var(--op-weight-bold) !important; }

/* Backgrounds */
.bg-base { background: var(--op-bg-base) !important; }
.bg-surface { background: var(--op-bg-surface) !important; }
.bg-elevated { background: var(--op-bg-elevated) !important; }
.bg-hover { background: var(--op-bg-hover) !important; }

/* Spacing */
.p-1 { padding: var(--op-space-1) !important; }
.p-2 { padding: var(--op-space-2) !important; }
.p-3 { padding: var(--op-space-3) !important; }
.p-4 { padding: var(--op-space-4) !important; }
.p-5 { padding: var(--op-space-5) !important; }
.p-6 { padding: var(--op-space-6) !important; }

.m-1 { margin: var(--op-space-1) !important; }
.m-2 { margin: var(--op-space-2) !important; }
.m-3 { margin: var(--op-space-3) !important; }
.m-4 { margin: var(--op-space-4) !important; }
.m-5 { margin: var(--op-space-5) !important; }
.m-6 { margin: var(--op-space-6) !important; }

.gap-1 { gap: var(--op-space-1) !important; }
.gap-2 { gap: var(--op-space-2) !important; }
.gap-3 { gap: var(--op-space-3) !important; }
.gap-4 { gap: var(--op-space-4) !important; }

/* Layout */
.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.flex-1 { flex: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }

/* Border radius */
.rounded-sm { border-radius: var(--op-radius-sm) !important; }
.rounded-md { border-radius: var(--op-radius-md) !important; }
.rounded-lg { border-radius: var(--op-radius-lg) !important; }
.rounded-xl { border-radius: var(--op-radius-xl) !important; }
.rounded-full { border-radius: var(--op-radius-full) !important; }

/* ============================================
   OPERATOR LOGO
   ============================================ */

.logo-text,
.op-logo {
    font-family: var(--op-font-mono) !important;
    font-size: 26px !important;
    font-weight: var(--op-weight-medium) !important;
    letter-spacing: 7px !important;
    color: var(--op-logo) !important;
    text-transform: uppercase;
}

/* Logo glow animation */
@keyframes logo-glow {
    0%, 100% {
        text-shadow:
            0 0 5px var(--op-logo),
            0 0 10px var(--op-logo),
            0 0 20px var(--op-logo);
    }
    50% {
        text-shadow:
            0 0 10px var(--op-logo),
            0 0 20px var(--op-logo),
            0 0 40px var(--op-logo);
    }
}

.logo-text,
.op-logo {
    animation: logo-glow 3s ease-in-out infinite;
}

/* ============================================
   CHAT/MESSAGE STYLES
   ============================================ */

/* Chat messages use sans-serif for readability */
.line,
.line-user,
.line-assistant,
.line-system,
.line-error,
.message,
.message-content {
    font-family: var(--op-font-sans);
    font-size: var(--op-text-base);
    line-height: var(--op-leading-normal);
}

.line-user {
    color: var(--op-text-primary);
}

.line-assistant {
    color: var(--op-text-secondary);
}

.line-system {
    color: var(--op-text-tertiary);
}

.line-error {
    color: var(--op-accent-error);
}

/* Prompt stays monospace */
.line-prompt,
.prompt {
    font-family: var(--op-font-mono);
    color: var(--op-prompt);
}

/* ============================================
   SECTION TITLES
   ============================================ */

.section-title,
.panel-title,
.zone-title {
    font-family: var(--op-font-sans);
    font-size: var(--op-text-xs);
    font-weight: var(--op-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--op-text-tertiary);
}

/* ============================================
   STATUS INDICATORS
   ============================================ */

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--op-radius-full);
    background: var(--op-text-muted);
}

.status-dot.online,
.status-dot.active,
.status-dot.success {
    background: var(--op-accent-success);
    box-shadow: 0 0 6px var(--op-accent-success);
}

.status-dot.error {
    background: var(--op-accent-error);
    box-shadow: 0 0 6px var(--op-accent-error);
}

.status-dot.warning {
    background: var(--op-accent-warning);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-fade-in {
    animation: fadeIn 0.2s ease;
}

.animate-spin {
    animation: spin 1s linear infinite;
}