/* ============================================================
   RateTheWork Design Tokens
   Carbon / Cobalt / Lime — MVP Design System
   Kaynak: DesignSync 019df908-… tokens/colors.css + tokens/themes.css
   (rampalar ve semantik değerler prototiple BİREBİR — webapp.css
   :root bloğuyla aynı değerler, --ds-* ad alanında)
   ============================================================ */

/* Katman sırası burada tescil edilir.
   CSS'te katman sırasını İLK karşılaşılan `@layer` belirler. tokens.css
   ilk yüklenen stylesheet olduğu için doğru sıra burada sabitlenmezse
   sırayı App.razor'daki <link> dizilimi belirler — link'ler yeniden
   sıralanınca `utilities` sona düşmeyebilir ve tüm Tailwind utility'leri
   sessizce ölür. Bu satır sırayı dosya diziliminden BAĞIMSIZ kılar. */
@layer properties, theme, base, components, utilities;

/* ---- Yazı aileleri — TEK KAYNAK ----
   Tailwind teması (--font-sans/--font-mono), webapp.css (--font/--mono, landing kapsamı),
   preloader, bilgi sayfaları ve JS'in bastığı satır içi stil bu iki değişkeni okur. Aile
   başka bir dosyada literal yazılmaz; yazılırsa dört ayrı yığın birbirinden kayar (ölçüldü:
   yedek fontları farklı dört yığın vardı). Bekçi: TypographySingleSourceTests.
   offline.html bilinçli istisnadır: ağ yokken Google Fonts inmez, sistem yığını kullanır. */
