/* ==========================================================================
   CROD Apps — Design Tokens
   --------------------------------------------------------------------------
   TEK DEĞİŞTİRİLECEK DOSYA / THE ONLY FILE YOU NEED TO SWAP.
   Tema: "5j · diff" terminal şablonu (Design/crod_apps.zip → CROD Terminal Şablonlar).
   Hazır bir tasarım şablonuna geçerken sadece bu dosyadaki değerleri
   güncelleyin; diğer CSS dosyaları bu değişkenleri tüketir.
   When adapting a purchased design template, override the values here only.
   ========================================================================== */

:root {
  /* ---------- Renk paleti / Color palette ------------------------------- */
  --color-ink:        #121312;
  --color-paper:      #ffffff;
  --color-paper-2:    #f6f6f3;
  --color-paper-3:    #ecebe8;
  --color-line:       #e3e3df;
  --color-line-strong:#c9c9c3;
  --color-gray-1:     #9a9a92;   /* logo soluk kısımları */
  --color-gray-2:     #666666;

  --color-green:      oklch(0.62 0.17 145);   /* imleç, vurgu */
  --color-green-text: oklch(0.45 0.14 145);   /* beyaz üstünde okunur yeşil */

  /* ---------- Anlamsal renkler / Semantic colors ------------------------ */
  --color-bg:            var(--color-paper);
  --color-bg-subtle:     var(--color-paper-2);
  --color-bg-muted:      var(--color-paper-3);
  --color-bg-inverse:    var(--color-ink);

  --color-text:          var(--color-ink);
  --color-text-muted:    var(--color-gray-2);
  --color-text-faint:    var(--color-gray-1);
  --color-text-inverse:  var(--color-paper);
  --color-text-on-brand: var(--color-paper);

  --color-border:        var(--color-line);
  --color-border-strong: var(--color-line-strong);

  --color-primary:       var(--color-ink);
  --color-primary-hover: #33342f;
  --color-accent:        var(--color-green);
  --color-accent-text:   var(--color-green-text);
  --color-focus-ring:    var(--color-green);
  --color-link:          var(--color-ink);

  /* Diff bloğu */
  --diff-del-bg:   #fdecea;
  --diff-del-text: #8e2a1f;
  --diff-del-num:  #d39a93;
  --diff-del-mark: #c0392b;
  --diff-add-bg:   oklch(0.96 0.05 145);
  --diff-add-text: oklch(0.35 0.12 145);
  --diff-add-mark: oklch(0.5 0.15 145);

  /* ---------- Tipografi / Typography ------------------------------------
     JetBrains Mono cihazda kuruluysa o, değilse sistemin tek aralıklı yazı
     tipi kullanılır. Web fontu yüklenmez (CSP: font-src 'self', üçüncü taraf
     yok); istenirse woff2 dosyası assets/fonts/ altına konup @font-face ile
     bağlanabilir. */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
               Consolas, "Liberation Mono", monospace;
  --font-sans: var(--font-mono);
  --font-display: var(--font-mono);

  --text-xs:   0.8125rem;  /* 13px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3.875rem;   /* 62px */

  --leading-tight:  1.05;
  --leading-snug:   1.35;
  --leading-normal: 1.65;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 700;
  --weight-bold:     800;

  --tracking-tight: -0.045em;
  --tracking-wide:  0.12em;

  /* ---------- Boşluk ölçeği / Spacing scale ----------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  /* ---------- Yerleşim / Layout ----------------------------------------- */
  --container-max:   1200px;
  --container-narrow: 820px;
  --container-pad:   clamp(1.25rem, 4.6vw, 3.5rem);   /* tasarımda 56px */
  --section-pad-y:   var(--space-7);
  --header-height:   76px;

  /* ---------- Köşe yarıçapı / Radii --------------------------------------
     Terminal teması köşesizdir; yalnızca uygulama ikonları yuvarlaktır. */
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-full: 0;
  --radius-icon: 23%;

  /* ---------- Gölgeler / Shadows (tema gölgesiz) ------------------------- */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(18, 19, 18, 0.08);   /* yalnız açılır menü */
  --shadow-lg: none;

  /* ---------- Hareket / Motion ------------------------------------------ */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ---------- Katmanlar / Z-index --------------------------------------- */
  --z-header:  100;
  --z-overlay: 200;
}

/* --------------------------------------------------------------------------
   Koyu tema / Dark theme
   <html data-theme="dark"> ile veya sistem tercihiyle devreye girer.
   İki blok aynı değerleri taşır; birini değiştirirseniz diğerini de değiştirin.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            #121312;
    --color-bg-subtle:     #1a1b1a;
    --color-bg-muted:      #242523;
    --color-bg-inverse:    #ecebe8;
    --color-text:          #ecebe8;
    --color-text-muted:    #a3a39b;
    --color-text-faint:    #77776f;
    --color-text-inverse:  #121312;
    --color-text-on-brand: #121312;
    --color-border:        #2e2f2c;
    --color-border-strong: #45463f;
    --color-primary:       #ecebe8;
    --color-primary-hover: #ffffff;
    --color-accent:        oklch(0.82 0.17 145);
    --color-accent-text:   oklch(0.82 0.17 145);
    --color-link:          #ecebe8;
    --diff-del-bg:   #34191a;
    --diff-del-text: #f2aaa0;
    --diff-del-num:  #8f5550;
    --diff-del-mark: #f2aaa0;
    --diff-add-bg:   oklch(0.27 0.06 145);
    --diff-add-text: oklch(0.86 0.14 145);
    --diff-add-mark: oklch(0.82 0.17 145);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --color-bg:            #121312;
  --color-bg-subtle:     #1a1b1a;
  --color-bg-muted:      #242523;
  --color-bg-inverse:    #ecebe8;
  --color-text:          #ecebe8;
  --color-text-muted:    #a3a39b;
  --color-text-faint:    #77776f;
  --color-text-inverse:  #121312;
  --color-text-on-brand: #121312;
  --color-border:        #2e2f2c;
  --color-border-strong: #45463f;
  --color-primary:       #ecebe8;
  --color-primary-hover: #ffffff;
  --color-accent:        oklch(0.82 0.17 145);
  --color-accent-text:   oklch(0.82 0.17 145);
  --color-link:          #ecebe8;
  --diff-del-bg:   #34191a;
  --diff-del-text: #f2aaa0;
  --diff-del-num:  #8f5550;
  --diff-del-mark: #f2aaa0;
  --diff-add-bg:   oklch(0.27 0.06 145);
  --diff-add-text: oklch(0.86 0.14 145);
  --diff-add-mark: oklch(0.82 0.17 145);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
}