/* ============================================================
RateTheWork Design Tokens
Carbon / Cobalt / Lime — MVP Design System
Spec: TECH-5347 (mobile parite — NotebookLM f9ad823c)
============================================================ */
/* Katman sırası burada tescil edilir (TECH-5868).
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 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;
:root {
/* ---- Carbon (Neutral — 13 ton, warm) ---- */
--ds-carbon-0: #FFFFFF;
--ds-carbon-50: #F8F6F0;
--ds-carbon-100: #F2EEE6;
--ds-carbon-200: #E6E1D8;
--ds-carbon-300: #C9C4BB;
--ds-carbon-400: #A6A199;
--ds-carbon-500: #807C75;
--ds-carbon-600: #5C5953;
--ds-carbon-700: #3A3833;
--ds-carbon-800: #26241F;
--ds-carbon-900: #1B1A16;
--ds-carbon-950: #15140F;
--ds-carbon-1000: #0D0C0B;
/* ---- Cobalt (Primary brand) ---- */
--ds-cobalt-50: #EBF0FF;
--ds-cobalt-100: #D4DEFF;
--ds-cobalt-200: #A6BAFF;
--ds-cobalt-300: #7896FF;
--ds-cobalt-400: #4A6CF0;
--ds-cobalt-500: #3452E3;
--ds-cobalt-600: #2940C2;
--ds-cobalt-700: #1F30A1;
--ds-cobalt-800: #152080;
--ds-cobalt-900: #0B105C;
/* ---- Lime (Accent / Highlight) ---- */
--ds-lime-50: #F5FCD9;
--ds-lime-100: #EBF9B3;
--ds-lime-200: #D8F37D;
--ds-lime-300: #C5ED56;
--ds-lime-400: #B8F038;
--ds-lime-500: #9DD61A;
--ds-lime-600: #7AAB14;
--ds-lime-700: #5C800F;
--ds-lime-800: #3D560A;
--ds-lime-900: #1F2B05;
/* ---- Podium (Salary/Interview/Company sıralama — TECH-5887) ---- */
--ds-podium-1: #F2C94C;
--ds-podium-2: #C0C4CC;
--ds-podium-3: #D9914F;
/* ---- Data-viz (Grafik/istatistik serileri — TECH-5887) ---- */
--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-bg-primary: var(--ds-carbon-50);
--ds-bg-secondary: var(--ds-carbon-100);
--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-700);
--ds-text-muted: var(--ds-carbon-500);
--ds-text-inverse: var(--ds-carbon-50);
--ds-accent: var(--ds-cobalt-500);
--ds-accent-hover: var(--ds-cobalt-400);
--ds-accent-subtle: var(--ds-cobalt-100);
--ds-highlight: var(--ds-lime-500);
--ds-highlight-hover: var(--ds-lime-400);
--ds-highlight-subtle: var(--ds-lime-100);
--ds-border: var(--ds-carbon-200);
--ds-border-subtle: var(--ds-carbon-100);
--ds-border-strong: var(--ds-carbon-400);
--ds-glass-bg: rgba(255, 255, 255, 0.65);
--ds-glass-border: rgba(255, 255, 255, 0.30);
--ds-glass-blur: 24px;
/* ---- Semantic — Success/Warning/Error/Info ---- */
--ds-success: #10B981;
--ds-warning: #F59E0B;
--ds-error: #EF4444;
--ds-info: #3B82F6;
/* ---- Status INK — durum renklerinin ERİŞİLEBİLİR tonu (TECH-6012) ----
Yukarıdaki doygun tonlar açık temada kontrast eşiklerini geçmiyor;
#FFFFFF üzerinde ölçüm (metin 4.5:1 · grafik/ikon 3:1):
--ds-success #10B981 → 2.56:1 ✗ ikisi de
--ds-warning #F59E0B → 2.15:1 ✗ ikisi de
--ds-error #EF4444 → 3.74:1 ✗ metin (grafik geçer)
--ds-info #3B82F6 → 3.68:1 ✗ metin (grafik geçer)
Sadece metin değil: solid `bg-success` + beyaz metin de 2.56:1'di.
Koyu temada AYNI değerler koyu zemin üzerinde 5-9:1 verir — yani sorun
tek bir değerin iki temaya hizmet etmesiydi: 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: #1D4ED8; /* 6.64:1 (--ds-info #3B82F6 → 3.68:1) */
/* ---- On-Accent Text — fixed white, theme-invariant (TECH-5349) ----
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 (TECH-6012) ----
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ü (TECH-5349, TECH-5458) ----
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 `` 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: 248 246 240; /* = --ds-carbon-50 */
--ds-rgb-bg-secondary: 242 238 230; /* = --ds-carbon-100 */
--ds-rgb-bg-elevated: 255 255 255; /* = --ds-carbon-0 */
--ds-rgb-text-primary: 27 26 22; /* = --ds-carbon-900 */
--ds-rgb-text-secondary: 58 56 51; /* = --ds-carbon-700 */
--ds-rgb-text-muted: 128 124 117; /* = --ds-carbon-500 */
--ds-rgb-accent: 52 82 227; /* = --ds-cobalt-500 */
--ds-rgb-border: 230 225 216; /* = --ds-carbon-200 */
--ds-rgb-success: 16 185 129; /* = --ds-success */
--ds-rgb-warning: 245 158 11; /* = --ds-warning */
--ds-rgb-error: 239 68 68; /* = --ds-error */
--ds-rgb-info: 59 130 246; /* = --ds-info */
--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: 29 78 216; /* = --ds-info-ink */
/* ---- Fixed Component Accent Overrides (non-palette, theme-invariant) ----
Domain-specific accent used to color-code a single form family across
both themes — unlike --ds-accent this does not flip with light/dark
(TECH-5351: Quick/Add Interview dialog FormStepper accent). Eski mor tonu
emekliye ayrıldı (TECH-5353) — artık cobalt-700'e bağlı (Carbon/Cobalt/Lime paleti). */
--interview-accent: var(--ds-cobalt-700);
}
/* ---- Dark Mode ---- */
.dark {
--ds-bg-primary: var(--ds-carbon-1000);
--ds-bg-secondary: var(--ds-carbon-900);
--ds-bg-elevated: var(--ds-carbon-800);
--ds-bg-overlay: rgba(13, 12, 11, 0.85);
--ds-text-primary: var(--ds-carbon-100);
--ds-text-secondary: var(--ds-carbon-400);
--ds-text-muted: var(--ds-carbon-500);
--ds-text-inverse: var(--ds-carbon-1000);
--ds-accent: var(--ds-cobalt-400);
--ds-accent-hover: var(--ds-cobalt-300);
--ds-accent-subtle: rgba(52, 82, 227, 0.18);
--ds-highlight: var(--ds-lime-400);
--ds-highlight-hover: var(--ds-lime-300);
--ds-highlight-subtle: rgba(184, 240, 56, 0.12);
--ds-border: var(--ds-carbon-700);
--ds-border-subtle: var(--ds-carbon-800);
--ds-border-strong: var(--ds-carbon-500);
--ds-glass-bg: rgba(27, 26, 22, 0.70);
--ds-glass-border: rgba(255, 255, 255, 0.08);
/* ---- Status INK — koyu temada AÇIK tonlar (TECH-6012) ----
Koyu zemin (--ds-carbon-800 #26241F) üzerinde ölçüm:
#4ADE80 → 8.9:1 · #FBBF24 → 9.3:1 · #F87171 → 5.6:1 */
--ds-success-ink: #4ADE80;
--ds-warning-ink: #FBBF24;
--ds-error-ink: #F87171;
--ds-info-ink: #93C5FD; /* 8.6:1 */
/* 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;
/* ---- RGB Triplets — dark mode overrides (TECH-5349) ---- */
--ds-rgb-bg-primary: 13 12 11; /* = --ds-carbon-1000 */
--ds-rgb-bg-secondary: 27 26 22; /* = --ds-carbon-900 */
--ds-rgb-bg-elevated: 38 36 31; /* = --ds-carbon-800 */
--ds-rgb-text-primary: 242 238 230; /* = --ds-carbon-100 */
--ds-rgb-text-secondary: 166 161 153; /* = --ds-carbon-400 */
--ds-rgb-text-muted: 128 124 117; /* = --ds-carbon-500 (unchanged) */
--ds-rgb-accent: 74 108 240; /* = --ds-cobalt-400 */
--ds-rgb-border: 58 56 51; /* = --ds-carbon-700 */
--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: 147 197 253; /* = --ds-info-ink */
--ds-rgb-on-status: 13 12 11; /* = --ds-on-status */
}
/* ---- Light Mode (explicit) ---- */
.light {
--ds-bg-primary: var(--ds-carbon-50);
--ds-bg-secondary: var(--ds-carbon-100);
--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-700);
--ds-text-muted: var(--ds-carbon-500);
--ds-text-inverse: var(--ds-carbon-50);
--ds-accent: var(--ds-cobalt-500);
--ds-accent-hover: var(--ds-cobalt-400);
--ds-accent-subtle: var(--ds-cobalt-100);
/* ---- RGB Triplets — explicit light mode (mirrors :root, TECH-5349) ---- */
--ds-rgb-bg-primary: 248 246 240;
--ds-rgb-bg-secondary: 242 238 230;
--ds-rgb-bg-elevated: 255 255 255;
--ds-rgb-text-primary: 27 26 22;
--ds-rgb-text-secondary: 58 56 51;
--ds-rgb-text-muted: 128 124 117;
--ds-rgb-accent: 52 82 227;
--ds-rgb-border: 230 225 216;
/* ---- Status INK — açık temada KOYU tonlar (TECH-6012, :root ile aynı) ---- */
--ds-success-ink: #15803D;
--ds-warning-ink: #B45309;
--ds-error-ink: #B91C1C;
--ds-info-ink: #1D4ED8;
--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: 29 78 216;
--ds-on-status: #FFFFFF;
--ds-rgb-on-status: 255 255 255;
--ds-highlight: var(--ds-lime-500);
--ds-highlight-hover: var(--ds-lime-400);
--ds-highlight-subtle: var(--ds-lime-100);
--ds-border: var(--ds-carbon-200);
--ds-border-subtle: var(--ds-carbon-100);
--ds-border-strong: var(--ds-carbon-400);
--ds-glass-bg: rgba(255, 255, 255, 0.65);
--ds-glass-border: rgba(255, 255, 255, 0.30);
}
/* ---- Navbar DarkHero (TECH-5866) ----
Açık temada, scroll öncesi şeffaf navbar koyu fotoğrafik hero
(LandingHero scrim #080706) üzerine oturur — :root metin rengi
#1B1A16 ile kontrast 1.14: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-400 (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 */
}
/* ---- Landing Lime Aksan (TECH-5869) — KALDIRILDI ----
`.landing-accent` ve `.dark .landing-accent` buradan silindi (0 tüketici).
Landing bölümleri artık prototipin kendi `--accent` token'ını kullanıyor
(webapp.css landing bölümü); hiçbiri `text/bg/border-primary` utility'si
taşımıyor, dolayısıyla `--ds-rgb-accent` override'ının ölçülen etkisi 0'dı.
Paralel aksan kaynağı bırakmak, hangi lime'ın kazandığını dosya sırasına
bağlı hale getiriyordu (no-garbage-code). */