/* ==========================================================================
   STERRA - THEMES & DESIGN TOKENS (2D MATTE & FLAT EDITION)
   Palettes: Dark Matte Slate (Default), OLED Matte Black, Light Matte Silver
   ========================================================================== */

:root {
    /* Fonts */
    --font-ui: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    --font-heading: 'Outfit', 'Segoe UI', sans-serif;

    /* Transition Speeds */
    --transition-fast: 0.12s ease-out;
    --transition-base: 0.2s ease-out;
    --transition-smooth: 0.3s ease-out;

    /* Dimensions */
    --topbar-height: 48px;
    --activitybar-width: 54px;
    --sidebar-width: 320px;
    --statusbar-height: 28px;
    --tab-height: 40px;

    /* Sharp 2D Geometry (Crisp, No Pill Bloat) */
    --border-radius-sm: 2px;
    --border-radius-md: 3px;
    --border-radius-lg: 4px;
    --border-radius-pill: 3px;
}

/* --------------------------------------------------------------------------
   THEME 1: DARK MATTE SLATE & GRAPHITE (DEFAULT)
   Ultra-sauberes, flaches 2D-Matte-Design ohne Glow und mit harten Schatten
   -------------------------------------------------------------------------- */
[data-theme="dark-silver"] {
    --bg-app: rgb(14, 14, 14);
    --bg-titlebar: rgb(20, 20, 20);
    --bg-activity: rgb(16, 16, 16);
    --bg-sidebar: rgb(18, 18, 18);
    --bg-editor: rgb(20, 20, 20);
    --bg-tabs: rgb(16, 16, 16);
    --bg-tab-active: rgb(20, 20, 20);
    --bg-tab-inactive: rgb(16, 16, 16);
    --bg-panel: rgb(18, 18, 18);
    --bg-statusbar: rgb(14, 14, 14);
    --bg-card: rgb(24, 24, 24);
    --bg-card-hover: rgb(32, 32, 32);
    --bg-modal: rgb(22, 22, 22);
    --bg-input: rgb(16, 16, 16);
    --bg-terminal: rgb(14, 14, 14);
    --bg-tooltip: rgb(28, 28, 28);

    /* High-Contrast Matte Typography */
    --text-main: #f8fafc;
    --text-muted: #cbd5e1;
    --text-dim: #94a3b8;
    --text-inverse: #0e0e0e;

    /* Solid Matte Silver & Grays */
    --silver-100: #ffffff;
    --silver-200: #f1f5f9;
    --silver-300: #cbd5e1;
    --silver-400: #94a3b8;
    --silver-500: #64748b;

    /* No Glow in 2D Matte Mode */
    --silver-glow: transparent;
    --silver-glow-strong: transparent;

    /* Flat Matte Fills */
    --gradient-chrome: #ffffff;
    --gradient-silver-badge: rgb(32, 32, 32);
    --gradient-silver-btn: #f1f5f9;
    --gradient-glass: rgb(24, 24, 24);
    --gradient-hero: rgb(20, 20, 20);

    /* Accent & State Colors (Matte 2D) */
    --accent-primary: #f8fafc;
    --accent-hover: #e2e8f0;
    --accent-active-border: #f8fafc;
    --accent-gold: #facc15;
    --accent-emerald: #34d399;
    --accent-cyan: #38bdf8;
    --accent-purple: #c084fc;
    --accent-orange: #fb923c;

    /* Crisp 2D Flat Borders (Neutral Dark Gray) */
    --border-subtle: rgb(38, 38, 38);
    --border-medium: rgb(54, 54, 54);
    --border-chrome: rgb(76, 76, 76);
    --border-highlight: #f8fafc;

    /* Hard 2D Drop Shadows (Crisp, No Blur) */
    --shadow-sm: 1px 1px 0px #000000;
    --shadow-md: 2px 2px 0px #000000;
    --shadow-lg: 4px 4px 0px #000000;
    --shadow-chrome: none;

    /* Code Syntax Highlighting (Flat Crisp Tones) */
    --syntax-keyword: #c084fc;
    --syntax-string: #34d399;
    --syntax-number: #facc15;
    --syntax-comment: #94a3b8;
    --syntax-function: #38bdf8;
    --syntax-variable: #f472b6;
    --syntax-property: #e2e8f0;
}

/* --------------------------------------------------------------------------
   THEME 2: OLED MATTE PURE BLACK (100% TRUE PITCH BLACK)
   Absolutes Tiefschwarz (#000000) auf allen Oberflächen für maximale OLED-Kontraste
   -------------------------------------------------------------------------- */
