/* ─── Brand Design Tokens — Light First (Jobgio / Çerkezköy İş İlanları) ───── */
:root {
    color-scheme: light;

    /* Brand DNA */
    --brand-navy:        #0b2347;
    --brand-navy-light:  #143564;
    --brand-green:       #1ab769;
    --brand-green-hover: #159957;
    --brand-green-muted: rgba(26, 183, 105, 0.08);
    --brand-green-ring:  rgba(26, 183, 105, 0.20);

    /* Canvas */
    --bg:       #f9fbfc;
    --bg-soft:  #f1f5f9;

    /* Panels */
    --panel:    #ffffff;
    --panel-2:  #f8fafc;

    /* Borders */
    --border:        rgba(11, 35, 71, 0.06);
    --border-medium: rgba(11, 35, 71, 0.12);
    --border-strong: rgba(11, 35, 71, 0.20);

    /* Text */
    --text:        #0b2347;
    --text-2:      #1e3a5f;
    --muted:       #4b5563;
    --muted-light: #6b7280;

    /* Status palette */
    --green:  #1ab769;
    --blue:   #2563eb;
    --cyan:   #0891b2;
    --amber:  #d97706;
    --rose:   #e11d48;
    --purple: #7c3aed;

    /* ─── Semantic tier — light/dark uyumlu accent katmanı ──────────────────
       Sürekli kullanılan ton kümeleri için tek-kaynaklı tokenlar. Tema
       değişiminde otomatik adapte olur, hardcoded #abc renk dağınıklığını
       engeller. */
    --success-bright:  #1ab769;            /* aktif/bright success */
    --success-soft:    rgba(26, 183, 105, 0.10);
    --success-ring:    rgba(26, 183, 105, 0.22);
    --info-soft:       rgba(8, 145, 178, 0.05);
    --info-ring:       rgba(8, 145, 178, 0.18);
    --live-dot:        #ef4444;             /* canlı yayın kırmızı noktası */
    --live-dot-halo:   rgba(239, 68, 68, 0.18);
    --surface-tint:    rgba(11, 35, 71, 0.06); /* live-pill, hafif chip arka planı */

    /* Interaction */
    --focus-ring: #1ab769;

    /* Brand gradients */
    --gradient-brand:      linear-gradient(135deg, #1ab769 0%, #0891b2 100%);
    --gradient-brand-v:    linear-gradient(180deg, #1ab769 0%, #0891b2 100%);
    --gradient-brand-soft: linear-gradient(135deg, var(--success-soft) 0%, var(--info-soft) 100%);
    --gradient-brand-text: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-hover) 45%, var(--cyan) 100%);
    --gradient-featured:   linear-gradient(180deg, #d97706, #e11d48);

    /* Shadows — biraz daha derinlik + nazik emerald ring (premium feel) */
    --shadow-card:  0 1px 2px rgba(11, 35, 71, 0.04), 0 6px 18px rgba(11, 35, 71, 0.06);
    --shadow-raise: 0 6px 20px rgba(11, 35, 71, 0.08), 0 1px 3px rgba(11, 35, 71, 0.04);
    --shadow-float: 0 14px 38px rgba(11, 35, 71, 0.10), 0 2px 8px rgba(11, 35, 71, 0.05);
}

body {
    /* Dark tema'daki radial mesh felsefesinin light karşılığı: çok hafif
       emerald + cyan ışıltı, baskın değil ama yüzeye derinlik katıyor. */
    background:
        radial-gradient(ellipse at 8% 0%,  rgba(26, 183, 105, 0.045), transparent 38%),
        radial-gradient(ellipse at 92% 6%, rgba(8, 145, 178, 0.035),  transparent 36%),
        linear-gradient(180deg, #f1f5f9 0%, #f9fbfc 35%, #ffffff 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* ─── Dark Theme Override — Luxury Midnight-Cyber ───────────────────────────── */
html[data-theme="dark"] {
    color-scheme: dark;

    --bg:       #030914;
    --bg-soft:  #070d19;
    --panel:    #0b1528;
    --panel-2:  #0f1b35;
    
    --brand-navy:        #0b1528;
    --brand-navy-light:  #0f2244;
    --brand-green:       #10b981;
    --brand-green-hover: #34d399;
    --brand-green-muted: rgba(16, 185, 129, 0.10);
    --brand-green-ring:  rgba(16, 185, 129, 0.24);

    --border:        rgba(148, 163, 184, 0.08);
    --border-medium: rgba(148, 163, 184, 0.14);
    --border-strong: rgba(148, 163, 184, 0.22);
    
    --text:        #f8fafc;
    --text-2:      #cbd5e1;
    --muted:       #a3b3cc;
    --muted-light: #94a3b8;
    
    --green:  #10b981;
    --blue:   #3b82f6;
    --cyan:   #06b6d4;
    --amber:  #f59e0b;
    --rose:   #f43f5e;
    --purple: #a78bfa;
    --focus-ring: #10b981;

    /* Semantic tier — dark karşılıkları (gece tonunda daha parlak emerald) */
    --success-bright:  #34d399;
    --success-soft:    rgba(16, 185, 129, 0.10);
    --success-ring:    rgba(16, 185, 129, 0.24);
    --info-soft:       rgba(14, 165, 233, 0.06);
    --info-ring:       rgba(14, 165, 233, 0.20);
    --live-dot:        #f87171;
    --live-dot-halo:   rgba(248, 113, 113, 0.22);
    --surface-tint:    rgba(255, 255, 255, 0.04);

    --gradient-brand:      linear-gradient(135deg, #10b981 0%, #0ea5e9 100%);
    --gradient-brand-v:    linear-gradient(180deg, #10b981 0%, #0ea5e9 100%);
    --gradient-brand-soft: linear-gradient(135deg, var(--success-soft) 0%, var(--info-soft) 100%);
    --gradient-brand-text: linear-gradient(135deg, #34d399 0%, #10b981 50%, #06b6d4 100%);

    --shadow-card:  0 8px 20px rgba(0, 0, 0, 0.28);
    --shadow-raise: 0 16px 36px rgba(0, 0, 0, 0.38);
    --shadow-float: 0 20px 48px rgba(0, 0, 0, 0.48);
}

html[data-theme="dark"] body {
    /* Dark tema'da mesh'i biraz daha zengin ve geniş yay — premium "midnight cyber"
       hissi. attachment:fixed ile scroll'da kayma yok. */
    background:
        radial-gradient(ellipse at 10% 0%,  rgba(16, 185, 129, 0.06), transparent 45%),
        radial-gradient(ellipse at 90% 8%,  rgba(14, 165, 233, 0.08), transparent 40%),
        radial-gradient(ellipse at 50% 100%, rgba(124, 58, 237, 0.05), transparent 55%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
    background-attachment: fixed;
}