/* =========================================================
   ТЕМА: SILICONE (Стиль Кремній та Фосфор)
   ========================================================= */

/* Спільні змінні для теми Silicone незалежно від освітлення */
:root[data-theme="silicone"] {
    --font-main: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    --transition-speed: 0.3s;
}

/* 1. SILICONE: СВІТЛА ВЕРСІЯ (Автоматично, якщо система світла) */
@media (prefers-color-scheme: light) {
    :root[data-theme="silicone"] {
        --bg-base: #F4F4F0;       /* Креслярський папір */
        --bg-surface: #EAEAEA;
        --border: #CCCCCC;
        --text-main: #1D1D1F;
        --text-dim: #666666;
        
        /* Кольори синтаксису / UI */
        --color-amber: #D95A00;   /* Темніший для контрасту на білому */
        --color-green: #007A66;
        --bg-active: rgba(0, 122, 102, 0.1);
        
        /* Логотип в UI адаптується до кольорів теми */
        --logo-msa: var(--color-amber);
        --logo-ma: var(--color-green);
    }
}

/* 2. SILICONE: ТЕМНА ВЕРСІЯ (Автоматично, якщо система темна) */
@media (prefers-color-scheme: dark) {
    :root[data-theme="silicone"] {
        --bg-base: #0A0A0B;       /* Глибокий термінал */
        --bg-surface: #141415;
        --border: #2A2A2D;
        --text-main: #E2E2E2;
        --text-dim: #7A7A7F;
        
        /* Кольори синтаксису / UI */
        --color-amber: #FFB000;   /* Яскравий фосфор */
        --color-green: #00E559;
        --bg-active: rgba(0, 229, 89, 0.1);
        
        /* Логотип в UI адаптується до кольорів теми */
        --logo-msa: var(--color-amber);
        --logo-ma: var(--color-green);
    }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', 'Roboto Mono', monospace;
    background-color: var(--bg-base);
    color: var(--text-main);
    height: 100vh; display: flex; flex-direction: column; overflow: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s, color 0.3s;
}

header {
    display: flex; justify-content: space-between; align-items: center;
    height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border);
    background-color: var(--bg-surface);
}

.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14px; letter-spacing: 1px; }
.logo-svg { width: 22px; height: 22px; }

.actions { display: flex; gap: 16px; align-items: center; }
.btn {
    background: transparent; border: 1px solid transparent; color: var(--text-dim);
    font-family: inherit; font-size: 12px; cursor: pointer; padding: 4px 8px; transition: 0.1s;
}
.btn:hover { color: var(--text-main); border-color: var(--border); }
.btn.outline-green { border-color: var(--color-green); color: var(--color-green); }
.btn.outline-green:hover { background: var(--bg-active); }

main { display: flex; flex: 1; height: calc(100vh - 44px); }
aside { width: 260px; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg-surface); }
.panel-header { font-size: 11px; color: var(--text-dim); padding: 12px 16px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border); }
.file-tree { list-style: none; padding: 8px 0; overflow-y: auto; flex: 1; }
.file-item { padding: 6px 16px; font-size: 13px; cursor: pointer; color: var(--text-dim); }
.file-item:hover { color: var(--text-main); }
.file-item.active { background: var(--bg-active); color: var(--color-green); border-left: 2px solid var(--color-green); padding-left: 14px; }

.editor-container { flex: 1; display: flex; flex-direction: column; background: var(--bg-base); }
.editor-tabs { display: flex; border-bottom: 1px solid var(--border); background-color: var(--bg-surface); }
.tab { padding: 8px 24px; font-size: 13px; border-right: 1px solid var(--border); cursor: pointer; color: var(--text-dim); }
.tab.active { background-color: var(--bg-base); color: var(--text-main); border-top: 2px solid var(--color-amber); }

textarea.editor-textarea {
    flex: 1; background: transparent; border: none; outline: none; resize: none;
    padding: 24px; color: var(--text-main); font-family: inherit; font-size: 14px; line-height: 1.6;
}

/* Оновлення стилю для логотипа, щоб він брав кольори з теми */
.logo-rhombus { fill: none; stroke: var(--logo-msa); stroke-width: 6; stroke-linejoin: bevel; transition: stroke var(--transition-speed); }
.logo-square { fill: none; stroke: var(--logo-ma); stroke-width: 6; stroke-linejoin: bevel; transition: stroke var(--transition-speed); }