/* ============================================================================
   identUP Pass — Design Tokens
   Light / Dark / System (prefers-color-scheme) destekli
   Marka: #00DB6B (logodan)
   ============================================================================ */

:root {
    /* ── Marka renkleri (her temada sabit) ─────────────────────────────── */
    --brand-primary:        #00DB6B;
    --brand-primary-hover:  #00C45F;
    --brand-primary-dark:   #00A050;
    --brand-primary-light:  rgba(0, 219, 107, 0.12);
    --brand-primary-lighter:rgba(0, 219, 107, 0.06);
    --brand-primary-text:   #003D1E;
    --brand-secondary:      #0D1F16;
    --brand-secondary-mid:  #1A3D28;

    /* ── Tipografi ─────────────────────────────────────────────────────── */
    --font-primary:   "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-mono:      "JetBrains Mono", "Fira Code", "Consolas", monospace;

    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   16px;
    --fs-xl:   18px;
    --fs-2xl:  22px;
    --fs-3xl:  28px;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight:   1.2;
    --lh-base:    1.5;
    --lh-relaxed: 1.7;

    /* ── Spacing scale (4px tabanlı) ────────────────────────────────────── */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* ── Radius scale ──────────────────────────────────────────────────── */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ── Transition ────────────────────────────────────────────────────── */
    --tr-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --tr-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --tr-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index scale ─────────────────────────────────────────────────── */
    --z-dropdown:  1000;
    --z-sticky:    1020;
    --z-fixed:     1030;
    --z-modal-bg:  1040;
    --z-modal:     1050;
    --z-popover:   1060;
    --z-tooltip:   1070;
    --z-toast:     1080;
    --z-loader:    1090;

    /* ── Layout dimensions ─────────────────────────────────────────────── */
    --sidebar-w:          260px;
    --sidebar-w-mini:     72px;
    --topbar-h:           64px;
    --page-banner-h:      auto;
}

/* ============================================================================
   LIGHT MODE (varsayılan)
   ============================================================================ */
:root,
[data-theme="light"] {
    color-scheme: light;

    /* Surface */
    --color-bg:             #F4F7F5;
    --color-surface:        #FFFFFF;
    --color-surface-2:      #F8FBF9;
    --color-surface-hover:  #F0F5F2;
    --color-overlay:        rgba(10, 22, 14, 0.5);

    /* Border */
    --color-border:         #DDE9E1;
    --color-border-subtle:  #ECF3EF;
    --color-border-strong:  #B8D2C3;

    /* Text */
    --color-text:           #0A160E;
    --color-text-secondary: #3D5C48;
    --color-text-muted:     #7A9C87;
    --color-text-inverse:   #FFFFFF;

    /* Sidebar */
    --sidebar-bg:           #0A1410;
    --sidebar-bg-hover:     #131E18;
    --sidebar-text:         #6B8C76;
    --sidebar-text-active:  #FFFFFF;
    --sidebar-section:      #3D5C48;
    --sidebar-active-bg:    rgba(0, 219, 107, 0.14);
    --sidebar-active-border:#00DB6B;
    --sidebar-active-text:  #00DB6B;
    --sidebar-divider:      rgba(255, 255, 255, 0.05);
    --sidebar-search-bg:    rgba(255, 255, 255, 0.04);
    --sidebar-search-text:  #C8DDD0;

    /* Topbar */
    --topbar-bg:            #FFFFFF;
    --topbar-border:        #E3EDE7;

    /* Card */
    --card-bg:              #FFFFFF;
    --card-border:          #ECF3EF;
    --card-shadow:          0 1px 2px rgba(10, 50, 25, 0.04), 0 1px 3px rgba(10, 50, 25, 0.06);
    --card-shadow-hover:    0 4px 12px rgba(0, 219, 107, 0.10), 0 2px 6px rgba(10, 50, 25, 0.06);

    /* Input */
    --input-bg:             #FFFFFF;
    --input-bg-hover:       #F8FBF9;
    --input-border:         #D8E5DC;
    --input-border-hover:   #B0CCBC;
    --input-border-focus:   #00DB6B;
    --input-text:           #0A160E;
    --input-placeholder:    #9CB2A4;

    /* Code block — beyaz zemin / koyu kod */
    --code-block-bg:        #FFFFFF;
    --code-block-text:      #0A160E;
    --code-block-border:    #DDE9E1;

    /* Text selection — opak olmalı (bkz. base.css ::selection) */
    --selection-bg:         #A9F2CE;
    --selection-text:       #052E1B;

    /* Semantic */
    --color-success:        #00A050;
    --color-success-bg:     #E6FBF0;
    --color-success-border: #B7EDD0;
    --color-warning:        #D97706;
    --color-warning-bg:     #FFFBEB;
    --color-warning-border: #FDE68A;
    --color-danger:         #DC2626;
    --color-danger-bg:      #FEF2F2;
    --color-danger-border:  #FCA5A5;
    --color-info:           #0284C7;
    --color-info-bg:        #F0F9FF;
    --color-info-border:    #BAE6FD;
    /* Nötr/ikincil — btn-secondary, bg-secondary vb. */
    --color-secondary:      #55705F;
    --color-secondary-hover:#3D5C48;
    --color-secondary-text: #FFFFFF;

    /* Scrollbar */
    --scrollbar-thumb:      #C8D5CD;
    --scrollbar-track:      transparent;
}

