/* =============================================================================
   Muhasebe Yatırım — tasarım sistemi (katman 1: temel)
   Bu dosya yalnız tasarım değişkenlerini, temel tipografiyi ve form/buton gibi
   ilkel öğeleri tanımlar. Düzen ve bileşenler app.css içindedir.

   Kurallar:
   - Renk, boşluk, yarıçap ve gölge doğrudan yazılmaz; hep bir token kullanılır.
   - Açık ve koyu tema aynı token adlarını doldurur; bileşenler temayı bilmez.
   - Panel beyaz ağırlıklıdır: geniş yüzeyler (sayfa, kart, kenar çubuğu) beyaz
     ya da nötr gridir. Yeşil ikincil renktir; yalnız birincil düğme, seçili
     öğe, pozitif değer, bağlantı ve odak halkasında görünür.
   - En küçük metin 11px'tir. Erişilebilirlik için 8-9px metin kullanılmaz.
   - Renk tek başına anlam taşımaz; yön/işaret ile birlikte verilir.
   ========================================================================== */

@layer tokens, base, primitives;

@layer tokens {
  :root {
    color-scheme: light;

    /* --- Yüzeyler: beyaz ağırlıklı, nötr gri ---------------------------- */
    /* Panel beyaz zemin üzerine kurulur; yeşil yalnız vurgu rengidir ve
       hiçbir geniş yüzeye uygulanmaz. */
    --surface-page: #f3f4f6;
    --surface-card: #ffffff;
    --surface-sunken: #eef0f3;
    --surface-raised: #f9fafb;
    --surface-sidebar: #ffffff;
    --surface-inverse: #111827;
    --surface-overlay: rgb(17 24 39 / 45%);

    /* --- Metin: nötr, yüksek kontrast ----------------------------------- */
    --ink-strong: #0f172a;
    --ink: #1f2937;
    --ink-soft: #4b5563;
    --ink-muted: #6b7280;
    --ink-on-brand: #ffffff;
    --ink-on-inverse: #f9fafb;
    --ink-on-inverse-soft: #cbd5e1;

    /* --- Vurgu (yeşil) ve durumlar -------------------------------------- */
    /* --brand yalnız birincil düğme, seçili öğe, bağlantı ve odak halkasında
       kullanılır; --brand-soft küçük seçim/rozet zeminleri içindir. */
    --brand: #0f7b5f;
    --brand-hover: #0b6249;
    --brand-ink: #0b6249;
    --brand-soft: #e6f4ef;
    --positive: #15803d;
    --positive-soft: #ecfdf3;
    --negative: #b91c1c;
    --negative-soft: #fef2f2;
    --warning: #b45309;
    --warning-soft: #fffbeb;
    --info: #1d4ed8;
    --info-soft: #eff6ff;

    /* --- Çizgiler ------------------------------------------------------- */
    --line: #e5e7eb;
    --line-strong: #d1d5db;

    /* --- Tipografi ------------------------------------------------------ */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --text-2xs: 0.6875rem;  /* 11px — yalnız etiket ve rozetlerde */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.8125rem;   /* 13px */
    --text-base: 0.875rem;  /* 14px — gövde */
    --text-md: 1rem;        /* 16px */
    --text-lg: 1.25rem;     /* 20px */
    --text-xl: 1.5rem;      /* 24px */
    --text-2xl: 1.75rem;    /* 28px */
    --leading-tight: 1.25;
    --leading-normal: 1.55;
    --leading-loose: 1.75;
    --tracking-label: 0.08em;

    /* --- Boşluk --------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* --- Biçim ---------------------------------------------------------- */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgb(15 23 42 / 5%);
    --shadow: 0 2px 8px rgb(15 23 42 / 6%), 0 1px 2px rgb(15 23 42 / 4%);
    --shadow-lg: 0 18px 44px rgb(15 23 42 / 14%);
    --ring: 0 0 0 3px rgb(15 123 95 / 25%);

    /* --- Hareket -------------------------------------------------------- */
    --ease: cubic-bezier(0.2, 0.6, 0.25, 1);
    --duration-fast: 120ms;
    --duration: 180ms;

    /* --- Düzen ölçüleri ------------------------------------------------- */
    --sidebar-width: 248px;
    --topbar-height: 104px;
    --content-gutter: var(--space-8);
  }

  /* Koyu tema: nötr antrasit; yeşil yine yalnız vurgu. Yalnız token değerleri
     değişir, hiçbir bileşen kuralı değişmez. */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --surface-page: #101215;
    --surface-card: #181b20;
    --surface-sunken: #131619;
    --surface-raised: #1d2127;
    --surface-sidebar: #141719;
    --surface-inverse: #f3f4f6;
    --surface-overlay: rgb(0 0 0 / 60%);

    --ink-strong: #f8fafc;
    --ink: #e5e7eb;
    --ink-soft: #b4bac4;
    --ink-muted: #8b93a1;
    --ink-on-brand: #ffffff;
    --ink-on-inverse: #111827;
    --ink-on-inverse-soft: #4b5563;

    --brand: #22b07f;
    --brand-hover: #3cc794;
    --brand-ink: #6fd8ad;
    --brand-soft: rgb(34 176 127 / 14%);
    --positive: #4ade80;
    --positive-soft: rgb(74 222 128 / 12%);
    --negative: #f87171;
    --negative-soft: rgb(248 113 113 / 12%);
    --warning: #fbbf24;
    --warning-soft: rgb(251 191 36 / 12%);
    --info: #60a5fa;
    --info-soft: rgb(96 165 250 / 12%);

    --line: #272c33;
    --line-strong: #383f48;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow: 0 2px 10px rgb(0 0 0 / 45%);
    --shadow-lg: 0 20px 48px rgb(0 0 0 / 55%);
    --ring: 0 0 0 3px rgb(34 176 127 / 35%);
  }

  /* Kullanıcı tercihi "sistem" ise işletim sisteminin ayarı geçerlidir.
     Uygulamanın varsayılanı açık temadır; bu blok yalnız kullanıcı "sistem"i
     seçtiğinde devreye girer. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --surface-page: #101215;
      --surface-card: #181b20;
      --surface-sunken: #131619;
      --surface-raised: #1d2127;
      --surface-sidebar: #141719;
      --surface-inverse: #f3f4f6;
      --surface-overlay: rgb(0 0 0 / 60%);
      --ink-strong: #f8fafc;
      --ink: #e5e7eb;
      --ink-soft: #b4bac4;
      --ink-muted: #8b93a1;
      --ink-on-brand: #ffffff;
      --ink-on-inverse: #111827;
      --ink-on-inverse-soft: #4b5563;
      --brand: #22b07f;
      --brand-hover: #3cc794;
      --brand-ink: #6fd8ad;
      --brand-soft: rgb(34 176 127 / 14%);
      --positive: #4ade80;
      --positive-soft: rgb(74 222 128 / 12%);
      --negative: #f87171;
      --negative-soft: rgb(248 113 113 / 12%);
      --warning: #fbbf24;
      --warning-soft: rgb(251 191 36 / 12%);
      --info: #60a5fa;
      --info-soft: rgb(96 165 250 / 12%);
      --line: #272c33;
      --line-strong: #383f48;
      --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
      --shadow: 0 2px 10px rgb(0 0 0 / 45%);
      --shadow-lg: 0 20px 48px rgb(0 0 0 / 55%);
      --ring: 0 0 0 3px rgb(34 176 127 / 35%);
    }
  }

  /* Yüksek kontrast talebi: kenarlıklar ve metin koyulaşır. */
  @media (prefers-contrast: more) {
    :root {
      --line: #9ca3af;
      --line-strong: #6b7280;
      --ink-muted: #4b5563;
      --ink-soft: #374151;
    }
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  html,
  body,
  #app {
    height: 100%;
    margin: 0;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--ink);
    background: var(--surface-page);
    overflow: hidden;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1,
  h2,
  h3,
  p,
  figure {
    margin: 0;
  }

  h1 {
    font-size: var(--text-xl);
    font-weight: 640;
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    color: var(--ink-strong);
  }

  h2 {
    font-size: var(--text-md);
    font-weight: 640;
    letter-spacing: -0.01em;
    color: var(--ink-strong);
  }

  h3 {
    font-size: var(--text-sm);
    font-weight: 640;
    color: var(--ink-strong);
  }

  p {
    line-height: var(--leading-normal);
  }

  small,
  .muted {
    color: var(--ink-muted);
    font-size: var(--text-xs);
  }

  a {
    color: var(--brand-ink);
    text-underline-offset: 3px;
  }

  code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
  }

  [hidden] {
    display: none !important;
  }

  /* Klavye kullanıcıları için her odaklanabilir öğede aynı halka. */
  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  ::selection {
    background: var(--brand-soft);
    color: var(--ink-strong);
  }

  /* İnce, temaya uyumlu kaydırma çubuğu. */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }

  .skip-link {
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
    color: var(--brand-ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform var(--duration) var(--ease);
  }

  .skip-link:focus {
    transform: translateY(0);
  }
}

