/* ========================================
   CSS Custom Properties (Variables)
   ======================================== */

:root {
    /* Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Courier New', 'SF Mono', Monaco, Consolas, monospace;

    /* Simplified Type Scale - Only 4 Sizes */
    --text-small: 0.75rem;    /* 12px - Metadata, badges, timestamps */
    --text-body: 0.875rem;    /* 14px - All body text, labels, navigation */
    --text-button: 1rem;      /* 16px - Buttons only */
    --text-heading: 1.125rem; /* 18px - Section headings */

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

    /* Line Heights */
    --leading-tight: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    /* Background Colors */
    --color-bg-primary: #121212;
    --color-bg-secondary: #1a1a1a;
    --color-bg-tertiary: #1e1e1e;
    --color-bg-elevated: #2a2a2a;
    --color-bg-input: #2c2c2c;
    --color-bg-dark: #0d0d0d;
    --color-bg-darker: #333;

    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #e0e0e0;
    --color-text-tertiary: #cccccc;
    --color-text-muted: #aaa;
    --color-text-disabled: #666;
    --color-text-subtle: #888;
    --color-text-subtle-dark: #7f8c8d;

    /* Border Colors */
    --color-border-primary: #333;
    --color-border-secondary: #444;
    --color-border-light: #555;

    /* Brand Colors */
    --color-brand-primary: #4CAF50;
    --color-brand-secondary: #66BB6A;
    --color-brand-dark: #45a049;

    /* Accent Colors */
    --color-accent-orange: #f39c12;
    --color-accent-blue: #1a73e8;
    --color-accent-blue-light: #4285f4;
    --color-accent-blue-dark: #1557b0;
    --color-accent-blue-muted: #1a4d7a;
    --color-accent-blue-bright: #66b3ff;
    --color-accent-red: #d32f2f;
    --color-accent-purple: #667eea;
    --color-accent-yellow: #eab308;
    --color-accent-gray: #9ca3af;
    --color-accent-gray-light: #6b7280;
    --color-accent-gray-dark: #4b5563;
    --color-accent-console: #2c3e50;

    /* State Colors */
    --color-success: #4CAF50;
    --color-success-light: #4ade80;
    --color-success-bright: #22c55e;
    --color-success-dark: #0d4d2d;
    --color-warning: #f39c12;
    --color-warning-light: #f1c40f;
    --color-error: #d32f2f;
    --color-error-light: #ff6b6b;
    --color-error-dark: #4d0d0d;
    --color-info: #4a9eff;

    /* Specific Component Colors */
    --color-youtube-red: #FF0000;
    --color-youtube-red-dark: #CC0000;
    --color-transcript-green: #4a9c6d;
    --color-transcript-green-dark: #3d8a5d;
    --color-favorite-yellow: #ffcc00;

    /* Border Radius */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-2xl: 12px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
}