/*
  Support AI™ — web tasarım token'ları ("Mono + Sinyal")

  Kaynak: Android uygulaması
    app/src/main/res/values/colors_vintage.xml        (açık tema)
    app/src/main/res/values-night/colors_vintage.xml  (koyu tema)
    app/src/main/res/values/dimens_tokens.xml         (radius, boşluk)
    ui/Onboarding/OnbGlowView.kt                      (arka plan ışığı)

  Kurallar
  - Değerler YALNIZ burada tanımlanır; diğer dosyalar var(--…) kullanır.
  - Saf siyah/beyaz metin yok: mürekkep #171717, koyuda #E8E9EC.
  - Vurgu renkle değil DOLULUKLA yapılır (birincil aksiyon dolu mürekkep hap).
    Tek renk istisnası Sinyal mavisi: komut, bağlantı, seçili durum, ışık.
  - Nane (#52F6BB) yalnız marka işareti ve arka plandaki ışıkta.
  - Tema `:root[data-theme]` ile seçilir; seçiciyi `:root` olmadan yazma.
*/

:root {
  color-scheme: light;

  /* Yazı tipleri */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  /* Tüm sitede tek yazı ailesi Geist (kullanıcı isteği); eski "serif" vurgular da Geist. */
  --font-serif: var(--font-sans);
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

  /* Zeminler */
  --canvas: #FFFFFF;
  --canvas-fade: rgba(255, 255, 255, 0);
  --canvas-blur: rgba(255, 255, 255, 0.72);
  --surface: #F3F3F3;
  --surface-raised: #FFFFFF;
  --sunken: #EBEBEB;
  --sidebar: #F7F7F7;

  /* Çizgiler: ince olan ayırır, kalın olan çerçeveler */
  --hairline: #E6E6E6;
  --hairline-strong: #D4D4D4;

  /* Mürekkep */
  --ink: #171717;
  --ink-2: #666666;
  --ink-3: #8F8F8F;
  --ink-inverse: #FFFFFF;

  /* Birincil aksiyon: dolu mürekkep */
  --primary: #171717;
  --primary-hover: #2B2B2B;
  --on-primary: #FFFFFF;

  /* Sinyal mavisi */
  --accent: #1E88E5;
  --accent-strong: #1565C0;
  --accent-soft: #E8F2FC;
  --accent-line: #BBD9F7;
  --user-bubble: #DCE9FA;

  /* Marka */
  --mint: #52F6BB;
  --mint-deep: #2FD49A;
  /* Model ikon karosu (Android'deki gibi tek renk SVG) */
  --tile-bg: #F3F3F3;
  --tile-line: #E6E6E6;
  --tile-ink: #171717;

  /* Durum */
  --danger: #C0392B;
  --danger-soft: #FBEDEB;
  --caution: #E0A800;
  --success: #1E88E5;

  /* Kod */
  --code-bg: #F7F7F7;
  --code-head: #EFEFEF;
  --code-key: #1565C0;
  --code-str: #0E7A55;
  --code-num: #B26B00;
  --code-com: #8F8F8F;

  /* Işık (OnbGlowView ile aynı dil) */
  --glow-a: rgba(30, 136, 229, 0.18);
  --glow-b: rgba(92, 172, 245, 0.12);
  --glow-mint: rgba(82, 246, 187, 0.20);

  /* Gölge: görünmesin, hissedilsin */
  --shadow-xs: 0 1px 2px rgba(23, 23, 23, 0.05);
  --shadow-float: 0 1px 2px rgba(23, 23, 23, 0.04), 0 14px 32px -16px rgba(23, 23, 23, 0.22);
  --shadow-pop: 0 2px 6px rgba(23, 23, 23, 0.04), 0 28px 64px -28px rgba(23, 23, 23, 0.38);
  --scrim: rgba(10, 10, 10, 0.32);

  /* Köşe yarıçapları (dimens_tokens.xml) */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Boşluk ölçeği */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* Tipografi ölçeği */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-h3: clamp(22px, 2.2vw, 28px);
  --fs-h2: clamp(34px, 4.6vw, 58px);
  --fs-h1: clamp(48px, 8.4vw, 104px);
  --tracking-tight: -0.035em;
  --tracking-display: -0.045em;
  --tracking-overline: 0.14em;

  /* Hareket */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 720ms;

  /* Yerleşim */
  --container: 1200px;
  --gutter: 24px;
  --header-h: 64px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #010101;
  --canvas-fade: rgba(1, 1, 1, 0);
  --canvas-blur: rgba(1, 1, 1, 0.7);
  --surface: #161616;
  --surface-raised: #232323;
  --sunken: #161616;
  --sidebar: #0B0B0B;

  --hairline: #232323;
  --hairline-strong: #323232;

  --ink: #E8E9EC;
  --ink-2: #A6A9B0;
  --ink-3: #787C85;
  --ink-inverse: #0A0A0A;

  --primary: #EDEDED;
  --primary-hover: #FFFFFF;
  --on-primary: #0A0A0A;

  --accent: #5CACF5;
  --accent-strong: #8EC5F8;
  --accent-soft: #12243A;
  --accent-line: #1D3A5C;
  --user-bubble: #232323;

  --danger: #F2766E;
  --danger-soft: #2A1512;
  --caution: #F0B429;
  --success: #EDEDED;

  --tile-bg: #161616;
  --tile-line: #2A2A2A;
  --tile-ink: #E8E9EC;

  --code-bg: #0B0B0B;
  --code-head: #161616;
  --code-key: #5CACF5;
  --code-str: #52F6BB;
  --code-num: #F0B429;
  --code-com: #787C85;

  --glow-a: rgba(30, 136, 229, 0.34);
  --glow-b: rgba(92, 172, 245, 0.20);
  --glow-mint: rgba(82, 246, 187, 0.16);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 36px -16px rgba(0, 0, 0, 0.85);
  --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.5), 0 30px 70px -28px rgba(0, 0, 0, 0.95);
  --scrim: rgba(0, 0, 0, 0.62);
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --header-h: 58px;
  }
}