/* variables.css */
:root {
    /* LIGHT MODE (Açık Tema - Varsayılan) */
    --bg-base:        #f4f6f8;
    --bg-surface:     #ffffff;
    --bg-elevated:    #ffffff;
    --bg-hover:       #e9ecef;
    --border:         rgba(0,0,0,0.08);
    --border-mid:     rgba(0,0,0,0.15);
    --text-1:         #1e293b;
    --text-2:         #475569;
    --text-3:         #64748b;
    
    /* Vurgu Renkleri (İki temada da ortak çalışacak şekilde tutuldu) */
    --accent:         #3d7eff;
    --accent-dim:     rgba(61,126,255,0.12);
    --accent-border:  rgba(61,126,255,0.3);
    --danger:         #e8524a;
    --danger-dim:     rgba(232,82,74,0.1);
    --danger-border:  rgba(232,82,74,0.25);
    --warn:           #d4882a;
    --warn-dim:       rgba(212,136,42,0.1);
    --warn-border:    rgba(212,136,42,0.25);
    --success:        #3a9e6f;
    --success-dim:    rgba(58,158,111,0.1);
    --success-border: rgba(58,158,111,0.25);
    --purple:         #8b5cf6;
    --purple-dim:     rgba(139,92,246,0.12);
    --purple-border:  rgba(139,92,246,0.3);
    
    /* Tipografi ve Boyutlar */
    --font-sans:      'DM Sans', sans-serif;
    --font-mono:      'DM Mono', monospace;
    --radius-sm:      6px;
    --radius-md:      10px;
    --radius-lg:      14px;
}

html.dark {
    /* DARK MODE (Koyu Tema) */
    --bg-base:        #0d0f12;
    --bg-surface:     #13161b;
    --bg-elevated:    #1a1e25;
    --bg-hover:       #1f2430;
    --border:         rgba(255,255,255,0.07);
    --border-mid:     rgba(255,255,255,0.12);
    --text-1:         #e8eaf0;
    --text-2:         #8b909e;
    --text-3:         #555a66;
}