/* ==========================================================================
   STD TASARIM SİSTEMİ — "ZİRVE" v2 (son sürüm) · JETONLAR
   Sınır Tanımayan Dağcılar Spor Kulübü · web sitesi + yönetim paneli
   Hedef yol: wwwroot/css/tokens.css  (components.css ve bridge.css'ten ÖNCE yüklenir)
   Mobil karşılığı: std-mobile/src/theme.ts (aynı adlar, camelCase)
   Tek açık tema. Gece renkleri ("krom") tema değil, sabit bir katmandır.
   Kaynak: SPEC.md §1–§8. Bir değeri değiştirirseniz theme.ts'yi de değiştirin.
   ========================================================================== */

:root{
  color-scheme: light;

  /* ---------------------------------------------------------------- 1. HAM PALET
     Bileşenler ham paleti DOĞRUDAN kullanmaz; yalnız aşağıdaki rol jetonlarını kullanır. */

  /* Nötr — açık iş yüzeyleri (hafif soğuk) */
  --g0:#FFFFFF;  --g25:#F8F9FA; --g50:#F2F4F6; --g100:#E9ECEF; --g150:#DFE3E8; --g200:#CFD5DC;
  --g300:#B3BBC5; --g400:#838D9A; --g500:#646D7A; --g600:#4E5663; --g700:#373E49; --g800:#242A33; --g900:#12161C;

  /* Gece — krom (başlık, hero, alt bilgi, yönetim yan menüsü, mobil sekme çubuğu) */
  --n1000:#07090C; --n950:#0B0E12; --n900:#11151B; --n850:#161B22; --n800:#1D232C; --n700:#2A313C;
  --n600:#3B4350;  --n500:#5B6472; --n300:#98A1AE; --n200:#C6CCD5;

  /* Kulüp kırmızısı (logodan #DB2B18) */
  --red50:#FDEEEC; --red100:#FBDAD5; --red200:#F5B3AA; --red300:#F28A7C; --red400:#F2604D;
  --red500:#DB2B18; --red600:#C02212; --red700:#9E1B0E; --red800:#7A150B;

  /* Kehribar — zaman baskısı ve uyarı. amb400 YALNIZ gece yüzeyinde. */
  --amb50:#FFF7E0; --amb100:#FFECB3; --amb300:#FFD060; --amb400:#FFB81C; --amb600:#B86E00; --amb700:#8A5200; --amb800:#6A3F00;

  /* Yeşil — yalnız başarı / gelir */
  --grn50:#E8F6EF; --grn100:#C9EBD9; --grn400:#3DCB86; --grn500:#16A06A; --grn600:#0E8656; --grn700:#0B6B45;

  /* Mavi — yalnız klavye odağı, seçim ve (seyrek) bilgi */
  --blu50:#EBF2FF; --blu100:#D3E2FE; --blu300:#8AB2FF; --blu500:#2F6BEF; --blu600:#1F55D6; --blu700:#1A45AD;

  /* ---------------------------------------------------------------- 2. ROL JETONLARI */

  /* Zemin ve yüzey */
  --bg-canvas:var(--g50);          /* yönetim sayfa zemini, mobil ekran zemini */
  --bg-surface:var(--g0);          /* kart, tablo, form, public sayfa zemini */
  --bg-subtle:var(--g25);          /* tablo başı, kart alt bölgesi, satır hover */
  --bg-muted:var(--g100);          /* dolgu, segment rayı, pasif düğme */
  --bg-inverse:var(--n900);        /* YÜZEN koyu öğeler: bildirim (toast), toplu işlem çubuğu, araç ipucu */

  /* Metin */
  --text:var(--g900);              /* 18,15:1 beyazda */
  --text-2:var(--g600);            /* ikincil, 7,41:1 */
  --text-3:var(--g500);            /* üçüncül, 5,24:1 — YALNIZ g0/g25/g50 üstünde */
  --text-disabled:var(--g400);     /* yalnız pasif kontrol; bilgi taşıyan metinde yasak */
  --text-link:var(--g900);         /* bağlantı = mürekkep + alt çizgi. Kırmızı bağlantı YOK. */
  --text-link-hover:var(--g700);

  /* Çizgi */
  --border:var(--g150);            /* ayırıcı, kart kenarı */
  --border-strong:var(--g200);     /* ikincil düğme kenarı, boş ölçek parçası */
  --border-input:var(--g400);      /* giriş alanı kenarı 3,36:1 (UI ≥3:1) */
  --rule:var(--g900);              /* editoryal üst çizgi (fikstür listesi, olgu ızgarası) */

  /* Krom (gece) */
  --chrome:var(--n950);
  --chrome-2:var(--n900);
  --chrome-3:var(--n800);
  --chrome-line:var(--n700);
  --on-chrome:#FFFFFF;
  --on-chrome-2:var(--n200);       /* 11,97:1 n950 üstünde */
  --on-chrome-3:var(--n300);       /* 7,41:1 n950'de */

  /* Marka (kulüp ve davet) — ekranda en çok BİR kırmızı dolgu */
  --brand:var(--red500);           /* #FFF üstünde 4,80:1 */
  --brand-hover:var(--red600);
  --brand-press:var(--red700);
  --brand-text:var(--red600);      /* açık zeminde kırmızı metin (ay adı) */
  --brand-soft:var(--red50);
  --brand-on-dark:var(--red400);   /* gecede kırmızı metin/işaret 6,04:1 */

  /* Birincil eylem = mürekkep (yönetimde tüm kaydet/uygula) */
  --primary:var(--g900);
  --primary-hover:var(--n700);
  --primary-press:var(--n1000);
  --on-primary:#FFFFFF;

  /* Durumlar */
  --success:var(--grn600);         /* dolgu: açık anahtar, onay ikonu (#FFF 4,60:1) */
  --success-text:var(--grn700);    /* 6,56:1 */
  --success-soft:var(--grn50);
  --success-line:var(--grn100);
  --success-on-dark:var(--grn400);

  --warning:var(--amb700);         /* uyarı metni ve ikonu, 6,39:1 */
  --warning-text:var(--amb700);
  --warning-mark:var(--amb600);    /* çubuk/nokta gibi METİN OLMAYAN işaret, 3,99:1 — metinde yasak */
  --warning-soft:var(--amb50);
  --warning-line:var(--amb100);
  --signal:var(--amb400);          /* YALNIZ gece yüzeyinde (ölçek, sayaç). Açık zeminde dolgu yasak. */
  --on-signal:var(--g900);

  --danger:var(--red700);          /* tehlike dolgusu: markadan koyu (#FFF 8,02:1) + her zaman çöp kutusu ikonu */
  --danger-hover:var(--red800);
  --danger-text:var(--red700);
  --danger-soft:var(--red50);
  --danger-line:var(--red200);

  --info:var(--blu600);
  --info-text:var(--blu700);
  --info-soft:var(--blu50);
  --info-line:var(--blu100);

  /* Mali anlam (renk tek başına anlam taşımaz: her zaman +/− ve yön ikonu) */
  --income:var(--grn700);          /* tutar metni */
  --income-mark:var(--grn500);     /* grafik sütunu */
  --income-soft:var(--grn50);
  --expense:var(--red600);
  --expense-mark:var(--red500);
  --expense-soft:var(--red50);

  /* Odak ve seçim */
  --focus:var(--blu500);
  --focus-on-dark:var(--blu300);
  --focus-ring:0 0 0 3px rgba(47,107,239,.24);
  --error-ring:0 0 0 3px rgba(158,27,14,.14);
  --selected:var(--blu50);
  --selected-line:var(--blu500);
  --selected-text:var(--blu700);

  /* Perde */
  --scrim:rgba(7,9,12,.58);        /* modal diyalog, çekmece, alt sayfa */
  --scrim-soft:rgba(7,9,12,.16);   /* satıra bağlı onay: satır görünür kalır */

  /* Grafik */
  --chart-grid:var(--g100);
  --chart-axis:var(--g200);
  --chart-label:var(--g600);
  --chart-cat-1:var(--g900); --chart-cat-2:var(--amb600); --chart-cat-3:var(--blu500); --chart-cat-4:var(--grn500); --chart-cat-5:var(--red300);

  /* ---------------------------------------------------------------- 3. TİPOGRAFİ
     Barlow Condensed: yalnız display, tarih, rakam ve ≥24 px bölüm başlığı.
     Inter: gövde, arayüz, tablo, faaliyet başlıkları (liste/kart), menü. */
  --font-display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-features:normal;          /* Google Fonts Inter'ında cv05/cv08 YOK (22.09.2026 denendi). Kendi barındırma serbest kalırsa: "cv05" 1,"cv08" 1 */

  /* font kısaltmaları: font: var(--t-body) */
  --t-display-1:700 5.5rem/1 var(--font-display);     /* 88 — ≥1280: 96 · BÜYÜK HARF, en çok 5 sözcük */
  --t-display-2:700 4rem/1.02 var(--font-display);    /* 64 */
  --t-h1:700 3rem/1.08 var(--font-display);           /* 48 — yönetimde 40 */
  --t-h1-admin:700 2.5rem/1.1 var(--font-display);    /* 40 */
  --t-h2:700 2.25rem/1.1 var(--font-display);         /* 36 */
  --t-h3:700 1.75rem/1.15 var(--font-display);        /* 28 — diyalog, çekmece başlığı */
  --t-h4:600 1.25rem/1.4 var(--font-body);            /* 20 — kart başlığı, form bölüm başlığı */
  --t-h5:600 1.125rem/1.45 var(--font-body);          /* 18 */
  --t-title:600 1.25rem/1.35 var(--font-body);        /* 20 — faaliyet başlığı (fikstür satırı) */
  --t-title-sm:600 1.125rem/1.4 var(--font-body);     /* 18 — kart/duyuru başlığı */
  --t-lead:400 1.1875rem/1.6 var(--font-body);        /* 19 */
  --t-body-lg:400 1.125rem/1.7 var(--font-body);      /* 18 — uzun okuma, en çok 70ch */
  --t-body:400 1rem/1.625 var(--font-body);           /* 16 — GÖVDE ALT SINIRI */
  --t-meta:400 .9375rem/1.45 var(--font-body);        /* 15 — konum · lider, son kayıt satırı */
  --t-sm:400 .875rem/1.5 var(--font-body);            /* 14 — yardım metni, istatistik etiketi */
  --t-caption:500 .8125rem/1.4 var(--font-body);      /* 13 — YALNIZ zaman damgası, tablo başı, eksen */
  --t-micro:600 .75rem/1.33 var(--font-body);         /* 12 — YALNIZ kbd, sayaç rozeti. HİÇBİR METİN 12'NİN ALTINA İNMEZ. */
  --t-label:600 .9375rem/1.4 var(--font-body);        /* 15 — form etiketi, menü öğesi */
  --t-button:600 1rem/1.2 var(--font-body);           /* 16 */
  --t-stat-xl:600 3.5rem/1.05 var(--font-display);    /* 56 — sayfada tek ana sayı */
  --t-stat-lg:600 2.5rem/1.05 var(--font-display);    /* 40 — KPI */
  --t-stat-md:600 1.875rem/1.1 var(--font-display);   /* 30 — bilet, detay şeridi */
  --t-stat-sm:600 1.5rem/1.1 var(--font-display);     /* 24 — satır içi istatistik */
  --t-date-mon:700 1rem/1 var(--font-display);        /* 16 — ay kısaltması, BÜYÜK HARF +0,06em */
  --ls-display:-.01em;
  --ls-mon:.06em;
  --unit-size:max(14px,.5em);      /* km, m, sa, ₺ eki: sayının yarısı, en az 14 px */

  /* ---------------------------------------------------------------- 4. ARALIK (4/8) */
  --s0:0; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;

  /* ---------------------------------------------------------------- 5. YARIÇAP (web = mobil, 1:1) */
  --r-xs:4px;     /* ölçek parçası, kod */
  --r-sm:8px;     /* rozet, kbd, matris hücresi */
  --r-md:12px;    /* düğme, giriş, segment, ikon düğmesi */
  --r-lg:16px;    /* kart, tablo kabı, panel */
  --r-xl:20px;    /* bilet, diyalog, çekmece, detay şeridi */
  --r-2xl:28px;   /* mobil alt sayfa, büyük kart */
  --r-pill:999px; /* çip, ilerleme çubuğu */

  /* ---------------------------------------------------------------- 6. BOYUT */
  --touch:44px;             /* web en küçük hedef (Android 48 dp) */
  --btn-h:44px; --btn-h-lg:52px; --btn-h-xl:56px;
  --input-h:48px;
  --row-h:64px;             /* tablo satırı */
  --header-h:76px;          /* public başlık (≤1023: 64) */
  --topbar-h:64px;          /* yönetim üst bar */
  --sidebar-w:252px;        /* ≥1280 */
  --sidebar-w-md:232px;     /* 1024–1279, etiketli */
  --rail-w:72px;            /* yalnız kullanıcı seçerse */
  --container:1240px;
  --gutter:16px;            /* 768: 24 · 1024: 32 */
  --measure:70ch;
  --icon-sm:16px; --icon-md:20px; --icon-lg:24px;

  /* ---------------------------------------------------------------- 7. GÖLGE (renk daima gece tonu) */
  --e0:none;
  --e1:0 1px 2px rgba(11,14,18,.06),0 1px 1px rgba(11,14,18,.04);
  --e2:0 6px 16px -4px rgba(11,14,18,.12),0 2px 4px rgba(11,14,18,.06);
  --e3:0 16px 40px -10px rgba(11,14,18,.26),0 4px 10px rgba(11,14,18,.08);
  --e4:0 28px 72px -16px rgba(11,14,18,.42),0 6px 16px rgba(11,14,18,.12);
  --e-up:0 -10px 28px -14px rgba(11,14,18,.24);   /* yapışkan alt çubuk */

  /* ---------------------------------------------------------------- 8. HAREKET */
  --d-instant:80ms; --d-fast:140ms; --d-base:200ms; --d-slow:280ms; --d-exit:180ms; --d-fade:120ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-enter:cubic-bezier(0,0,.2,1);
  --ease-exit:cubic-bezier(.4,0,1,1);

  /* ---------------------------------------------------------------- 9. KATMAN */
  --z-base:0; --z-sticky:10; --z-header:50; --z-dropdown:100; --z-bulk:200; --z-drawer:300; --z-modal:400; --z-toast:500; --z-tooltip:600;
}

