/* Design Tokens (CSS Custom Properties) */
:root {
    --color-bg-primary:       #1E1812;
    --color-bg-secondary:     #261E15;
    --color-bg-tertiary:      #16120E;
    --color-bg-hover:         #352A1F;
    --color-bg-pdf-viewer:    #525659;

    --color-text-primary:     #EDE6DD;
    --color-text-secondary:   #B8A898;
    --color-text-muted:       #7D6E60;

    --color-accent-primary:   #D97757;
    --color-accent-secondary: #C4684B;
    --color-accent-success:   #22c55e;
    --color-accent-warning:   #f59e0b;
    --color-accent-danger:    #ef4444;

    --color-border:           #3D2E22;
    --color-border-half:      rgba(61, 46, 34, 0.5);

    --color-accent-primary-hover:   #C4684B;
    --color-accent-secondary-hover: #B35A3D;
    --color-accent-danger-bg:       rgba(239, 68, 68, 0.2);
    --color-accent-danger-bg-light: rgba(239, 68, 68, 0.15);
    --color-accent-danger-bg-faint: rgba(239, 68, 68, 0.1);
    --color-accent-danger-border:   rgba(239, 68, 68, 0.3);
    --color-accent-primary-glow:    rgba(217, 119, 87, 0.4);
    --color-accent-primary-bg:      rgba(217, 119, 87, 0.3);
    --color-accent-warning-bg:      rgba(245, 158, 11, 0.4);

    --color-hint-command:     #D4A574;
    --color-hint-environment: #7DABA8;
    --color-hint-greek:       #8BBF7A;
    --color-hint-math:        #E8A668;

    --color-google-blue:      #4285f4;
    --color-google-blue-hover:#357abd;
    --color-login-text:       #333;
    --color-login-border:     #ddd;
    --color-login-bg-hover:   #f5f5f5;

    --space-2:  2px;  --space-4:  4px;  --space-6:  6px;
    --space-8:  8px;  --space-10: 10px; --space-12: 12px;
    --space-14: 14px; --space-16: 16px; --space-20: 20px;
    --space-24: 24px; --space-28: 28px;

    --font-family-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mono:  'JetBrains Mono', 'Fira Code', monospace;

    --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 12px;
    --font-size-md: 13px; --font-size-lg: 14px; --font-size-xl: 16px;
    --font-size-2xl: 20px; --font-size-3xl: 24px;
    --font-size-4xl: 48px; --font-size-5xl: 64px;

    --font-weight-normal: 400; --font-weight-medium: 500;
    --font-weight-semibold: 600; --font-weight-bold: 700;
    --line-height-normal: 1.5; --line-height-relaxed: 1.6;

    --radius-xs: 2px; --radius-sm: 4px; --radius: 8px;
    --radius-md: 12px; --radius-pill: 100px;

    --shadow:      0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg:   0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-xl:   0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-hint: 0 6px 16px rgba(0, 0, 0, 0.4);
    --shadow-pin:  0 2px 8px rgba(0, 0, 0, 0.3);

    --transition-fast:   all 0.15s;
    --transition-normal: all 0.2s;
    --transition-slow:   all 0.3s;

    --header-height:   40px;
    --tab-bar-height:  36px;
    --ai-panel-width:  320px;
    --ai-panel-min-w:  280px;
    --logs-height:     200px;
    --logs-min-height: 40px;

    --z-header: 100; --z-dropdown: 100;
    --z-modal: 1000; --z-toast: 1001;
    --z-annotation-layer: 10; --z-annotation-pin: 11;
    --z-annotation-popover: 20;

    /* Claude AI panel palette (unified with main palette) */
    --claude-terracotta:        var(--color-accent-primary);
    --claude-terracotta-hover:  var(--color-accent-primary-hover);
    --claude-terracotta-bg:     rgba(217, 119, 87, 0.15);
    --claude-terracotta-glow:   var(--color-accent-primary-glow);
    --claude-bg-panel:          var(--color-bg-primary);
    --claude-bg-surface:        #2A2018;
    --claude-bg-input:          var(--color-bg-tertiary);
    --claude-bg-hover:          var(--color-bg-hover);
    --claude-border:            var(--color-border);
    --claude-border-half:       var(--color-border-half);
    --claude-text-primary:      var(--color-text-primary);
    --claude-text-secondary:    var(--color-text-secondary);
    --claude-text-muted:        var(--color-text-muted);
    --claude-danger:            var(--color-accent-danger);

    /* Legacy aliases */
    --bg-primary:     var(--color-bg-primary);
    --bg-secondary:   var(--color-bg-secondary);
    --bg-tertiary:    var(--color-bg-tertiary);
    --bg-hover:       var(--color-bg-hover);
    --text-primary:   var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted:     var(--color-text-muted);
    --accent-primary: var(--color-accent-primary);
    --accent-secondary: var(--color-accent-secondary);
    --accent-success: var(--color-accent-success);
    --accent-warning: var(--color-accent-warning);
    --accent-danger:  var(--color-accent-danger);
    --border-color:   var(--color-border);
}