/* ============================================================================
   DARK MODE
   ============================================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    --color-bg:             #060B08;
    --color-surface:        #0D1612;
    --color-surface-2:      #131F18;
    --color-surface-hover:  #182B20;
    --color-overlay:        rgba(0, 0, 0, 0.65);

    --color-border:         #1E2E25;
    --color-border-subtle:  #131F18;
    --color-border-strong:  #2D453A;

    --color-text:           #E8F5EC;
    --color-text-secondary: #9EC2AC;
    --color-text-muted:     #5A7565;
    --color-text-inverse:   #060E09;

    --sidebar-bg:           #04090A;
    --sidebar-bg-hover:     #0A1210;
    --sidebar-text:         #6B8C76;
    --sidebar-text-active:  #E8F5EC;
    --sidebar-section:      #3D5C48;
    --sidebar-active-bg:    rgba(0, 219, 107, 0.12);
    --sidebar-active-border:#00DB6B;
    --sidebar-active-text:  #00DB6B;
    --sidebar-divider:      rgba(255, 255, 255, 0.04);
    --sidebar-search-bg:    rgba(255, 255, 255, 0.03);
    --sidebar-search-text:  #B0CCBC;

    --topbar-bg:            #0D1612;
    --topbar-border:        #1E2E25;

    --card-bg:              #0D1612;
    --card-border:          #1E2E25;
    --card-shadow:          0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.40);
    --card-shadow-hover:    0 4px 16px rgba(0, 219, 107, 0.08), 0 2px 6px rgba(0, 0, 0, 0.45);

    --input-bg:             #0D1612;
    --input-bg-hover:       #131F18;
    --input-border:         #2D453A;
    --input-border-hover:   #3D6148;
    --input-border-focus:   #00DB6B;
    --input-text:           #E8F5EC;
    --input-placeholder:    #5A7565;

    /* Code block — koyu zemin / açık kod */
    --code-block-bg:        #060B08;
    --code-block-text:      #E8F5EC;
    --code-block-border:    #1E2E25;

    /* Text selection — opak olmalı (bkz. base.css ::selection) */
    --selection-bg:         #0B7A47;
    --selection-text:       #F2FFF8;

    --color-success:        #00DB6B;
    --color-success-bg:     rgba(0, 219, 107, 0.10);
    --color-success-border: rgba(0, 219, 107, 0.30);
    --color-warning:        #F59E0B;
    --color-warning-bg:     rgba(245, 158, 11, 0.10);
    --color-warning-border: rgba(245, 158, 11, 0.30);
    --color-danger:         #EF4444;
    --color-danger-bg:      rgba(239, 68, 68, 0.10);
    --color-danger-border:  rgba(239, 68, 68, 0.30);
    --color-info:           #38BDF8;
    --color-info-bg:        rgba(56, 189, 248, 0.10);
    --color-info-border:    rgba(56, 189, 248, 0.30);
    /* Nötr/ikincil — btn-secondary, bg-secondary vb. */
    --color-secondary:      #335642;
    --color-secondary-hover:#3F6650;
    --color-secondary-text: #D6E7DC;

    --scrollbar-thumb:      #2D453A;
    --scrollbar-track:      transparent;
}

