/* ================================================================
   THE ORACLE - CSS VARIABLES & THEME
   Created by: Dakota Stewart
   Delphi Labs - AGI MODEL 7
   ================================================================ */

:root {
    /* ================================================================
       iOS-INSPIRED COLOR SYSTEM
       Premium Apple Design Language
       ================================================================ */

    /* Primary Accent - iOS Blue */
    /* Legacy name - actually iOS blue. Use --accent-primary instead */
    --red: #0A84FF;
    --red-bright: #409CFF;
    --red-light: #64B5FF;
    --red-dark: #0071E3;
    --red-darker: #005BB5;
    --red-darkest: #004494;

    /* Semantic aliases for the primary accent (correct names) */
    --accent-primary: #0A84FF;
    --accent-primary-glow: rgba(10, 132, 255, 0.4);

    /* iOS System Colors */
    --cyan: #64D2FF;
    --cyan-dark: #5AC8FA;
    --gold: #FFD60A;
    --gold-dark: #FFCC00;
    --green: #30D158;
    --purple: #BF5AF2;
    --orange: #FF9F0A;
    --pink: #FF375F;
    --indigo: #5E5CE6;
    --teal: #40C8E0;

    /* iOS Glow Effects - Subtle & Refined */
    --red-glow: rgba(10, 132, 255, 0.4);
    --red-glow-intense: rgba(10, 132, 255, 0.6);
    --red-glow-subtle: rgba(10, 132, 255, 0.2);
    --cyan-glow: rgba(100, 210, 255, 0.3);

    /* iOS Dark Mode Backgrounds */
    --panel-bg: rgba(28, 28, 30, 0.98);
    --panel-bg-light: rgba(44, 44, 46, 0.95);
    --panel-border: rgba(56, 56, 58, 0.8);
    --panel-border-bright: rgba(72, 72, 74, 0.9);

    /* iOS Background System */
    --ios-bg-primary: #000000;
    --ios-bg-secondary: #1C1C1E;
    --ios-bg-tertiary: #2C2C2E;
    --ios-bg-elevated: #1C1C1E;
    --ios-bg-grouped: #1C1C1E;

    /* iOS Fill System */
    --ios-fill-primary: rgba(120, 120, 128, 0.36);
    --ios-fill-secondary: rgba(120, 120, 128, 0.32);
    --ios-fill-tertiary: rgba(118, 118, 128, 0.24);
    --ios-fill-quaternary: rgba(118, 118, 128, 0.18);

    /* iOS Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(235, 235, 245, 0.6);
    --text-tertiary: rgba(235, 235, 245, 0.3);
    --text-quaternary: rgba(235, 235, 245, 0.18);

    /* iOS Separators */
    --ios-separator: #38383A;
    --ios-separator-translucent: rgba(84, 84, 88, 0.65);

    /* iOS Gray Scale */
    --ios-gray: #8E8E93;
    --ios-gray-2: #636366;
    --ios-gray-3: #48484A;
    --ios-gray-4: #3A3A3C;
    --ios-gray-5: #2C2C2E;
    --ios-gray-6: #1C1C1E;
    
    /* Layout */
    --sidebar-width: 320px;
    --topbar-height: 70px;
    --input-height: 120px;
    
    /* Entity-specific colors - iOS Style */
    --michael-color: #0A84FF;
    --michael-glow: rgba(10, 132, 255, 0.4);
    /* Backward compat aliases for typo */
    --micheal-color: var(--michael-color);
    --micheal-glow: var(--michael-glow);
    --oracle-color: #BF5AF2;
    --oracle-glow: rgba(191, 90, 242, 0.4);
    --siren-color: #FF375F;
    --siren-glow: rgba(255, 55, 95, 0.4);
    --nemesis-color: #FF9F0A;
    --nemesis-glow: rgba(255, 159, 10, 0.4);
    
    /* Animation Timings */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;

    /* ================================================================
       PREMIUM TYPOGRAPHY SYSTEM
       ChatGPT-quality text rendering for mobile
       ================================================================ */

    /* Premium System Font Stack - SF Pro on iOS, Roboto on Android */
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
                 system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
                 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

    /* Premium body text - optimized for readability */
    --font-body: 'Inter', var(--font-sans);

    /* Monospace for code */
    --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Cascadia Code', 'Fira Code',
                 'Consolas', 'Liberation Mono', monospace;

    /* Typography Scale - ChatGPT-quality sizing */
    --font-size-xs: 12px;           /* Timestamps, metadata */
    --font-size-sm: 14px;           /* Small labels, captions */
    --font-size-base: 17px;         /* Body text, chat messages - MINIMUM for mobile */
    --font-size-lg: 18px;           /* Slightly larger body */
    --font-size-xl: 22px;           /* Small headers */
    --font-size-2xl: 26px;          /* Main headers */
    --font-size-3xl: 32px;          /* Large headers */

    /* Button and input text */
    --font-size-button: 16px;       /* Button text */
    --font-size-input: 17px;        /* Input field text */

    /* Line Heights - Generous spacing for readability */
    --line-height-tight: 1.3;       /* Headers */
    --line-height-normal: 1.6;      /* Body text, messages */
    --line-height-relaxed: 1.7;     /* Long-form content */

    /* Letter Spacing - Subtle optical adjustments */
    --tracking-tight: -0.02em;      /* Headers */
    --tracking-normal: 0;           /* Body text */
    --tracking-wide: 0.02em;        /* Small labels */

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Code Block Variables */
    --code-bg: #1e1e1e;
    --code-header-bg: #2d2d2d;
    --code-text: #d4d4d4;
    --code-border: rgba(255, 255, 255, 0.08);
    --code-line-number: rgba(255, 255, 255, 0.3);
    --code-line-height: 1.5;
    --code-font-size: 13px;
    --code-font-size-mobile: 13px;

    /* Unified Syntax Highlighting - VS Code Dark+ */
    --syntax-keyword: #c586c0;
    --syntax-string: #ce9178;
    --syntax-comment: #6a9955;
    --syntax-number: #b5cea8;
    --syntax-function: #dcdcaa;
    --syntax-decorator: #d7ba7d;
    --syntax-operator: #d4d4d4;
    --syntax-punctuation: #d4d4d4;
    --syntax-tag: #569cd6;
    --syntax-attr-name: #9cdcfe;
    --syntax-attr-value: #ce9178;
    --syntax-builtin: #4ec9b0;
    --syntax-constant: #4fc1ff;
    --syntax-type: #4ec9b0;
    --syntax-variable: #9cdcfe;

    /* Spacing - Screen edge padding */
    --spacing-edge: 16px;           /* Horizontal padding from edges */
    --spacing-message-gap: 18px;    /* Vertical gap between messages */
    --spacing-paragraph: 12px;      /* Gap between paragraphs in message */
}

