@layer tokens, base, layout, sections, utilities;

@layer tokens {
  :root {
    /* Tipografi aileleri */
    --font-display: "Archivo Variable", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Archivo Variable", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono Variable", ui-monospace, "SFMono-Regular", Menlo, monospace;

    /* Geometri */
    --radius: 2px;
    --container: 1440px;
    --gutter: 24px;
    --hairline: 1px;

    /* Tipografi olcegi — clamp(min, akiskan, max) */
    --step--1: clamp(12px, 0.72rem + 0.12vw, 13px);
    --step-0: clamp(16px, 0.95rem + 0.14vw, 17px);
    --step-1: clamp(18px, 1.05rem + 0.28vw, 21px);
    --step-2: clamp(21px, 1.18rem + 0.55vw, 27px);
    --step-3: clamp(25px, 1.3rem + 1.05vw, 36px);
    --step-4: clamp(30px, 1.35rem + 2.1vw, 52px);
    --step-5: clamp(36px, 1.2rem + 4.6vw, 80px);
    --step-6: clamp(44px, 0.9rem + 7vw, 116px);

    /* Aksan rolleri — limonun nerede hangi anlamda kullanildigi burada tanimlanir.
       Kural: limon ACIK zeminde metin/ikon rengi OLAMAZ (kontrast yetersiz).
       Sadece dolgu olarak, ya da koyu zemin uzerinde renk olarak kullanilir. */
    --accent: #CDF03A;
    --on-accent: #12120F;

    /* Ikon karosu olculeri */
    --icon-tile: 44px;
    --icon-tile-sm: 32px;

    /* Bosluk olcegi — 4px tabanli */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;
    --space-11: 160px;
    --space-12: 200px;
  }

  :root[data-theme="light"] {
    /* Tema-bagimsiz koyu yuzey: .u-invert bloklari her iki temada da KOYU kalir.
       Tema ile donen --ink kullanilirsa koyu temada blok aciga doner ve
       uzerindeki limon metin kontrasti coker. */
    --surface-dark: #12120F;
    --on-surface-dark: #F4F4F0;
    --paper: #F4F4F0;
    --paper-2: #EAEAE4;
    --ink: #12120F;
    --ink-muted: #5C5C54;
    --lime: #CDF03A;
    --on-lime: #12120F;
    --line: color-mix(in srgb, var(--ink) 16%, transparent);
    --line-strong: color-mix(in srgb, var(--ink) 34%, transparent);
  }

  :root[data-theme="dark"] {
    /* Koyu temada blok, sayfa zemininden hairline ve hafif ton farkiyla ayrisir. */
    --surface-dark: #131314;
    --on-surface-dark: #F4F4F0;
    --paper: #0A0A0B;
    --paper-2: #131314;
    --ink: #F2F2EF;
    --ink-muted: #8F8F88;
    --lime: #CDF03A;
    --on-lime: #12120F;
    --line: color-mix(in srgb, var(--ink) 20%, transparent);
    --line-strong: color-mix(in srgb, var(--ink) 40%, transparent);
  }
}