/* 1. TOKENS: tüm renkler ve ölçüler burada. Açık ve koyu tema Bootstrap'in data-bs-theme özelliğiyle değişir. */

:root,
[data-bs-theme="light"] {
  --bg: #FFFFFF;
  --bg-soft: #F4F5F7;
  --fg: #12151C;
  --fg-rgb: 18, 21, 28;
  --muted: #5B6474;
  --line: #E6E8EC;
  --field-line: #7C8598;               /* form alanı çerçevesi: arka plana en az 3:1 (WCAG 1.4.11) */
  --surface: #FFFFFF;                 /* opak paneller: modal, menü, çekmece */

  --navy: #08153A;
  --navy-2: #102766;
  --neon: #3DFF8F;
  --neon-ink: #03140B;

  --glass: rgba(255, 255, 255, .72);
  --glass-line: rgba(15, 23, 42, .1);
  --glass-hi: rgba(255, 255, 255, .9);
  --glass-shadow: rgba(15, 23, 42, .22);

  --ink: var(--navy);                 /* vurgu metni */
  --accent-line: var(--navy);         /* seçili durum çizgisi/çubuğu: açık zeminde neon görünmez, lacivert kullan */
  --chip-bg: var(--navy);             /* dolu vurgu yüzeyi */
  --chip-fg: var(--neon);
  --hover-line: rgba(8, 21, 58, .3);
  --grid-line: rgba(15, 23, 42, .06);

  --amb-1: rgba(61, 255, 143, .2);
  --amb-2: rgba(31, 91, 255, .1);
  --amb-3: rgba(31, 91, 255, .09);
}

[data-bs-theme="dark"] {
  --bg: #070B18;
  --bg-soft: #0C1226;
  --fg: #EDF0F7;
  --fg-rgb: 237, 240, 247;
  --muted: #9AA4BA;
  --line: rgba(255, 255, 255, .1);
  --field-line: rgba(190, 203, 232, .62);
  --surface: #0F1631;

  --glass: rgba(17, 25, 52, .62);
  --glass-line: rgba(255, 255, 255, .12);
  --glass-hi: rgba(255, 255, 255, .08);
  --glass-shadow: rgba(0, 0, 0, .6);

  --ink: var(--neon);
  --accent-line: var(--neon);
  --chip-bg: var(--neon);
  --chip-fg: var(--neon-ink);
  --hover-line: rgba(61, 255, 143, .45);
  --grid-line: rgba(255, 255, 255, .05);

  --amb-1: rgba(61, 255, 143, .1);
  --amb-2: rgba(46, 102, 255, .18);
  --amb-3: rgba(46, 102, 255, .12);
}

/* Bootstrap değişkenlerini tasarım token'larına bağla */
:root,
[data-bs-theme] {
  /* Tipografi: Google Sans Flex (değişken yazı tipi, opsz + wght eksenleri). Başlıkta büyük optik boyut otomatik seçilir. */
  --font: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Yazı ölçeği: tüm font-size değerleri bu basamaklardan gelir */
  --fs-2xs: .75rem;      /* 12  etiket, rozet */
  --fs-xs: .8125rem;     /* 13  meta, ayrıntı */
  --fs-sm: .875rem;      /* 14  yardımcı gövde */
  --fs-md: .9375rem;     /* 15  arayüz, düğme */
  --fs-base: 1rem;       /* 16  gövde */
  --fs-lg: 1.0625rem;    /* 17  kart başlığı (küçük) */
  --fs-xl: 1.125rem;     /* 18  kart başlığı */
  --fs-2xl: 1.25rem;     /* 20  öne çıkan kart başlığı */
  --fs-3xl: 1.375rem;    /* 22 */
  --fs-4xl: 1.5rem;      /* 24  bölüm alt başlığı */
  --fs-5xl: 1.75rem;     /* 28 */
  --fs-6xl: 2rem;        /* 32 */

  /* Ağırlık ve satır aralığı */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.6; --lh-prose: 1.7;
  --tr-display: -.022em; --tr-heading: -.014em; --tr-caps: .08em;
  --radius: 22px;
  --section: clamp(64px, 9vw, 120px);

  --bs-body-font-family: var(--font);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-body-color-rgb: var(--fg-rgb);
  --bs-secondary-color: var(--muted);
  --bs-heading-color: var(--fg);
  --bs-border-color: var(--line);
  --bs-emphasis-color: var(--fg);
  --bs-link-color-rgb: var(--fg-rgb);
  --bs-link-hover-color-rgb: var(--fg-rgb);
  --bs-border-radius-pill: 999px;
}