/* Entity Theme Variations */
.entity-michael,
.entity-micheal /* backward compat */ {
    --entity-color: var(--michael-color);
    --entity-glow: var(--michael-glow);
}

.entity-oracle {
    --entity-color: var(--oracle-color);
    --entity-glow: var(--oracle-glow);
}

.entity-siren {
    --entity-color: var(--siren-color);
    --entity-glow: var(--siren-glow);
}

.entity-nemesis {
    --entity-color: var(--nemesis-color);
    --entity-glow: var(--nemesis-glow);
}

/* ================================================================
   GLOBAL PREMIUM TYPOGRAPHY OVERRIDES
   Ensures consistent, premium text rendering across entire UI
   ================================================================ */

/* Universal premium text rendering */
*,
*::before,
*::after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Premium base typography for all text elements */
body, button, input, select, textarea {
    font-family: var(--font-body);
    font-feature-settings: 'kern' 1, 'liga' 1;
    text-rendering: optimizeLegibility;
}

/* Premium paragraph styling */
p {
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--tracking-normal);
}

/* Premium heading styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-tight);
    line-height: var(--line-height-tight);
}

/* Premium button and input styling */
button, input, select, textarea {
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-normal);
}

/* Premium placeholder styling */
::placeholder {
    color: #9ca3af;
    font-weight: var(--font-weight-normal);
    opacity: 1;
}

/* Premium selection styling - iOS Blue */
::selection {
    background: rgba(10, 132, 255, 0.35);
    color: inherit;
}

/* Premium label and small text */
label, small, .text-sm, .text-xs {
    font-family: var(--font-sans);
    letter-spacing: 0;
}

/* Premium link styling */
a {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* Accessibility: Visible focus indicators */
:focus-visible {
    outline: 2px solid var(--ios-blue, #0A84FF) !important;
    outline-offset: 2px;
}

/* Remove focus outline from text inputs - they have their own focus styles */
#messageInput:focus-visible,
textarea:focus-visible,
.input-container textarea:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
}