/* ===== CSS Variables — Conicorn Dark Theme System ===== */
/* Inspired by the Conicorn Webflow template — dark mode first, holographic accents */

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

:root {
    /* === Colors — Dark First === */
    --color-bg: #1a1a1a;
    --color-bg-secondary: #292929;
    --color-bg-tertiary: #333333;
    --color-surface: #1a1a1a;
    --color-surface-hover: #292929;

    /* Gray Scale */
    --gray-01: #1a1a1a;
    --gray-02: #292929;
    --gray-03: #525252;
    --gray-04: #a6a6a6;
    --gray-05: #b8b8b8;
    --gray-06: #cdcdcd;
    --gray-07: #e6e6e6;
    --gray-08: #f2f2f2;

    /* Holographic Accent Gradient */
    --holo-0: #c9aaff;
    --holo-25: #feffbc;
    --holo-50: #ffcdfd;
    --holo-75: #b3e2ff;
    --holo-100: #839aff;

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #b8b8b8;
    --text-muted: #7d8590;
    --text-heading: #ffffff;
    --text-code: #839aff;

    /* Status */
    --text-success: #56d364;
    --text-warning: #d2a800;
    --text-error: #f85149;
    --bg-success: rgba(86, 211, 100, 0.1);
    --bg-warning: rgba(210, 168, 0, 0.1);
    --bg-error: rgba(248, 81, 73, 0.1);

    /* Borders */
    --border: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.2);
    --border-focus: var(--holo-100);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(131, 154, 255, 0.15);

    /* Gradients */
    --holo-gradient: linear-gradient(135deg, var(--holo-0) 0%, var(--holo-50) 25%, var(--holo-75) 50%, var(--holo-100) 100%);
    --holo-subtle: linear-gradient(135deg, rgba(201, 170, 255, 0.15), rgba(131, 154, 255, 0.15));
    --primary-gradient: linear-gradient(135deg, var(--holo-0) 0%, var(--holo-50) 50%, var(--holo-100) 100%);
    --green-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);

    /* Radius */
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 1.75rem;
    --radius-pill: 1280px;
    --radius-asymmetric: 1.5rem 1.5rem 1rem 1rem;

    /* Spacing */
    --spacing-xs: 1rem;
    --spacing-sm: 3rem;
    --spacing-md: 5rem;
    --spacing-lg: 8rem;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', 'Courier New', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 3rem;
    --font-size-5xl: 4rem;
    --font-size-hero: 5rem;
    --letter-tight: -0.05em;
    --letter-tighter: -0.06em;
    --line-height-tight: 1.1em;
    --line-height-normal: 1.375em;

    /* Component-specific */
    --bg-card: var(--color-bg-secondary);
    --bg-input: var(--color-bg-tertiary);
    --bg-code-block: #0d1117;
    --bg-code-inline: rgba(131, 154, 255, 0.12);
    --bg-thinking: rgba(255, 255, 255, 0.04);
    --bg-output: var(--color-bg);
    --bg-hover: var(--color-bg-tertiary);
    --bg-btn-secondary: rgba(255, 255, 255, 0.08);
    --bg-btn-secondary-hover: rgba(255, 255, 255, 0.12);
    --bg-blockquote: rgba(131, 154, 255, 0.08);
    --bg-nav: rgba(26, 26, 26, 0.85);
    --bg-progress: rgba(255, 255, 255, 0.08);

    --text-code-block: #d4d4d4;
    --text-thinking: #8b949e;
    --text-thinking-toggle: #9ca3af;
    --text-status-idle: #8b949e;
    --text-status-loading: #d2a800;
    --text-status-success: #56d364;
    --text-status-error: #f85149;
    --text-welcome: #7d8590;
    --text-username: var(--holo-100);

    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.16);

    --primary-color: var(--holo-100);
    --red: #f85149;
    --red-hover: #da3633;
}

/* === Light Theme === */
[data-theme='light'] {
    --color-bg: #ffffff;
    --color-bg-secondary: #f8f8f8;
    --color-bg-tertiary: #f2f2f2;
    --color-surface: #ffffff;
    --color-surface-hover: #f2f2f2;

    --text-primary: #1a1a1a;
    --text-secondary: #525252;
    --text-muted: #a6a6a6;
    --text-heading: #1a1a1a;
    --text-code: #6366f1;
    --text-success: #15803d;
    --text-warning: #a16207;
    --text-error: #dc2626;
    --bg-success: rgba(21, 128, 61, 0.08);
    --bg-warning: rgba(161, 98, 7, 0.08);
    --bg-error: rgba(220, 38, 38, 0.08);

    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.16);
    --border-focus: var(--holo-100);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 30px rgba(131, 154, 255, 0.1);

    --holo-gradient: linear-gradient(135deg, #6366f1 0%, #839aff 100%);
    --holo-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(131, 154, 255, 0.08));
    --primary-gradient: linear-gradient(135deg, #6366f1 0%, #839aff 100%);

    --bg-card: #ffffff;
    --bg-input: #f8f8f8;
    --bg-code-block: #1e1e1e;
    --bg-code-inline: rgba(99, 102, 241, 0.08);
    --bg-thinking: #f5f5f5;
    --bg-output: #fafafa;
    --bg-hover: #f2f2f2;
    --bg-btn-secondary: #e8e8e8;
    --bg-btn-secondary-hover: #dcdcdc;
    --bg-blockquote: rgba(99, 102, 241, 0.06);
    --bg-nav: rgba(255, 255, 255, 0.85);
    --bg-progress: #e8e8e8;

    --text-code-block: #d4d4d4;
    --text-thinking: #555;
    --text-thinking-toggle: #666;
    --text-status-idle: #7f8c8d;
    --text-status-loading: #856404;
    --text-status-success: #155724;
    --text-status-error: #721c24;
    --text-welcome: #95a5a6;
    --text-username: #6366f1;

    --primary-color: #6366f1;
    --red: #e74c3c;
    --red-hover: #c0392b;
}