/* =============================================
   TOKENS - GENERADO AUTOMATICAMENTE. NO EDITAR.

   Fuente de verdad: design/tokens.json
   Regenerar:        npm run design:build
   Manual:           docs/design/IDENTITY.md

   Este archivo es el UNICO sitio donde se declaran tokens.
   styles.css y themes.css solo consumen con var().
   ============================================= */

/* =============================================
   TOKENS GLOBALES (independientes del tema)
   ============================================= */
:root {
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', 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;

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    --container-max: 1600px;
    --header-height: 64px;

    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-dropdown: 300;
    --z-overlay: 900;
    --z-toast: 1000;
    --z-assistant: 10001;
    --z-modal: 20000;

    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;

    --target-min-touch: 44px;
}

/* =============================================
   TEMA: Light (por defecto)
   ============================================= */
:root,
[data-theme="light"] {
    --color-spine-bg: #04060d;
    --color-spine-bg-rgb: 4, 6, 13;
    --color-spine-surface: #0b1020;
    --color-spine-surface-rgb: 11, 16, 32;
    --color-spine-elevated: #141c34;
    --color-spine-elevated-rgb: 20, 28, 52;
    --color-spine-accent: #6c7bff;
    --color-spine-accent-rgb: 108, 123, 255;
    --color-spine-text: #e7ecff;
    --color-spine-text-rgb: 231, 236, 255;
    --color-spine-text-dim: #93a0c8;
    --color-spine-text-dim-rgb: 147, 160, 200;
    --color-spine-border: #1e293b;
    --color-spine-border-rgb: 30, 41, 59;
    --color-scrim: #000000;
    --color-scrim-rgb: 0, 0, 0;
    --color-sheen: #ffffff;
    --color-sheen-rgb: 255, 255, 255;
    --color-hub-bg: #f8fafc;
    --color-hub-bg-rgb: 248, 250, 252;
    --color-hub-sidebar: #ffffff;
    --color-hub-sidebar-rgb: 255, 255, 255;
    --color-hub-surface: #ffffff;
    --color-hub-surface-rgb: 255, 255, 255;
    --color-hub-elevated: #f1f5f9;
    --color-hub-elevated-rgb: 241, 245, 249;
    --color-hub-glass: rgba(0, 0, 0, 0.04);
    --color-hub-border: #e2e8f0;
    --color-hub-border-rgb: 226, 232, 240;
    --color-hub-text: #0f172a;
    --color-hub-text-rgb: 15, 23, 42;
    --color-hub-text-dim: #64748b;
    --color-hub-text-dim-rgb: 100, 116, 139;
    --color-hub-accent: #ea933e;
    --color-hub-accent-rgb: 234, 147, 62;
    --color-hub-accent-soft: rgba(234, 147, 62, 0.12);
    --color-hub-accent-glow: rgba(234, 147, 62, 0.15);
    --color-hub-accent-text: #a55610;
    --color-hub-accent-text-rgb: 165, 86, 16;
    --color-hub-accent-2: #7c3aed;
    --color-hub-accent-2-rgb: 124, 58, 237;
    --color-hub-accent-2-deep: #6d28d9;
    --color-hub-accent-2-deep-rgb: 109, 40, 217;
    --color-hub-accent-2-soft: rgba(124, 58, 237, 0.10);
    --color-hub-accent-2-glow: rgba(124, 58, 237, 0.15);
    --color-hub-veil: #000000;
    --color-hub-veil-rgb: 0, 0, 0;
    --color-hub-scrim: #000000;
    --color-hub-scrim-rgb: 0, 0, 0;
    --color-hub-backdrop: #1b2129;
    --color-hub-backdrop-rgb: 27, 33, 41;
    --color-hub-on-accent: #000000;
    --color-hub-on-accent-rgb: 0, 0, 0;
    --color-hub-on-media: #ffffff;
    --color-hub-on-media-rgb: 255, 255, 255;
    --color-hub-media-bg: #000000;
    --color-hub-media-bg-rgb: 0, 0, 0;
    --color-hub-green: #10b981;
    --color-hub-green-rgb: 16, 185, 129;
    --color-hub-accent-hover: #f5a04e;
    --color-hub-accent-hover-rgb: 245, 160, 78;
    --color-hub-cat-data: #3b82f6;
    --color-hub-cat-data-rgb: 59, 130, 246;
    --color-hub-cat-docs: #10b981;
    --color-hub-cat-docs-rgb: 16, 185, 129;
    --color-hub-cat-code: #f59e0b;
    --color-hub-cat-code-rgb: 245, 158, 11;
    --color-hub-cat-other: #71717a;
    --color-hub-cat-other-rgb: 113, 113, 122;
    --color-studio-bg: #0b0e15;
    --color-studio-bg-rgb: 11, 14, 21;
    --color-studio-surface: #10131b;
    --color-studio-surface-rgb: 16, 19, 27;
    --color-studio-surface-2: #161a22;
    --color-studio-surface-2-rgb: 22, 26, 34;
    --color-studio-surface-3: #212630;
    --color-studio-surface-3-rgb: 33, 38, 48;
    --color-studio-glass: rgba(33, 38, 48, 0.4);
    --color-studio-border: rgba(115, 117, 126, 0.15);
    --color-studio-text: #f2f3fd;
    --color-studio-text-rgb: 242, 243, 253;
    --color-studio-text-dim: #a9abb4;
    --color-studio-text-dim-rgb: 169, 171, 180;
    --color-studio-accent: #4edea3;
    --color-studio-accent-rgb: 78, 222, 163;
    --color-studio-accent-dim: #00583b;
    --color-studio-accent-dim-rgb: 0, 88, 59;
    --color-studio-accent-2: #d0bcff;
    --color-studio-accent-2-rgb: 208, 188, 255;
    --color-studio-accent-2-dim: #503f79;
    --color-studio-accent-2-dim-rgb: 80, 63, 121;
    --color-studio-cyan: #00fbfb;
    --color-studio-cyan-rgb: 0, 251, 251;
    --color-hub-type-doc: #1d4ed8;
    --color-hub-type-doc-rgb: 29, 78, 216;
    --color-hub-type-sheet: #166534;
    --color-hub-type-sheet-rgb: 22, 101, 52;
    --color-hub-type-pdf: #b91c1c;
    --color-hub-type-pdf-rgb: 185, 28, 28;
    --color-hub-type-archive: #92400e;
    --color-hub-type-archive-rgb: 146, 64, 14;
    --color-hub-type-video: #7e22ce;
    --color-hub-type-video-rgb: 126, 34, 206;
    --color-hub-type-audio: #9d174d;
    --color-hub-type-audio-rgb: 157, 23, 77;
    --color-hub-type-image: #0369a1;
    --color-hub-type-image-rgb: 3, 105, 161;
    --color-hub-type-clip: #065f46;
    --color-hub-type-clip-rgb: 6, 95, 70;
    --color-primary: #4f46e5;
    --color-primary-rgb: 79, 70, 229;
    --color-primary-hover: #4338ca;
    --color-primary-hover-rgb: 67, 56, 202;
    --color-primary-light: #eef2ff;
    --color-primary-light-rgb: 238, 242, 255;
    --color-bg: #f8fafc;
    --color-bg-rgb: 248, 250, 252;
    --color-bg-elevated: #ffffff;
    --color-bg-elevated-rgb: 255, 255, 255;
    --color-surface: #ffffff;
    --color-surface-rgb: 255, 255, 255;
    --color-surface-alt: #f1f5f9;
    --color-surface-alt-rgb: 241, 245, 249;
    --color-border: #e2e8f0;
    --color-border-rgb: 226, 232, 240;
    --color-text: #1e293b;
    --color-text-rgb: 30, 41, 59;
    --color-text-secondary: #556174;
    --color-text-secondary-rgb: 85, 97, 116;
    --color-text-muted: #556174;
    --color-text-muted-rgb: 85, 97, 116;
    --color-success: #22c55e;
    --color-success-rgb: 34, 197, 94;
    --color-success-bg: #f0fdf4;
    --color-success-bg-rgb: 240, 253, 244;
    --color-warning: #f59e0b;
    --color-warning-rgb: 245, 158, 11;
    --color-warning-bg: #fffbeb;
    --color-warning-bg-rgb: 255, 251, 235;
    --color-error: #ef4444;
    --color-error-rgb: 239, 68, 68;
    --color-error-bg: #fef2f2;
    --color-error-bg-rgb: 254, 242, 242;
    --color-info: #3b82f6;
    --color-info-rgb: 59, 130, 246;
    --color-info-bg: #eff6ff;
    --color-info-bg-rgb: 239, 246, 255;
    --color-on-primary: #ffffff;
    --color-on-primary-rgb: 255, 255, 255;
    --color-on-success: #0c4521;
    --color-on-success-rgb: 12, 69, 33;
    --color-on-warning: #563704;
    --color-on-warning-rgb: 86, 55, 4;
    --color-on-error: #300e0e;
    --color-on-error-rgb: 48, 14, 14;
    --color-on-info: #0c1a31;
    --color-on-info-rgb: 12, 26, 49;
    --color-success-text: #16803d;
    --color-success-text-rgb: 22, 128, 61;
    --color-warning-text: #9f6707;
    --color-warning-text-rgb: 159, 103, 7;
    --color-error-text: #cb3a3a;
    --color-error-text-rgb: 203, 58, 58;
    --color-info-text: #2f68c5;
    --color-info-text-rgb: 47, 104, 197;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* =============================================
   TEMA: Dark (gris neutro, estilo VS Code)
   ============================================= */
[data-theme="dark"] {
    --color-spine-bg: #04060d;
    --color-spine-bg-rgb: 4, 6, 13;
    --color-spine-surface: #0b1020;
    --color-spine-surface-rgb: 11, 16, 32;
    --color-spine-elevated: #141c34;
    --color-spine-elevated-rgb: 20, 28, 52;
    --color-spine-accent: #6c7bff;
    --color-spine-accent-rgb: 108, 123, 255;
    --color-spine-text: #e7ecff;
    --color-spine-text-rgb: 231, 236, 255;
    --color-spine-text-dim: #93a0c8;
    --color-spine-text-dim-rgb: 147, 160, 200;
    --color-spine-border: #1e293b;
    --color-spine-border-rgb: 30, 41, 59;
    --color-scrim: #000000;
    --color-scrim-rgb: 0, 0, 0;
    --color-sheen: #ffffff;
    --color-sheen-rgb: 255, 255, 255;
    --color-hub-bg: #111111;
    --color-hub-bg-rgb: 17, 17, 17;
    --color-hub-sidebar: #18181b;
    --color-hub-sidebar-rgb: 24, 24, 27;
    --color-hub-surface: #1a1a1a;
    --color-hub-surface-rgb: 26, 26, 26;
    --color-hub-elevated: #242424;
    --color-hub-elevated-rgb: 36, 36, 36;
    --color-hub-glass: rgba(255, 255, 255, 0.03);
    --color-hub-border: #2e2e2e;
    --color-hub-border-rgb: 46, 46, 46;
    --color-hub-text: #f3f4f6;
    --color-hub-text-rgb: 243, 244, 246;
    --color-hub-text-dim: #9ca3af;
    --color-hub-text-dim-rgb: 156, 163, 175;
    --color-hub-accent: #ea933e;
    --color-hub-accent-rgb: 234, 147, 62;
    --color-hub-accent-soft: rgba(234, 147, 62, 0.15);
    --color-hub-accent-glow: rgba(234, 147, 62, 0.25);
    --color-hub-accent-text: #ea933e;
    --color-hub-accent-text-rgb: 234, 147, 62;
    --color-hub-accent-2: #a78bfa;
    --color-hub-accent-2-rgb: 167, 139, 250;
    --color-hub-accent-2-deep: #6d28d9;
    --color-hub-accent-2-deep-rgb: 109, 40, 217;
    --color-hub-accent-2-soft: rgba(167, 139, 250, 0.12);
    --color-hub-accent-2-glow: rgba(167, 139, 250, 0.25);
    --color-hub-veil: #ffffff;
    --color-hub-veil-rgb: 255, 255, 255;
    --color-hub-scrim: #000000;
    --color-hub-scrim-rgb: 0, 0, 0;
    --color-hub-backdrop: #1b2129;
    --color-hub-backdrop-rgb: 27, 33, 41;
    --color-hub-on-accent: #000000;
    --color-hub-on-accent-rgb: 0, 0, 0;
    --color-hub-on-media: #ffffff;
    --color-hub-on-media-rgb: 255, 255, 255;
    --color-hub-media-bg: #000000;
    --color-hub-media-bg-rgb: 0, 0, 0;
    --color-hub-green: #10b981;
    --color-hub-green-rgb: 16, 185, 129;
    --color-hub-accent-hover: #f5a04e;
    --color-hub-accent-hover-rgb: 245, 160, 78;
    --color-hub-cat-data: #3b82f6;
    --color-hub-cat-data-rgb: 59, 130, 246;
    --color-hub-cat-docs: #10b981;
    --color-hub-cat-docs-rgb: 16, 185, 129;
    --color-hub-cat-code: #f59e0b;
    --color-hub-cat-code-rgb: 245, 158, 11;
    --color-hub-cat-other: #71717a;
    --color-hub-cat-other-rgb: 113, 113, 122;
    --color-studio-bg: #0b0e15;
    --color-studio-bg-rgb: 11, 14, 21;
    --color-studio-surface: #10131b;
    --color-studio-surface-rgb: 16, 19, 27;
    --color-studio-surface-2: #161a22;
    --color-studio-surface-2-rgb: 22, 26, 34;
    --color-studio-surface-3: #212630;
    --color-studio-surface-3-rgb: 33, 38, 48;
    --color-studio-glass: rgba(33, 38, 48, 0.4);
    --color-studio-border: rgba(115, 117, 126, 0.15);
    --color-studio-text: #f2f3fd;
    --color-studio-text-rgb: 242, 243, 253;
    --color-studio-text-dim: #a9abb4;
    --color-studio-text-dim-rgb: 169, 171, 180;
    --color-studio-accent: #4edea3;
    --color-studio-accent-rgb: 78, 222, 163;
    --color-studio-accent-dim: #00583b;
    --color-studio-accent-dim-rgb: 0, 88, 59;
    --color-studio-accent-2: #d0bcff;
    --color-studio-accent-2-rgb: 208, 188, 255;
    --color-studio-accent-2-dim: #503f79;
    --color-studio-accent-2-dim-rgb: 80, 63, 121;
    --color-studio-cyan: #00fbfb;
    --color-studio-cyan-rgb: 0, 251, 251;
    --color-hub-type-doc: #60a5fa;
    --color-hub-type-doc-rgb: 96, 165, 250;
    --color-hub-type-sheet: #4ade80;
    --color-hub-type-sheet-rgb: 74, 222, 128;
    --color-hub-type-pdf: #f87171;
    --color-hub-type-pdf-rgb: 248, 113, 113;
    --color-hub-type-archive: #fbbf24;
    --color-hub-type-archive-rgb: 251, 191, 36;
    --color-hub-type-video: #c084fc;
    --color-hub-type-video-rgb: 192, 132, 252;
    --color-hub-type-audio: #f472b6;
    --color-hub-type-audio-rgb: 244, 114, 182;
    --color-hub-type-image: #38bdf8;
    --color-hub-type-image-rgb: 56, 189, 248;
    --color-hub-type-clip: #34d399;
    --color-hub-type-clip-rgb: 52, 211, 153;
    --color-primary: #a78bfa;
    --color-primary-rgb: 167, 139, 250;
    --color-primary-hover: #c4b5fd;
    --color-primary-hover-rgb: 196, 181, 253;
    --color-primary-light: #1c1c1c;
    --color-primary-light-rgb: 28, 28, 28;
    --color-bg: #121212;
    --color-bg-rgb: 18, 18, 18;
    --color-bg-elevated: #1e1e1e;
    --color-bg-elevated-rgb: 30, 30, 30;
    --color-surface: #1e1e1e;
    --color-surface-rgb: 30, 30, 30;
    --color-surface-alt: #2d2d2d;
    --color-surface-alt-rgb: 45, 45, 45;
    --color-border: #3d3d3d;
    --color-border-rgb: 61, 61, 61;
    --color-text: #e4e4e4;
    --color-text-rgb: 228, 228, 228;
    --color-text-secondary: #a0a0a0;
    --color-text-secondary-rgb: 160, 160, 160;
    --color-text-muted: #a0a0a0;
    --color-text-muted-rgb: 160, 160, 160;
    --color-success: #4ade80;
    --color-success-rgb: 74, 222, 128;
    --color-success-bg: rgba(74, 222, 128, 0.15);
    --color-warning: #fbbf24;
    --color-warning-rgb: 251, 191, 36;
    --color-warning-bg: rgba(251, 191, 36, 0.15);
    --color-error: #f87171;
    --color-error-rgb: 248, 113, 113;
    --color-error-bg: rgba(248, 113, 113, 0.15);
    --color-info: #60a5fa;
    --color-info-rgb: 96, 165, 250;
    --color-info-bg: rgba(96, 165, 250, 0.15);
    --color-on-primary: #322a4b;
    --color-on-primary-rgb: 50, 42, 75;
    --color-on-success: #1e5933;
    --color-on-success-rgb: 30, 89, 51;
    --color-on-warning: #644c0e;
    --color-on-warning-rgb: 100, 76, 14;
    --color-on-error: #4a2222;
    --color-on-error-rgb: 74, 34, 34;
    --color-on-info: #223a58;
    --color-on-info-rgb: 34, 58, 88;
    --color-success-text: #3fbd6d;
    --color-success-text-rgb: 63, 189, 109;
    --color-warning-text: #c9991d;
    --color-warning-text-rgb: 201, 153, 29;
    --color-error-text: #f97f7f;
    --color-error-text-rgb: 249, 127, 127;
    --color-info-text: #70aefb;
    --color-info-text-rgb: 112, 174, 251;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

    --gradient-primary: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
    --gradient-success: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    --gradient-accent: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

/* =============================================
   TEMA: Cyber (azul oscuro, inspirado en Antigravity)
   ============================================= */
[data-theme="cyber"] {
    --color-spine-bg: #04060d;
    --color-spine-bg-rgb: 4, 6, 13;
    --color-spine-surface: #0b1020;
    --color-spine-surface-rgb: 11, 16, 32;
    --color-spine-elevated: #141c34;
    --color-spine-elevated-rgb: 20, 28, 52;
    --color-spine-accent: #6c7bff;
    --color-spine-accent-rgb: 108, 123, 255;
    --color-spine-text: #e7ecff;
    --color-spine-text-rgb: 231, 236, 255;
    --color-spine-text-dim: #93a0c8;
    --color-spine-text-dim-rgb: 147, 160, 200;
    --color-spine-border: #1e293b;
    --color-spine-border-rgb: 30, 41, 59;
    --color-scrim: #000000;
    --color-scrim-rgb: 0, 0, 0;
    --color-sheen: #ffffff;
    --color-sheen-rgb: 255, 255, 255;
    --color-hub-bg: #030712;
    --color-hub-bg-rgb: 3, 7, 18;
    --color-hub-sidebar: #0b0f19;
    --color-hub-sidebar-rgb: 11, 15, 25;
    --color-hub-surface: #0f172a;
    --color-hub-surface-rgb: 15, 23, 42;
    --color-hub-elevated: #1e293b;
    --color-hub-elevated-rgb: 30, 41, 59;
    --color-hub-glass: rgba(0, 212, 255, 0.05);
    --color-hub-border: rgba(0, 212, 255, 0.25);
    --color-hub-text: #f8fafc;
    --color-hub-text-rgb: 248, 250, 252;
    --color-hub-text-dim: #94a3b8;
    --color-hub-text-dim-rgb: 148, 163, 184;
    --color-hub-accent: #00d4ff;
    --color-hub-accent-rgb: 0, 212, 255;
    --color-hub-accent-soft: rgba(0, 212, 255, 0.15);
    --color-hub-accent-glow: rgba(0, 212, 255, 0.35);
    --color-hub-accent-text: #00d4ff;
    --color-hub-accent-text-rgb: 0, 212, 255;
    --color-hub-accent-2: #a78bfa;
    --color-hub-accent-2-rgb: 167, 139, 250;
    --color-hub-accent-2-deep: #6d28d9;
    --color-hub-accent-2-deep-rgb: 109, 40, 217;
    --color-hub-accent-2-soft: rgba(167, 139, 250, 0.12);
    --color-hub-accent-2-glow: rgba(167, 139, 250, 0.30);
    --color-hub-veil: #ffffff;
    --color-hub-veil-rgb: 255, 255, 255;
    --color-hub-scrim: #000000;
    --color-hub-scrim-rgb: 0, 0, 0;
    --color-hub-backdrop: #1b2129;
    --color-hub-backdrop-rgb: 27, 33, 41;
    --color-hub-on-accent: #000000;
    --color-hub-on-accent-rgb: 0, 0, 0;
    --color-hub-on-media: #ffffff;
    --color-hub-on-media-rgb: 255, 255, 255;
    --color-hub-media-bg: #000000;
    --color-hub-media-bg-rgb: 0, 0, 0;
    --color-hub-green: #10b981;
    --color-hub-green-rgb: 16, 185, 129;
    --color-hub-accent-hover: #5ce1ff;
    --color-hub-accent-hover-rgb: 92, 225, 255;
    --color-hub-cat-data: #3b82f6;
    --color-hub-cat-data-rgb: 59, 130, 246;
    --color-hub-cat-docs: #10b981;
    --color-hub-cat-docs-rgb: 16, 185, 129;
    --color-hub-cat-code: #f59e0b;
    --color-hub-cat-code-rgb: 245, 158, 11;
    --color-hub-cat-other: #71717a;
    --color-hub-cat-other-rgb: 113, 113, 122;
    --color-studio-bg: #0b0e15;
    --color-studio-bg-rgb: 11, 14, 21;
    --color-studio-surface: #10131b;
    --color-studio-surface-rgb: 16, 19, 27;
    --color-studio-surface-2: #161a22;
    --color-studio-surface-2-rgb: 22, 26, 34;
    --color-studio-surface-3: #212630;
    --color-studio-surface-3-rgb: 33, 38, 48;
    --color-studio-glass: rgba(33, 38, 48, 0.4);
    --color-studio-border: rgba(115, 117, 126, 0.15);
    --color-studio-text: #f2f3fd;
    --color-studio-text-rgb: 242, 243, 253;
    --color-studio-text-dim: #a9abb4;
    --color-studio-text-dim-rgb: 169, 171, 180;
    --color-studio-accent: #4edea3;
    --color-studio-accent-rgb: 78, 222, 163;
    --color-studio-accent-dim: #00583b;
    --color-studio-accent-dim-rgb: 0, 88, 59;
    --color-studio-accent-2: #d0bcff;
    --color-studio-accent-2-rgb: 208, 188, 255;
    --color-studio-accent-2-dim: #503f79;
    --color-studio-accent-2-dim-rgb: 80, 63, 121;
    --color-studio-cyan: #00fbfb;
    --color-studio-cyan-rgb: 0, 251, 251;
    --color-hub-type-doc: #60a5fa;
    --color-hub-type-doc-rgb: 96, 165, 250;
    --color-hub-type-sheet: #4ade80;
    --color-hub-type-sheet-rgb: 74, 222, 128;
    --color-hub-type-pdf: #f87171;
    --color-hub-type-pdf-rgb: 248, 113, 113;
    --color-hub-type-archive: #fbbf24;
    --color-hub-type-archive-rgb: 251, 191, 36;
    --color-hub-type-video: #c084fc;
    --color-hub-type-video-rgb: 192, 132, 252;
    --color-hub-type-audio: #f472b6;
    --color-hub-type-audio-rgb: 244, 114, 182;
    --color-hub-type-image: #38bdf8;
    --color-hub-type-image-rgb: 56, 189, 248;
    --color-hub-type-clip: #34d399;
    --color-hub-type-clip-rgb: 52, 211, 153;
    --color-primary: #00d4ff;
    --color-primary-rgb: 0, 212, 255;
    --color-primary-hover: #38bdf8;
    --color-primary-hover-rgb: 56, 189, 248;
    --color-primary-light: #0c1929;
    --color-primary-light-rgb: 12, 25, 41;
    --color-bg: #0a0e17;
    --color-bg-rgb: 10, 14, 23;
    --color-bg-elevated: #111827;
    --color-bg-elevated-rgb: 17, 24, 39;
    --color-surface: #0f1629;
    --color-surface-rgb: 15, 22, 41;
    --color-surface-alt: #1a2744;
    --color-surface-alt-rgb: 26, 39, 68;
    --color-border: #1e3a5f;
    --color-border-rgb: 30, 58, 95;
    --color-text: #e2e8f0;
    --color-text-rgb: 226, 232, 240;
    --color-text-secondary: #8892a6;
    --color-text-secondary-rgb: 136, 146, 166;
    --color-text-muted: #8892a6;
    --color-text-muted-rgb: 136, 146, 166;
    --color-success: #00ff88;
    --color-success-rgb: 0, 255, 136;
    --color-success-bg: rgba(0, 255, 136, 0.1);
    --color-warning: #ffcc00;
    --color-warning-rgb: 255, 204, 0;
    --color-warning-bg: rgba(255, 204, 0, 0.1);
    --color-error: #ff4757;
    --color-error-rgb: 255, 71, 87;
    --color-error-bg: rgba(255, 71, 87, 0.1);
    --color-info: #00d4ff;
    --color-info-rgb: 0, 212, 255;
    --color-info-bg: rgba(0, 212, 255, 0.1);
    --color-on-primary: #005566;
    --color-on-primary-rgb: 0, 85, 102;
    --color-on-success: #006636;
    --color-on-success-rgb: 0, 102, 54;
    --color-on-warning: #665200;
    --color-on-warning-rgb: 102, 82, 0;
    --color-on-error: #401216;
    --color-on-error-rgb: 64, 18, 22;
    --color-on-info: #005566;
    --color-on-info-rgb: 0, 85, 102;
    --color-success-text: #00a658;
    --color-success-text-rgb: 0, 166, 88;
    --color-warning-text: #b38f00;
    --color-warning-text-rgb: 179, 143, 0;
    --color-error-text: #ff5968;
    --color-error-text-rgb: 255, 89, 104;
    --color-info-text: #009fbf;
    --color-info-text-rgb: 0, 159, 191;

    --shadow-sm: 0 1px 3px rgba(0, 212, 255, 0.1);
    --shadow-md: 0 4px 10px rgba(0, 212, 255, 0.15);
    --shadow-lg: 0 10px 30px rgba(0, 212, 255, 0.2);

    --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
    --gradient-success: linear-gradient(135deg, #00ff88 0%, #10b981 100%);
    --gradient-accent: linear-gradient(135deg, #ffcc00 0%, #ff9500 100%);
}