/* ================================================================
   VERTEX KONSOL — DESIGN TOKENS
   Quiet Authority: monokrom kimlik, tek merkezi kaynak.
   Sıra: tokens.css → base.css → layout.css → components.css →
         motion.css → loading.css → modules.css → certificates.css
   ================================================================ */

:root {
    color-scheme: dark;
    /* ---------- Renk: Dark (varsayılan) ---------- */
    --bg-app: #0F0F10;
    --bg-sidebar: #171717;
    --bg-surface: #171717;
    --bg-elevated: #212121;
    --bg-hover: #242424;
    --bg-nav-hover: #1C1C1C;

    --border-subtle: #292929;
    --border-strong: #353535;

    --text-primary: #F5F5F5;
    --text-secondary: #ACACAC;
    --text-muted: #858585;
    --text-disabled: #646464;

    --action-primary: #F5F5F5;
    --action-primary-text: #171717;

    /* Durum renkleri — kontrollü semantik vurgu */
    --status-success: #3FB68B;
    --status-success-soft: rgba(63, 182, 139, 0.12);
    --status-error: #E5654E;
    --status-error-soft: rgba(229, 101, 78, 0.12);
    --status-warning: #D9A03F;
    --status-warning-soft: rgba(217, 160, 63, 0.12);
    --status-info: #7FA8C9;
    --status-info-soft: rgba(127, 168, 201, 0.12);
    --status-processing: var(--text-muted);

    /* ---------- Tipografi ---------- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', Consolas, monospace;

    --fs-page-title: 24px;
    --fs-section-title: 16px;
    --fs-component-title: 14px;
    --fs-body: 14px;
    --fs-secondary: 13px;
    --fs-metadata: 12px;
    --fs-label: 11px;

    --lh-tight: 1.25;
    --lh-normal: 1.5;

    /* ---------- Spacing ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* ---------- Geometri ---------- */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-full: 999px;

    /* Boyutlar */
    --sidebar-width: 256px;
    --topbar-height: 56px;
    --content-max: 1480px;
    --content-pad-x: 32px;

    /* Butonlar / girdiler */
    --control-height: 36px;
    --control-height-lg: 40px;
    --input-height: 42px;
    --touch-target: 44px;

    /* ---------- Hareket ---------- */
    --motion-instant: 80ms;
    --motion-fast: 120ms;
    --motion-normal: 170ms;
    --motion-overlay: 190ms;
    --motion-slow: 220ms;
    --motion-popover: 180ms;

    --motion-popover-close: 120ms;
    --motion-drawer: 220ms;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-standard: cubic-bezier(.2, .8, .2, 1);
    --ease-exit: cubic-bezier(.4, 0, 1, 1);

    /* ---------- Gölge (yalnızca yükseltilmiş yüzeyler) ---------- */
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.32);
    --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4);

    /* Glass — yalnızca popover gibi yükseltilmiş yüzeylerde, düşük opaklık */
    --glass-bg: rgba(33, 33, 33, 0.98);
    --glass-blur: 14px;

    /* Odak */
    --focus-ring: 0 0 0 2px var(--bg-app), 0 0 0 4px var(--action-primary);

    /* Eski değişken uyumluluğu (JS içinde geçen yerler için) */
    --primary-color: var(--text-primary);
    --text-color: var(--text-primary);
    --border-color: var(--border-subtle);
    --border-focus: var(--action-primary);
    --accent-sage: var(--status-success);
    --accent-clay: var(--status-error);
    --accent-slate: var(--status-info);
    --accent-gold: var(--action-primary);
    --transition: background-color var(--motion-normal) var(--ease-standard), color var(--motion-normal) var(--ease-standard), border-color var(--motion-normal) var(--ease-standard);
}

/* ---------- Light ---------- */
html[data-theme="light"] {
    color-scheme: light;
    --bg-app: #F8F9FA;
    --bg-sidebar: #F3F4F6;
    --bg-surface: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-hover: #EFF1F3;
    --bg-nav-hover: #ECEDEF;

    --border-subtle: #E3E5E8;
    --border-strong: #D4D7DB;

    --text-primary: #17191D;
    --text-secondary: #59616C;
    --text-muted: #707782;
    --text-disabled: #9298A1;

    --action-primary: #191B1F;
    --action-primary-text: #FFFFFF;

    --status-success: #2E8B67;
    --status-success-soft: rgba(46, 139, 103, 0.10);
    --status-error: #C2482F;
    --status-error-soft: rgba(194, 72, 47, 0.10);
    --status-warning: #A97A1E;
    --status-warning-soft: rgba(169, 122, 30, 0.10);
    --status-info: #4A7396;
    --status-info-soft: rgba(74, 115, 150, 0.10);

    --shadow-pop: 0 8px 24px rgba(23, 25, 29, 0.10), 0 2px 8px rgba(23, 25, 29, 0.08);
    --shadow-modal: 0 16px 48px rgba(23, 25, 29, 0.16), 0 4px 16px rgba(23, 25, 29, 0.10);

    --glass-bg: rgba(255, 255, 255, 0.94);
}