/* ============================================================================
   SYSTEM MODE — kullanıcı seçimi `auto` ise OS tercihini takip et
   ============================================================================ */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        color-scheme: dark;

        --color-bg:             #060B08;
        --color-surface:        #0D1612;
        --color-surface-2:      #131F18;
        --color-surface-hover:  #182B20;
        --color-overlay:        rgba(0, 0, 0, 0.65);

        --color-border:         #1E2E25;
        --color-border-subtle:  #131F18;
        --color-border-strong:  #2D453A;

        --color-text:           #E8F5EC;
        --color-text-secondary: #9EC2AC;
        --color-text-muted:     #5A7565;
        --color-text-inverse:   #060E09;

        --sidebar-bg:           #04090A;
        --sidebar-bg-hover:     #0A1210;
        --sidebar-text:         #6B8C76;
        --sidebar-text-active:  #E8F5EC;
        --sidebar-section:      #3D5C48;
        --sidebar-active-bg:    rgba(0, 219, 107, 0.12);
        --sidebar-active-border:#00DB6B;
        --sidebar-active-text:  #00DB6B;
        --sidebar-divider:      rgba(255, 255, 255, 0.04);
        --sidebar-search-bg:    rgba(255, 255, 255, 0.03);
        --sidebar-search-text:  #B0CCBC;

        --topbar-bg:            #0D1612;
        --topbar-border:        #1E2E25;

        --card-bg:              #0D1612;
        --card-border:          #1E2E25;
        --card-shadow:          0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.40);
        --card-shadow-hover:    0 4px 16px rgba(0, 219, 107, 0.08), 0 2px 6px rgba(0, 0, 0, 0.45);

        --input-bg:             #0D1612;
        --input-bg-hover:       #131F18;
        --input-border:         #2D453A;
        --input-border-hover:   #3D6148;
        --input-border-focus:   #00DB6B;
        --input-text:           #E8F5EC;
        --input-placeholder:    #5A7565;

        /* Code block — koyu zemin / açık kod */
        --code-block-bg:        #060B08;
        --code-block-text:      #E8F5EC;
        --code-block-border:    #1E2E25;

        /* Text selection — opak olmalı (bkz. base.css ::selection) */
        --selection-bg:         #0B7A47;
        --selection-text:       #F2FFF8;

        --color-success:        #00DB6B;
        --color-success-bg:     rgba(0, 219, 107, 0.10);
        --color-success-border: rgba(0, 219, 107, 0.30);
        --color-warning:        #F59E0B;
        --color-warning-bg:     rgba(245, 158, 11, 0.10);
        --color-warning-border: rgba(245, 158, 11, 0.30);
        --color-danger:         #EF4444;
        --color-danger-bg:      rgba(239, 68, 68, 0.10);
        --color-danger-border:  rgba(239, 68, 68, 0.30);
        --color-info:           #38BDF8;
        --color-info-bg:        rgba(56, 189, 248, 0.10);
        --color-info-border:    rgba(56, 189, 248, 0.30);
        /* Nötr/ikincil — btn-secondary, bg-secondary vb. */
        --color-secondary:      #335642;
        --color-secondary-hover:#3F6650;
        --color-secondary-text: #D6E7DC;

        --scrollbar-thumb:      #2D453A;
        --scrollbar-track:      transparent;
    }
}