@layer primitives {
  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 38px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--ink);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease),
      border-color var(--duration-fast) var(--ease),
      color var(--duration-fast) var(--ease),
      box-shadow var(--duration-fast) var(--ease);
  }

  button:hover:not(:disabled) {
    background: var(--surface-raised);
    border-color: var(--line-strong);
    color: var(--ink-strong);
  }

  button:active:not(:disabled) {
    transform: translateY(0.5px);
  }

  button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  button.primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--ink-on-brand);
    box-shadow: var(--shadow-sm);
  }

  button.primary:hover:not(:disabled) {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--ink-on-brand);
  }

  button.danger {
    color: var(--negative);
    border-color: var(--line-strong);
  }

  button.danger:hover:not(:disabled) {
    background: var(--negative-soft);
    border-color: var(--negative);
    color: var(--negative);
  }

  button.ghost {
    background: transparent;
    border-color: transparent;
  }

  label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink-soft);
  }

  input,
  select,
  textarea {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: var(--space-3);
    margin-top: var(--space-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--ink-strong);
    transition: border-color var(--duration-fast) var(--ease),
      box-shadow var(--duration-fast) var(--ease);
  }

  input:hover:not(:disabled),
  select:hover:not(:disabled) {
    border-color: var(--line-strong);
  }

  input:focus,
  select:focus,
  textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--ring);
  }

  input:disabled,
  select:disabled {
    background: var(--surface-sunken);
    color: var(--ink-muted);
    cursor: not-allowed;
  }

  input::placeholder {
    color: var(--ink-muted);
  }

  input[aria-invalid="true"],
  select[aria-invalid="true"] {
    border-color: var(--negative);
    background: var(--negative-soft);
  }

  select {
    appearance: none;
    padding-right: var(--space-8);
    background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
      linear-gradient(135deg, currentcolor 50%, transparent 50%);
    background-position: right 18px center, right 13px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }

  /* Para ve tarih her yerde aynı genişlikte rakamlarla hizalanır. */
  .numeric,
  td,
  .stat strong,
  .report-date {
    font-variant-numeric: tabular-nums;
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}