/* ---------- System: işletim sistemi tercihini izler ---------- */
html[data-theme="system"] {
    color-scheme: light;
    --bg-app: #F8F9FA;
    --bg-sidebar: #F3F4F6;
    --bg-surface: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-hover: #EFF1F3;
    --bg-nav-hover: #ECEDEF;

    --border-subtle: #E3E5E8;
    --border-strong: #D4D7DB;

    --text-primary: #17191D;
    --text-secondary: #59616C;
    --text-muted: #707782;
    --text-disabled: #9298A1;

    --action-primary: #191B1F;
    --action-primary-text: #FFFFFF;

    --status-success: #2E8B67;
    --status-success-soft: rgba(46, 139, 103, 0.10);
    --status-error: #C2482F;
    --status-error-soft: rgba(194, 72, 47, 0.10);
    --status-warning: #A97A1E;
    --status-warning-soft: rgba(169, 122, 30, 0.10);
    --status-info: #4A7396;
    --status-info-soft: rgba(74, 115, 150, 0.10);

    --shadow-pop: 0 8px 24px rgba(23, 25, 29, 0.10), 0 2px 8px rgba(23, 25, 29, 0.08);
    --shadow-modal: 0 16px 48px rgba(23, 25, 29, 0.16), 0 4px 16px rgba(23, 25, 29, 0.10);

    --glass-bg: rgba(255, 255, 255, 0.94);
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        color-scheme: dark;
        --bg-app: #0F0F10;
        --bg-sidebar: #171717;
        --bg-surface: #171717;
        --bg-elevated: #212121;
        --bg-hover: #242424;
    --bg-nav-hover: #1C1C1C;

        --border-subtle: #292929;
        --border-strong: #353535;

        --text-primary: #F5F5F5;
        --text-secondary: #ACACAC;
        --text-muted: #858585;
        --text-disabled: #646464;

        --action-primary: #F5F5F5;
        --action-primary-text: #171717;

        --status-success: #3FB68B;
        --status-success-soft: rgba(63, 182, 139, 0.12);
        --status-error: #E5654E;
        --status-error-soft: rgba(229, 101, 78, 0.12);
        --status-warning: #D9A03F;
        --status-warning-soft: rgba(217, 160, 63, 0.12);
        --status-info: #7FA8C9;
        --status-info-soft: rgba(127, 168, 201, 0.12);

        --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.32);
        --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4);

        --glass-bg: rgba(33, 33, 33, 0.98);
    }
}

/* Tema geçişi: kısa ve kontrollü renk geçişi (agresif fade yok) */
html.theme-anim body,
html.theme-anim .app-sidebar,
html.theme-anim .app-header,
html.theme-anim .panel-card {
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}


:root{--bg-nav-parent:#202020;--bg-nav-child:#292929}
[data-theme="light"]{--bg-nav-parent:#eaeaea;--bg-nav-child:#dedede}
@media(prefers-color-scheme:light){[data-theme="system"]{--bg-nav-parent:#eaeaea;--bg-nav-child:#dedede}}

:root{--toast-success-border:rgba(64,184,116,.55);--toast-success-bg:rgba(34,110,65,.12);--toast-error-border:rgba(230,87,87,.58);--toast-error-bg:rgba(130,35,35,.13)}

/* ---------- Form & Layout Spacing Tokens (A2) ---------- */
:root {
    --form-gap: var(--space-4);           /* form elemanları arası */
    --form-section-gap: var(--space-6);   /* form bölümleri arası */
    --card-pad: var(--space-5);           /* panel-card iç boşluğu */
    --card-gap: var(--space-4);           /* grid-layout paneller arası */
    --list-row-pad: var(--space-3) var(--space-3); /* liste satır padding */
    --icon-btn-size: 32px;                /* ikon buton boyutu */
    --icon-btn-size-sm: 28px;             /* küçük ikon buton */
}