/* ============================================
   BEF DAYS — CSS Custom Properties (Tema)
   ============================================ */

:root {
    /* ─── RENKLER (Warm Stone preset) ────────── */
    --color-bg-page:        #FAFAF8;
    --color-bg-card:        #FFFFFF;
    --color-bg-sidebar:     #F5F4F1;
    --color-bg-hover:       #F0EFEC;
    --color-bg-active:      #E8E6E1;
    --color-bg-input:       #FFFFFF;
    --color-bg-overlay:     rgba(0, 0, 0, 0.4);

    --color-text-primary:   #1A1A1A;
    --color-text-secondary: #6B6B6B;
    --color-text-tertiary:  #9B9B9B;
    --color-text-placeholder: #BCBCBC;
    --color-text-inverse:   #FFFFFF;

    --color-border:         #E8E6E1;
    --color-border-subtle:  #F0EFEC;
    --color-border-focus:   #1A1A1A;

    --color-accent:         #1A1A1A;
    --color-accent-hover:   #333333;
    --color-accent-light:   #F5F4F1;
    --color-accent-secondary: #8B7E6A;

    --color-success:        #3D8B5E;
    --color-success-bg:     #f0faf4;
    --color-warning:        #C4963C;
    --color-warning-bg:     #fefaed;
    --color-error:          #C75450;
    --color-error-bg:       #fef2f2;
    --color-info:           #5B7FA5;
    --color-info-bg:        #f0f5fa;

    /* Kategori renkleri */
    --color-cat-national:   #C75450;
    --color-cat-religious:  #8B6DB0;
    --color-cat-world:      #5B7FA5;
    --color-cat-sectoral:   #3D8B5E;
    --color-cat-brand:      #C4963C;
    --color-cat-social:     #D4789C;

    /* ─── SPACING ────────────────────────────── */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   12px;
    --space-lg:   16px;
    --space-xl:   24px;
    --space-2xl:  32px;
    --space-3xl:  48px;
    --space-4xl:  64px;

    /* ─── LAYOUT ─────────────────────────────── */
    --sidebar-width:        256px;
    --sidebar-collapsed:    64px;
    --header-height:        56px;
    --content-max-width:    1280px;

    /* ─── BORDER / RADIUS ────────────────────── */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ─── SHADOW ─────────────────────────────── */
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-focus: 0 0 0 3px rgba(26, 26, 26, 0.12);

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

    --text-display:   600 32px/40px var(--font-family);
    --text-h1:        600 24px/32px var(--font-family);
    --text-h2:        600 20px/28px var(--font-family);
    --text-h3:        500 16px/24px var(--font-family);
    --text-body:      400 14px/22px var(--font-family);
    --text-sm:        400 13px/20px var(--font-family);
    --text-caption:   400 12px/16px var(--font-family);
    --text-label:     500 12px/16px var(--font-family);

    /* ─── TRANSITION ─────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow:   300ms ease;

    /* ─── Z-INDEX ────────────────────────────── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-modal:     300;
    --z-toast:     400;
    --z-tooltip:   500;

    /* ─── INPUT ──────────────────────────────── */
    --input-height:     40px;
    --input-height-sm:  32px;
    --input-height-lg:  48px;
    --button-height:    40px;
    --button-height-sm: 32px;
    --button-height-lg: 48px;
    --table-row-height: 52px;
}

/* ─── TEMA PARSETLERİ ──────────────────────── */
[data-theme="cool-slate"] {
    --color-bg-page:     #F8F9FB;
    --color-bg-sidebar:  #F1F3F6;
    --color-bg-hover:    #EBEDF1;
    --color-bg-active:   #DFE2E8;
    --color-border:      #DFE2E8;
    --color-border-subtle: #EBEDF1;
    --color-accent:      #334155;
    --color-accent-hover:#475569;
    --color-accent-light:#F1F3F6;
}

[data-theme="soft-sand"] {
    --color-bg-page:     #FAF9F6;
    --color-bg-sidebar:  #F5F3EE;
    --color-bg-hover:    #EFECE5;
    --color-bg-active:   #E5E1D8;
    --color-border:      #E5E1D8;
    --color-border-subtle: #EFECE5;
    --color-accent:      #92714A;
    --color-accent-hover:#7D6240;
    --color-accent-light:#F5F3EE;
}

[data-theme="pearl"] {
    --color-bg-page:     #FAFAFA;
    --color-bg-sidebar:  #F5F5F5;
    --color-bg-hover:    #EEEEEE;
    --color-bg-active:   #E0E0E0;
    --color-border:      #E0E0E0;
    --color-border-subtle: #EEEEEE;
    --color-accent:      #4A4A4A;
    --color-accent-hover:#333333;
    --color-accent-light:#F5F5F5;
}

[data-theme="ivory"] {
    --color-bg-page:     #FDFDF5;
    --color-bg-sidebar:  #F7F6EE;
    --color-bg-hover:    #F0EFE5;
    --color-bg-active:   #E6E4D8;
    --color-border:      #E6E4D8;
    --color-border-subtle: #F0EFE5;
    --color-accent:      #6B5B3E;
    --color-accent-hover:#5A4D34;
    --color-accent-light:#F7F6EE;
}

[data-theme="midnight"] {
    --color-bg-page:     #F5F6FA;
    --color-bg-sidebar:  #ECEEF5;
    --color-bg-hover:    #E3E5F0;
    --color-bg-active:   #D5D8E8;
    --color-border:      #D5D8E8;
    --color-border-subtle: #E3E5F0;
    --color-accent:      #2D3A6E;
    --color-accent-hover:#1E2A5E;
    --color-accent-light:#ECEEF5;
}

[data-theme="rose"] {
    --color-bg-page:     #FDF8F8;
    --color-bg-sidebar:  #F8F0F0;
    --color-bg-hover:    #F2E6E6;
    --color-bg-active:   #E8D8D8;
    --color-border:      #E8D8D8;
    --color-border-subtle: #F2E6E6;
    --color-accent:      #9E4B5E;
    --color-accent-hover:#874050;
    --color-accent-light:#F8F0F0;
}

[data-theme="ocean"] {
    --color-bg-page:     #F4F9FA;
    --color-bg-sidebar:  #E8F2F4;
    --color-bg-hover:    #DCEAED;
    --color-bg-active:   #CCDFE3;
    --color-border:      #CCDFE3;
    --color-border-subtle: #DCEAED;
    --color-accent:      #1A6B7A;
    --color-accent-hover:#145A67;
    --color-accent-light:#E8F2F4;
}

[data-theme="forest"] {
    --color-bg-page:     #F5FAF5;
    --color-bg-sidebar:  #EAF3EA;
    --color-bg-hover:    #DFECDF;
    --color-bg-active:   #D0E2D0;
    --color-border:      #D0E2D0;
    --color-border-subtle: #DFECDF;
    --color-accent:      #2D6A3F;
    --color-accent-hover:#245834;
    --color-accent-light:#EAF3EA;
}