[data-theme="oled-black"] {
    --bg-app: #000000;
    --bg-titlebar: #000000;
    --bg-activity: #000000;
    --bg-sidebar: #000000;
    --bg-editor: #000000;
    --bg-tabs: #000000;
    --bg-tab-active: #000000;
    --bg-tab-inactive: #000000;
    --bg-panel: #000000;
    --bg-statusbar: #000000;
    --bg-card: #000000;
    --bg-card-hover: #080808;
    --bg-modal: #000000;
    --bg-input: #000000;
    --bg-terminal: #000000;
    --bg-tooltip: #000000;

    --text-main: #ffffff;
    --text-muted: #d4d4d4;
    --text-dim: #888888;
    --text-inverse: #000000;

    --silver-100: #ffffff;
    --silver-200: #f0f0f0;
    --silver-300: #d4d4d4;
    --silver-400: #a3a3a3;
    --silver-500: #737373;
    --silver-glow: transparent;
    --silver-glow-strong: transparent;

    --gradient-chrome: #ffffff;
    --gradient-silver-badge: #000000;
    --gradient-silver-btn: #ffffff;
    --gradient-glass: #000000;
    --gradient-hero: #000000;

    --accent-primary: #ffffff;
    --accent-hover: #ededed;
    --accent-active-border: #ffffff;
    --accent-gold: #fde047;
    --accent-emerald: #34d399;
    --accent-cyan: #38bdf8;
    --accent-purple: #c084fc;
    --accent-orange: #fb923c;

    --border-subtle: #1e1e1e;
    --border-medium: #303030;
    --border-chrome: #4a4a4a;
    --border-highlight: #ffffff;

    --shadow-sm: 1px 1px 0px #1a1a1a;
    --shadow-md: 2px 2px 0px #1a1a1a;
    --shadow-lg: 3px 3px 0px #1a1a1a;
    --shadow-chrome: none;

    --syntax-keyword: #d8b4fe;
    --syntax-string: #6ee7b7;
    --syntax-number: #fde047;
    --syntax-comment: #737373;
    --syntax-function: #38bdf8;
    --syntax-variable: #f472b6;
    --syntax-property: #e5e5e5;
}

/* --------------------------------------------------------------------------
   THEME 3: LIGHT MATTE SILVER & SLATE
   -------------------------------------------------------------------------- */
[data-theme="light-silver"] {
    --bg-app: #eef2f6;
    --bg-titlebar: #dfe5ec;
    --bg-activity: #d5dce5;
    --bg-sidebar: #f5f7fa;
    --bg-editor: #ffffff;
    --bg-tabs: #e6ebf2;
    --bg-tab-active: #ffffff;
    --bg-tab-inactive: #e6ebf2;
    --bg-panel: #f8fafc;
    --bg-statusbar: #d5dce5;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-modal: #ffffff;
    --bg-input: #f1f4f8;
    --bg-terminal: #111827;
    --bg-tooltip: #1f2937;

    --text-main: #0f172a;
    --text-muted: #334155;
    --text-dim: #64748b;
    --text-inverse: #ffffff;

    --silver-100: #0f172a;
    --silver-200: #1e293b;
    --silver-300: #334155;
    --silver-400: #475569;
    --silver-500: #64748b;
    --silver-glow: transparent;
    --silver-glow-strong: transparent;

    --gradient-chrome: #0f172a;
    --gradient-silver-badge: #e2e8f0;
    --gradient-silver-btn: #0f172a;
    --gradient-glass: #ffffff;
    --gradient-hero: #f5f7fa;

    --accent-primary: #0f172a;
    --accent-hover: #1e293b;
    --accent-active-border: #0f172a;
    --accent-gold: #b45309;
    --accent-emerald: #059669;
    --accent-cyan: #0284c7;
    --accent-purple: #7e22ce;
    --accent-orange: #c2410c;

    --border-subtle: #cbd5e1;
    --border-medium: #94a3b8;
    --border-chrome: #64748b;
    --border-highlight: #0f172a;

    --shadow-sm: 1px 1px 0px #0f172a;
    --shadow-md: 2px 2px 0px #0f172a;
    --shadow-lg: 3px 3px 0px #0f172a;
    --shadow-chrome: none;

    --syntax-keyword: #7e22ce;
    --syntax-string: #059669;
    --syntax-number: #b45309;
    --syntax-comment: #64748b;
    --syntax-function: #0284c7;
    --syntax-variable: #be185d;
    --syntax-property: #334155;
}