/*
Theme Name: DND App Theme
Author: Web Samurai
Version: 1.0
*/

/* ==========================================================================
   THEME TOKENS (GLOBAL DESIGN SYSTEM)
   ==========================================================================
   Тут только:
   - CSS variables
   - базовая тема (light/dark)
   - никаких layout / UI
*/

:root {
    --font-main:  -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-serif: 'Source Serif 4', Georgia, serif;
    --font-geist: 'Geist', sans-serif;
    --font-mono:  'Geist Mono', 'SF Mono', monospace;

    /* COLORS — значення з прототипу shared.css */
    --bg-body:         oklch(0.985 0.004 80);
    --bg-sidebar:      oklch(0.995 0.003 80);
    --bg-hover:        oklch(0.955 0.006 80);
    --bg-active:       oklch(0.94 0.012 285);
    --bg-block:        oklch(0.975 0.003 80);
    --bg-block-accent: oklch(0.98 0.015 80);
    --bg-block-grey:   oklch(0.97 0.002 80);
    --bg-block-fiolet: oklch(0.96 0.02 290);
    --bg-sunken:       oklch(0.965 0.005 80);
    --bd-border:       oklch(0.91 0.005 80);
    --line-soft:       oklch(0.94 0.004 80);

    --text-main:   oklch(0.22 0.015 280);
    --text-soft:   oklch(0.42 0.012 280);
    --text-muted:  oklch(0.58 0.01 280);
    --text-accent: oklch(0.45 0.12 290);
    --text-link: oklch(0.50 0.16 265);

    --accent:      oklch(0.45 0.12 290);
    --accent-soft: oklch(0.55 0.09 290);
    --accent-bg:   oklch(0.96 0.02 290);

    --divider-color: rgba(55, 53, 47, 0.08);

    /* SCHOOL COLORS */
    --school-necro: oklch(0.45 0.10 310);
    --school-evoc:  oklch(0.55 0.14 40);
    --school-abju:  oklch(0.50 0.10 230);
    --school-conj:  oklch(0.52 0.11 150);
    --school-divi:  oklch(0.55 0.10 85);
    --school-ench:  oklch(0.55 0.12 340);
    --school-illu:  oklch(0.55 0.11 290);
    --school-tran:  oklch(0.59 0.21 20.49);

    /* RARITY COLORS */
    --r-common:    oklch(0.55 0.01 280);
    --r-uncommon:  oklch(0.52 0.12 150);
    --r-rare:      oklch(0.52 0.12 240);
    --r-veryrare:  oklch(0.50 0.14 290);
    --r-legendary: oklch(0.55 0.14 60);
    --r-artifact:  oklch(0.50 0.14 30);

    /* SHADOWS */
    --shadow-card:   0 2px 8px rgba(0,0,0,0.04), 0 0px 2px rgba(0,0,0,0.02);
    --shadow-hover:  0 8px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.03);
    --shadow-pane:   2px 0 12px rgba(0,0,0,0.03);
    --shadow-active: 0 0 0 2px rgba(224, 62, 62, 0.15);
    --shadow-pop:    0 20px 60px -20px oklch(0.2 0.03 280 / 0.18), 0 2px 6px -2px oklch(0.2 0.03 280 / 0.08);

    /* RADIUS */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* TRANSITIONS */
    --transition-fast: 0.2s ease;

    /* AMBIENT */
    --ambient-opacity: 0.055;
    --ambient-filter:  grayscale(0.3) contrast(0.9);
    --scrim:           oklch(0.2 0.02 280 / 0.35);

    /* ALIASES — сумісність з прототипом shared.css */
    --bg:          var(--bg-body);
    --bg-panel:    var(--bg-sidebar);
    --bg-selected: var(--bg-active);
    --line:        var(--bd-border);
    --ink:         var(--text-main);
    --ink-soft:    var(--text-soft);
    --ink-mute:    var(--text-muted);
}

/* ==========================================================================
   DARK THEME — стилізація під Claude (м'який теплий сірий)
   ========================================================================== */