:root {
    --ds-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ds-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

:root {
    /* ---- Carbon (Neutral — warm grey, DS rampası) ---- */
    --ds-carbon-0:   #FFFFFF;
    --ds-carbon-25:  #FAFAF9;
    --ds-carbon-50:  #F4F4F2;
    --ds-carbon-100: #E8E8E4;
    --ds-carbon-200: #D5D5CF;
    --ds-carbon-300: #B5B4AC;
    --ds-carbon-400: #8A8980;
    --ds-carbon-450: #6F6E66;   /* en açık metin tonu: beyazda 5.1:1 (AA) */
    --ds-carbon-500: #605F57;
    --ds-carbon-600: #44433D;
    --ds-carbon-700: #2E2D29;
    --ds-carbon-800: #1C1B18;
    --ds-carbon-900: #0D0C0B;

    /* ---- Cobalt (Primary brand) ---- */
    --ds-cobalt-50:  #EEF2FF;
    --ds-cobalt-100: #DCE7FE;
    --ds-cobalt-200: #BBCBFB;
    --ds-cobalt-300: #8FA8F8;
    --ds-cobalt-400: #6B84F5;
    --ds-cobalt-500: #3452E3;
    --ds-cobalt-600: #1F3FD1;
    --ds-cobalt-700: #162FAE;
    --ds-cobalt-800: #0F2589;
    --ds-cobalt-900: #0A1A6B;

    /* ---- Lime (Accent / Highlight) ----
       DS rampası 600'de biter; marka ankeri lime-300 (#B8F038). */
    --ds-lime-50:  #F7FEE7;
    --ds-lime-100: #EBFCCC;
    --ds-lime-200: #D6F88E;
    --ds-lime-300: #B8F038;
    --ds-lime-400: #A0E614;
    --ds-lime-500: #7BC412;
    --ds-lime-600: #5E8C0B;
    /* DS rampasının koyu uzantıları (heatmap gibi derin ölçekler için) */
    --ds-lime-700: #486B0A;
    --ds-lime-800: #314B07;
    --ds-lime-900: #1B2A04;

    /* ---- Podium (Salary/Interview/Company sıralama) ---- */
    --ds-podium-1: #F2C94C;
    --ds-podium-2: #C0C4CC;
    --ds-podium-3: #D9914F;

    /* ---- Data-viz (Grafik/istatistik serileri) ---- */
    --ds-data-1: #3452E3;
    --ds-data-2: #B8F038;
    --ds-data-3: #F2994A;
    --ds-data-4: #BB6BD9;
    --ds-data-5: #0FB5BA;
    --ds-coral:  #F2994A;
    --ds-violet: #BB6BD9;
    --ds-teal:   #0FB5BA;

    /* ---- Semantic Tokens — Light Mode (default) ----
       DS colors.css semantik eşlemesinin birebiri:
       --bg:carbon-25 · --surface-2:carbon-50 · --border:carbon-100 ·
       --text:carbon-900 · --text-2:carbon-600 · --text-3:carbon-500 */
    --ds-bg-primary:    var(--ds-carbon-25);
    --ds-bg-secondary:  var(--ds-carbon-50);
    --ds-bg-elevated:   var(--ds-carbon-0);
    --ds-bg-overlay:    rgba(255, 255, 255, 0.85);

    --ds-text-primary:   var(--ds-carbon-900);
    --ds-text-secondary: var(--ds-carbon-600);
    --ds-text-muted:     var(--ds-carbon-500);
    --ds-text-inverse:   var(--ds-carbon-25);

    --ds-accent:         var(--ds-cobalt-500);
    --ds-accent-hover:   var(--ds-cobalt-400);
    --ds-accent-subtle:  var(--ds-cobalt-50);

    --ds-highlight:      var(--ds-lime-300);
    --ds-highlight-hover: var(--ds-lime-200);
    --ds-highlight-subtle: var(--ds-lime-100);

    --ds-border:         var(--ds-carbon-100);
    --ds-border-subtle:  var(--ds-carbon-50);
    --ds-border-strong:  var(--ds-carbon-200);

    --ds-glass-bg:       rgba(255, 255, 255, 0.60);
    --ds-glass-border:   rgba(255, 255, 255, 0.70);
    --ds-glass-blur:     22px;

    /* ---- Elevation — DS tokens/elevation.css ----
       Gölge rengi carbon-900'dur (#0D0C0B), saf siyah değil: zemin sıcak bej olduğu için
       nötr siyah gölge o zeminde gri bir kirlilik olarak okunur.

       Bu dört basamak Tailwind'in `shadow-*` utility'lerine `tailwind-input.css` içinden
       bağlanır. Bağlanmadan önce 149 kullanım Tailwind'in FABRİKA gölgesini
       (`rgb(0 0 0 / 0.1)`) basıyordu ve o değer karanlık temada da aynı kalıyordu — yani
       #0D0C0B zeminin üzerinde gölge pratikte GÖRÜNMÜYORDU. DS bu yüzden karanlık temada
       opaklığı 0.5–0.6'ya çıkarır; aşağıdaki `.dark` bloğu o override'ı taşır. */
    --ds-el-1: 0 1px 2px rgba(13, 12, 11, 0.05), 0 1px 3px rgba(13, 12, 11, 0.04);
    --ds-el-2: 0 2px 6px rgba(13, 12, 11, 0.06), 0 6px 14px rgba(13, 12, 11, 0.04);
    --ds-el-3: 0 4px 14px rgba(13, 12, 11, 0.08), 0 12px 28px rgba(13, 12, 11, 0.06);
    --ds-el-4: 0 10px 30px rgba(13, 12, 11, 0.10), 0 24px 56px rgba(13, 12, 11, 0.08);

    /* Marka ışımaları temaya göre DEĞİŞMEZ: renk zeminden değil markadan gelir. */
    --ds-el-cobalt: 0 8px 28px rgba(46, 91, 255, 0.30);
    --ds-el-lime:   0 6px 20px rgba(184, 240, 56, 0.35);
    --ds-el-glow:   0 0 0 4px rgba(46, 91, 255, 0.15);

    /* ---- Semantic — Success/Warning/Error/Info ----
       DS color-status: success #16A34A · warning #D97706 · error #DC2626.
       DS'te info token'ı YOK; bilgi tonu markanın kendisidir → cobalt-500. */
    --ds-success: #16A34A;
    --ds-warning: #D97706;
    --ds-error:   #DC2626;
    --ds-info:    var(--ds-cobalt-500);

    /* ---- Status INK — durum renklerinin ERİŞİLEBİLİR tonu ----
       Doygun tonların açık temada #FFFFFF üzerinde ölçümü
       (metin 4.5:1 · grafik/ikon 3:1):
           --ds-success #16A34A → 3.30:1  ✗ metin (grafik geçer)
           --ds-warning #D97706 → 3.20:1  ✗ metin (grafik geçer)
           --ds-error   #DC2626 → 4.83:1  ✓ (ink ailede tutarlılık için kalır)
           --ds-info    #3452E3 → 6.07:1  ✓ (ink ailede tutarlılık için kalır)
       Solid `bg-success` + beyaz metin de aynı orana düşer — sorun tek bir
       değerin iki temaya hizmet etmesidir: bu dosyadaki diğer TÜM semantik
       renkler tema-farkındalıklıyken durum renkleri değildi.

       KULLANIM SINIRI: Tailwind semantik durum renkleri (`--color-success`
       vb.) tailwind-input.css'te BU aileye bağlıdır, dolayısıyla `text-*`,
       `bg-*`, `border-*` ve tüm varyantlar (`hover:`, `dark:`…) erişilebilir
       tonu alır. Düzeltme çağrı yerlerinde tekrarlanmaz ve unutulamaz.

       Doygun `--ds-*` aile DURUYOR ve yalnız KONTRAST ŞARTI OLMAYAN saydam
       tint zeminlerde kullanılır (örn. info-page.css `.st-banner--ok`,
       prototipin mint zemini). Metin/ikon/nokta için ASLA. */
    --ds-success-ink: #15803D; /* 5.02:1 on #FFFFFF */
    --ds-warning-ink: #B45309; /* 5.04:1 */
    --ds-error-ink:   #B91C1C; /* 6.53:1 */
    --ds-info-ink:    #1F3FD1; /* 7.76:1 — cobalt-600, marka ailesinde */

    /* ---- On-Accent Text — fixed white, theme-invariant ----
       Marka (primary/cobalt) dolguları her iki temada da sabit renkli
       olduğu için üzerindeki metin de sabit beyaz kalır — nötr zeminle
       birlikte dönen --ds-text-inverse burada kontrastı bozardı.
       DURUM dolguları artık bu kapsamda DEĞİL → --ds-on-status. */
    --ds-on-accent: #FFFFFF;

    /* ---- On-Status Text — DURUM dolgusu üzerindeki metin ----
       Durum renkleri tema-farkındalıklı olduğu için (yukarı bkz.) solid
       `bg-success`/`bg-warning`/`bg-destructive` açık temada KOYU, koyu
       temada AÇIK bir dolgu üretir. Sabit beyaz metin bu yüzden yalnız
       açık temada çalışır; koyu temada açık yeşil zeminde beyaz yazı
       1.74:1'e düşer. Metin de dolguyla birlikte dönmek ZORUNDA:
           açık tema: #15803D dolgu + #FFFFFF metin → 5.02:1  ✓
                      #B45309                       → 5.04:1  ✓
                      #B91C1C                       → 6.53:1  ✓
           koyu tema: #4ADE80 dolgu + #0D0C0B metin → 11.2:1  ✓
                      #FBBF24                       → 11.7:1  ✓
                      #F87171                       →  7.1:1  ✓
       Aynı deseni (parlak dolgu → koyu metin) landing'in prototip `--accent`
       katmanı da uygular; bu onun durum renklerine taşınmasıdır. */
    --ds-on-status: #FFFFFF;

    /* ---- RGB Triplets — Tailwind dark-mode köprüsü ----
       Bare "R G B" values (no rgb()/hsl() wrapper) mirroring the hex semantic
       tokens above 1:1. tailwind-input.css'teki `@theme inline` bloğu bunları
       `rgb(var(--ds-rgb-*))` olarak sarar; `.dark` altında bu triplet'ler
       değiştiği için tema otomatik flip eder.

       Not: v3'teki `<alpha-value>` placeholder'ı v4'te ARTIK KULLANILMIYOR —
       `bg-primary/10` gibi opacity modifier'larını Tailwind v4 kendisi
       `color-mix()` ile üretir. Triplet formatı yine de korunmalı: hem bu
       `rgb()` sarmalaması için hem de accessibility.css'in high-contrast
       override'ları aynı triplet'leri ezdiği için.

       Palet değişince her değeri hex karşılığıyla senkron tut. */
    --ds-rgb-bg-primary:     250 250 249; /* = --ds-carbon-25 */
    --ds-rgb-bg-secondary:   244 244 242; /* = --ds-carbon-50 */
    --ds-rgb-bg-elevated:    255 255 255; /* = --ds-carbon-0 */
    --ds-rgb-text-primary:   13 12 11;    /* = --ds-carbon-900 */
    --ds-rgb-text-secondary: 68 67 61;    /* = --ds-carbon-600 */
    --ds-rgb-text-muted:     96 95 87;    /* = --ds-carbon-500 */
    --ds-rgb-accent:         52 82 227;   /* = --ds-cobalt-500 */
    --ds-rgb-border:         232 232 228; /* = --ds-carbon-100 */
    --ds-rgb-success:        22 163 74;   /* = --ds-success */
    --ds-rgb-warning:        215 119 6;   /* = --ds-warning */
    --ds-rgb-error:          220 38 38;   /* = --ds-error */
    --ds-rgb-info:           52 82 227;   /* = --ds-info (cobalt-500) */
    --ds-rgb-on-accent:      255 255 255; /* = --ds-on-accent */
    --ds-rgb-on-status:      255 255 255; /* = --ds-on-status */
    --ds-rgb-success-ink:    21 128 61;   /* = --ds-success-ink */
    --ds-rgb-warning-ink:    180 83 9;    /* = --ds-warning-ink */
    --ds-rgb-error-ink:      185 28 28;   /* = --ds-error-ink */
    --ds-rgb-info-ink:       31 63 209;   /* = --ds-info-ink */

    /* ---- Form tonları — her katkı formu ailesinin rengi ----
       Mobil istemciyle aynı üçlü (QUICK_KIND_TONE): değerlendirme amber, maaş lime, mülakat mor.
       Kenar/vurgu + zemin çifti; adım şeridi ve hızlı formun seçili şirket kartı kullanır.
       Devam/Paylaş düğmesi tonu ALMAZ, üç formda da lime kalır: turuncu zemin üzerinde
       beyaz metin 2,1:1 kontrasta düşer. Metin her zaman --ds-text-primary'dir. */
    --form-tone-review:        #F59E0B;
    --form-tone-review-bg:     #FEF3C7;
    --form-tone-salary:        #7BC412;
    --form-tone-salary-bg:     #F7FEE7;
    --form-tone-interview:     #7C3AED;
    --form-tone-interview-bg:  #F3ECFF;
}

/* ---- Dark Mode ----
   DS tokens/themes.css [data-theme="dark"] eşleniği. Prototipteki alpha
   değerler (border: rgba(255,255,255,.10) vb.) triplet köprüsünde alpha
   taşınamadığı için zemin üzerine bindirilmiş SOLID karşılıklarıyla yazılır
   (ör. .10 beyaz @ carbon-800 → #333230). */
.dark {
    --ds-bg-primary:    var(--ds-carbon-900);
    --ds-bg-secondary:  #211F1C;            /* DS dark --surface-2 (rampa dışı) */
    --ds-bg-elevated:   var(--ds-carbon-800);
    --ds-bg-overlay:    rgba(13, 12, 11, 0.85);

    --ds-text-primary:   #FAFAF9;
    --ds-text-secondary: #C0C0BF;           /* = rgba(255,255,255,.74) solid karşılığı */
    --ds-text-muted:     #949493;           /* = rgba(255,255,255,.56) solid karşılığı */
    --ds-text-inverse:   var(--ds-carbon-900);

    --ds-accent:         var(--ds-cobalt-400);
    --ds-accent-hover:   var(--ds-cobalt-300);
    --ds-accent-subtle:  rgba(52, 82, 227, 0.16);

    --ds-highlight:      var(--ds-lime-300);
    --ds-highlight-hover: var(--ds-lime-200);
    --ds-highlight-subtle: rgba(184, 240, 56, 0.14);

    --ds-border:         #333230;           /* = rgba(255,255,255,.10) @ carbon-800 */
    --ds-border-subtle:  var(--ds-carbon-800);
    --ds-border-strong:  var(--ds-carbon-600); /* ≈ rgba(255,255,255,.16) karşılığı */

    --ds-glass-bg:       rgba(28, 27, 24, 0.55);
    --ds-glass-border:   rgba(255, 255, 255, 0.16);

    /* ---- Elevation — DS tokens/themes.css (dark) ----
       Gölge burada SAF SİYAH ve çok daha opak. Açık temadaki sıcak/soft değerler koyu zeminde
       hiçbir şey çizmez: rgba(13,12,11,0.05) zaten zeminin kendi rengidir. Yani gölgeyi
       temaya duyarlı yapmamak, karanlık temada yüksekliği tamamen kaybetmek demektir. */
    --ds-el-1: 0 1px 2px rgba(0, 0, 0, 0.50);
    --ds-el-2: 0 2px 8px rgba(0, 0, 0, 0.50);
    --ds-el-3: 0 8px 24px rgba(0, 0, 0, 0.55);
    --ds-el-4: 0 18px 48px rgba(0, 0, 0, 0.60);

    /* ---- Status INK — koyu temada AÇIK tonlar ----
       Koyu zemin (--ds-carbon-800 #1C1B18) üzerinde ölçüm:
       #4ADE80 → 9.9:1 · #FBBF24 → 10.3:1 · #F87171 → 6.2:1 */
    --ds-success-ink: #4ADE80;
    --ds-warning-ink: #FBBF24;
    --ds-error-ink:   #F87171;
    --ds-info-ink:    #8FA8F8; /* 7.5:1 — cobalt-300, marka ailesinde */

    /* Dolgu koyu temada AÇILDIĞI için üzerindeki metin KOYULAŞIR (bkz. :root
       --ds-on-status gerekçesi). Beyaz kalsaydı 1.7:1'e düşerdi. */
    --ds-on-status: #0D0C0B;
    /* Düz vurgu dolgusu (bg-primary) koyu temada cobalt-400'e açılır: beyaz yazı 3.4:1, koyu 5.8:1.
       Kobalt DEGRADE (gradient-primary, .btn-primary) bu token'ı kullanmaz; DS gereği beyazdır. */
    --ds-on-accent: #0D0C0B;

    /* ---- RGB Triplets — dark mode overrides ---- */
    --ds-rgb-bg-primary:     13 12 11;    /* = --ds-carbon-900 */
    --ds-rgb-bg-secondary:   33 31 28;    /* = #211F1C */
    --ds-rgb-bg-elevated:    28 27 24;    /* = --ds-carbon-800 */
    --ds-rgb-text-primary:   250 250 249; /* = #FAFAF9 */
    --ds-rgb-text-secondary: 192 192 191; /* = #C0C0BF */
    --ds-rgb-text-muted:     148 148 147; /* = #949493 */
    --ds-rgb-accent:         107 132 245; /* = --ds-cobalt-400 */
    --ds-rgb-on-accent:      13 12 11;    /* = --ds-on-accent */
    --ds-rgb-border:         51 50 47;    /* = #333230 */
    --ds-rgb-success-ink:    74 222 128;  /* = --ds-success-ink */
    --ds-rgb-warning-ink:    251 191 36;  /* = --ds-warning-ink */
    --ds-rgb-error-ink:      248 113 113; /* = --ds-error-ink */
    --ds-rgb-info-ink:       143 168 248; /* = --ds-info-ink */
    --ds-rgb-on-status:      13 12 11;    /* = --ds-on-status */

    /* ---- Form tonları — koyu tema (mobil quickToneColors koyu eşlemesi) ---- */
    --form-tone-review:        #FBBF24;
    --form-tone-review-bg:     rgba(245, 158, 11, 0.18);
    --form-tone-salary:        #7BC412;
    --form-tone-salary-bg:     rgba(184, 240, 56, 0.12);
    --form-tone-interview:     #A78BFA;
    --form-tone-interview-bg:  rgba(124, 58, 237, 0.18);
}

/* ---- Light Mode (explicit) ---- */
.light {
    --ds-bg-primary:    var(--ds-carbon-25);
    --ds-bg-secondary:  var(--ds-carbon-50);
    --ds-bg-elevated:   var(--ds-carbon-0);
    --ds-bg-overlay:    rgba(255, 255, 255, 0.85);

    --ds-text-primary:   var(--ds-carbon-900);
    --ds-text-secondary: var(--ds-carbon-600);
    --ds-text-muted:     var(--ds-carbon-500);
    --ds-text-inverse:   var(--ds-carbon-25);

    --ds-accent:         var(--ds-cobalt-500);
    --ds-accent-hover:   var(--ds-cobalt-400);
    --ds-accent-subtle:  var(--ds-cobalt-50);

    /* ---- RGB Triplets — explicit light mode (mirrors :root) ---- */
    --ds-rgb-bg-primary:     250 250 249;
    --ds-rgb-bg-secondary:   244 244 242;
    --ds-rgb-bg-elevated:    255 255 255;
    --ds-rgb-text-primary:   13 12 11;
    --ds-rgb-text-secondary: 68 67 61;
    --ds-rgb-text-muted:     96 95 87;
    --ds-rgb-accent:         52 82 227;
    --ds-rgb-border:         232 232 228;

    /* ---- Status INK — açık temada KOYU tonlar (:root ile aynı) ---- */
    --ds-success-ink: #15803D;
    --ds-warning-ink: #B45309;
    --ds-error-ink:   #B91C1C;
    --ds-info-ink:    #1F3FD1;
    --ds-rgb-success-ink:    21 128 61;
    --ds-rgb-warning-ink:    180 83 9;
    --ds-rgb-error-ink:      185 28 28;
    --ds-rgb-info-ink:       31 63 209;
    --ds-on-status:          #FFFFFF;
    --ds-rgb-on-status:      255 255 255;

    --ds-highlight:      var(--ds-lime-300);
    --ds-highlight-hover: var(--ds-lime-200);
    --ds-highlight-subtle: var(--ds-lime-100);

    --ds-border:         var(--ds-carbon-100);
    --ds-border-subtle:  var(--ds-carbon-50);
    --ds-border-strong:  var(--ds-carbon-200);

    --ds-glass-bg:       rgba(255, 255, 255, 0.60);
    --ds-glass-border:   rgba(255, 255, 255, 0.70);

    /* ---- Elevation — açık tema (:root ile aynı) ----
       `.dark` içinde açık bir ada (`.light`) kurulabildiği için burada da açıkça yazılır;
       yazılmasaydı o ada koyu temanın opak gölgelerini miras alırdı. */
    --ds-el-1: 0 1px 2px rgba(13, 12, 11, 0.05), 0 1px 3px rgba(13, 12, 11, 0.04);
    --ds-el-2: 0 2px 6px rgba(13, 12, 11, 0.06), 0 6px 14px rgba(13, 12, 11, 0.04);
    --ds-el-3: 0 4px 14px rgba(13, 12, 11, 0.08), 0 12px 28px rgba(13, 12, 11, 0.06);
    --ds-el-4: 0 10px 30px rgba(13, 12, 11, 0.10), 0 24px 56px rgba(13, 12, 11, 0.08);

    /* ---- Form tonları — açık tema (:root ile aynı) ---- */
    --form-tone-review:        #F59E0B;
    --form-tone-review-bg:     #FEF3C7;
    --form-tone-salary:        #7BC412;
    --form-tone-salary-bg:     #F7FEE7;
    --form-tone-interview:     #7C3AED;
    --form-tone-interview-bg:  #F3ECFF;
}

/* ---- Navbar DarkHero ----
   Açık temada, scroll öncesi şeffaf navbar koyu fotoğrafik hero
   (LandingHero scrim #080706) üzerine oturur — :root metin rengi
   #0D0C0B ile kontrast 1.1:1'e düşer. Navbar.razor GetHeaderClass()
   bu class'ı yalnız DarkHero && !scrolled && !dark iken ekler;
   `@theme inline` utility'leri triplet'leri kullanım noktasında
   çözdüğü için alt component'ler (ThemeSwitcher, LanguageSwitcher,
   NotificationBell) dahil tüm metinler tek noktadan açık tona döner.
   Prototip karşılığı: site-nav.jsx `.rtw-snav--hero` (--sn-text*). */
.navbar-hero {
    /* text-* utility taşımayan elemanlar (ThemeSwitcher/LanguageSwitcher ghost
       butonları) rengi preflight `color: inherit` ile body'den alır — inherit
       zincirini de açık tona çevir, yoksa ikonlar siyah kalır. */
    color: rgb(var(--ds-rgb-text-primary));
    --ds-rgb-text-primary:   250 249 247; /* --sn-text  #FAF9F7 — scrim üzerinde 17.9:1 */
    --ds-rgb-text-secondary: 214 211 205; /* --sn-text2 ≈ rgba(255,255,255,.78) blend */
    --ds-rgb-text-muted:     166 163 158; /* --sn-text3 ≈ rgba(255,255,255,.55) blend */
    --ds-rgb-border:         255 255 255; /* --sn-border — divider'lar /50 modifier ile yumuşar */
    --ds-rgb-accent:         184 240 56;  /* --sn-accent-ink #B8F038 = lime-300 (aktif link + paraf) */
    --ds-rgb-bg-primary:     8 7 6;       /* avatar ring-background cutout'u hero tonunda kalsın */
    --ds-rgb-bg-secondary:   40 39 36;    /* hover:bg-muted — koyu zeminde açık bej yerine koyu ton */
}