/* tokens.css — tasarım tokenları.
   Bileşen dosyasında (styles.css) sabit #hex, px tipografi veya px boşluk
   kullanılmaz; her değer buradan gelir.

   Renk yönü (WEBSITE_BRIEF §6, ASSET_MANIFEST §4): koyu zemin + TEK vurgu.
   Trading uygulamalarının yeşil/kırmızı ikilisi kullanılmaz — yanlış kategori
   sinyali verir. Vurgu, pirinç/kum tonunda nötr bir renk. */

:root {
  color-scheme: dark;

  /* --- Renk --- */
  --color-bg:            #0b0d10;
  --color-bg-raised:     #12151a;
  --color-bg-sunken:     #08090c;
  --color-border:        #232830;
  --color-border-strong: #333a45;

  --color-text:          #e8eaed;
  --color-text-muted:    #a4abb6;
  --color-text-faint:    #7c848f;

  --color-accent:        #d7b375;
  --color-accent-strong: #e8c992;
  --color-accent-dim:    rgba(215, 179, 117, 0.14);

  --color-focus:         #e8c992;

  /* --- Tipografi --- */
  --font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
               system-ui, "Helvetica Neue", Arial, sans-serif;

  --weight-regular:  400;
  --weight-medium:   510;
  --weight-semibold: 620;

  /* Akışkan ölçek: min → maks, 360px–1440px arası interpolasyon */
  --text-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem,     0.97rem + 0.18vw, 1.0625rem);
  --text-lg:   clamp(1.0625rem, 1.01rem + 0.32vw, 1.1875rem);
  --text-xl:   clamp(1.25rem,  1.16rem + 0.44vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,   1.33rem + 0.85vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);

  --leading-tight:   1.18;
  --leading-snug:    1.35;
  --leading-normal:  1.62;
  --leading-relaxed: 1.72;

  --tracking-wide:  0.08em;
  --tracking-tight: -0.018em;

  /* --- Boşluk (4px tabanlı) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5.5rem;

  --section-gap: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem);

  /* --- Ölçü --- */
  --measure:      68ch;  /* gövde metni azami satır uzunluğu */
  --measure-wide: 78ch;
  --container:    72rem;
  --container-narrow: 46rem;

  /* --- Kenar, çizgi, gölge --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --border-hairline: 1px solid var(--color-border);

  /* --- Kırılma noktaları ---
     NOT: CSS custom property'leri @media sorgusunda kullanılamaz (spec gereği
     var() media query context'inde çözülmez). Aşağıdaki değerler kanonik
     kaynaktır; styler.css'teki @media literal'leri bunlarla EŞLEŞMEK ZORUNDA.
     Değiştirirken iki yeri birlikte değiştir. */
  --bp-sm: 30rem;   /*  480px */
  --bp-md: 48rem;   /*  768px */
  --bp-lg: 64rem;   /* 1024px */
  --bp-xl: 90rem;   /* 1440px */

  /* --- Hareket --- */
  --motion-fast: 120ms;
  --motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
}