html[data-theme="dark"] {
    /* --- БАЗОВІ ФОНИ --- 
       Hue 70 дає той самий приємний теплий сірий підтон, Chroma дуже низька */
    --bg-body:         oklch(0.18 0.005 70); /* #1a1918 */
    --bg-sidebar:      oklch(0.22 0.005 70); /* #242322 */
    --bg-hover:        oklch(0.24 0.005 70);
    --bg-active:       oklch(0.26 0.008 70);
    
    /* Фони карток та блоків з кодом */
    --bg-block:        oklch(0.26 0.005 70); /* #2c2a29 */
    --bg-block-accent: oklch(0.28 0.008 70);
    --bg-block-grey:   oklch(0.26 0.005 70);
    --bg-block-fiolet: oklch(0.26 0.01 290); /* Залишив холоднуватим для специфічних блоків */
    --bg-sunken:       oklch(0.15 0.005 70); /* Для внутрішніх інпутів */

    /* --- ЛІНІЇ ТА БОРДЕРИ --- */
    --bd-border:       oklch(0.32 0.005 70); /* #353432 */
    --line-soft:       oklch(0.28 0.005 70);

    /* --- ТЕКСТИ --- 
       М'які білі та сірі кольори без синяви */
    --text-main:       oklch(0.92 0.005 70 / 0.9); /* #e5e4e2 */
    --text-soft:       oklch(0.80 0.005 70);
    --text-muted:      oklch(0.62 0.005 70); /* #8b8986 */
    
    /* --- АКЦЕНТИ --- 
       Теракотово-оранжевий колір з інтерфейсу Claude */
    --text-accent:     oklch(0.68 0.12 45);  /* #d97757 */
    --text-link:       oklch(0.70 0.10 45);

    --accent:          oklch(0.68 0.12 45);
    --accent-soft:     oklch(0.60 0.08 45);
    --accent-bg:       oklch(0.28 0.04 45);

    --divider-color:   rgba(255,255,255,0.04);

    /* ==========================================================================
       D&D СПЕЦИФІЧНІ КОЛЬОРИ (залишені без змін)
       ========================================================================== */
    --school-necro: oklch(0.75 0.12 310);
    --school-evoc:  oklch(0.78 0.15 40);
    --school-abju:  oklch(0.78 0.12 230);
    --school-conj:  oklch(0.78 0.13 150);
    --school-divi:  oklch(0.82 0.12 85);
    --school-ench:  oklch(0.78 0.13 340);
    --school-illu:  oklch(0.78 0.12 290);
    --school-tran:  oklch(0.59 0.21 20.49);

    --r-common:    oklch(0.72 0.015 280);
    --r-uncommon:  oklch(0.78 0.14 150);
    --r-rare:      oklch(0.78 0.13 240);
    --r-veryrare:  oklch(0.78 0.14 290);
    --r-legendary: oklch(0.80 0.14 60);
    --r-artifact:  oklch(0.78 0.14 30);

    /* Тіні адаптовано під тепліший, менш насичений фон */
    --shadow-card:   0 2px 8px rgba(0,0,0,0.35);
    --shadow-hover:  0 8px 16px rgba(0,0,0,0.5);
    --shadow-pane:   2px 0 12px rgba(0,0,0,0.4);
    --shadow-active: 0 0 0 2px oklch(0.68 0.12 45 / 0.3); /* Акцентна тінь */
    --shadow-pop:    0 24px 70px -20px oklch(0.18 0.005 70 / 0.8), 0 2px 6px -2px oklch(0.18 0.005 70 / 0.6);

    --ambient-opacity: 0.06;
    --ambient-filter:  grayscale(0.6) contrast(0.9) brightness(1.4);
    --scrim:           oklch(0.15 0.005 70 / 0.75);
}

/* ==========================================================================
   THEME TRANSITION
   ========================================================================== */
html { transition: background-color .25s ease; }
body { transition: background-color .25s ease, color .25s ease; }

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */
::-webkit-scrollbar              { width: 8px; height: 8px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(0,0,0,0.25); border-radius: 999px; transition: background 0.2s ease; }
::-webkit-scrollbar-thumb:hover  { background: rgba(0,0,0,0.4); }
::-webkit-scrollbar-thumb:active { background: rgba(0,0,0,0.5); }
*                                { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.3) transparent; }

html[data-theme="dark"] ::-webkit-scrollbar-thumb       { background: rgba(255,255,255,0.2); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }
html[data-theme="dark"]                                  { scrollbar-color: rgba(255,255,255,0.25) transparent; }

/* ==========================================================================
   BASE
   ========================================================================== */
a { color: var(--text-link); }