@media (min-width:768px){ :root{ --gutter:24px; } }
@media (min-width:1024px){ :root{ --gutter:32px; } }
@media (max-width:1023.98px){ :root{ --header-h:64px; } }

/* Azaltılmış hareket: kaydırma/ölçek animasyonları kapanır, yalnız kısa opaklık kalır */
@media (prefers-reduced-motion:reduce){
  :root{ --d-instant:0ms; --d-fast:0ms; --d-base:0ms; --d-slow:0ms; --d-exit:0ms; --d-fade:120ms; }
}

/* ==========================================================================
   GEÇİŞ TAKMA ADLARI (legacy)
   std.css, admin-v3.css, event-tools.css ve admin-responsive.css'teki eski adlar
   yeni rollere yönlenir. Eski :root blokları bu dosya eklenince SİLİNİR.
   Yeni kodda KULLANMAYIN; tüm görünümler taşınınca bu blok kaldırılır.
   ========================================================================== */
:root{
  --paper:var(--bg-surface);  --surface:var(--bg-surface);  --surface-alt:var(--bg-muted);
  --forest:var(--chrome);     --forest-soft:var(--chrome-3);
  --moss:var(--on-chrome-3);  --moss-soft:var(--bg-muted);
  --clay:var(--primary);      --clay-deep:var(--primary-hover); --clay-soft:var(--bg-muted);  /* eski eylem rengi → mürekkep, KIRMIZI DEĞİL */
  --ink:var(--text);          --ink-muted:var(--text-2);  --ink-faint:var(--text-3);
  --on-dark:var(--on-chrome); --on-dark-muted:var(--on-chrome-2);
  --line:var(--border);       --line-strong:var(--border-strong);
  --radius-xs:var(--r-sm);    --radius-sm:var(--r-md);    --radius:var(--r-lg);  --radius-lg:var(--r-xl);  --radius-xl:var(--r-2xl);
  --sans:var(--font-body);    --shell:var(--container);
  --shadow-soft:var(--e1);    --shadow-lift:var(--e3);
  /* yönetim eski adları (event-tools.css, admin-responsive.css bunlara bağlı — silmeyin) */
  --admin-bg:var(--bg-canvas); --admin-ink:var(--text); --admin-line:var(--border);
  --admin-pine:var(--chrome-2); --admin-green:var(--success); --admin-lime:var(--success-soft);
}