/* Balanseo — "lofi pastel" tasarım belirteçleri.
   Açık tema: sıcak kâğıt zemin + pastel vurgular. Koyu tema: "gece lofi" mor-lacivert. */
@property --val { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg: #faf6f0;
  --bg-2: #f4eee5;
  --surface: #fffdf9;
  --surface-2: #f6f1ea;
  --surface-3: #efe8de;
  --line: rgba(64, 52, 92, .09);
  --line-2: rgba(64, 52, 92, .16);
  --ink: #2d2a3e;
  --ink-2: #6e6a80;
  --ink-3: #9d98ab;

  /* pasteller: zemin (-bg) ve okunur koyu ton (-ink) */
  --lavender: #8b7cf6; --lavender-bg: #ece8ff; --lavender-ink: #5b4bc4;
  --peach: #ffcdb2;    --peach-bg: #ffeee4;    --peach-ink: #b4572a;
  --mint: #bde7d3;     --mint-bg: #e3f5ec;     --mint-ink: #2f7d58;
  --sky: #c4ddf7;      --sky-bg: #e6f0fc;      --sky-ink: #36689c;
  --butter: #fbe7a1;   --butter-bg: #fdf4d3;   --butter-ink: #8a6a12;
  --rose: #f7c1cf;     --rose-bg: #fde6ec;     --rose-ink: #b23d5e;

  --brand: var(--lavender);
  --brand-bg: var(--lavender-bg);
  --brand-ink: var(--lavender-ink);
  --on-brand: #ffffff;

  /* anlamsal eşlemeler */
  --critical-bg: var(--rose-bg);   --critical: var(--rose-ink);
  --high-bg: var(--peach-bg);      --high: var(--peach-ink);
  --medium-bg: var(--butter-bg);   --medium: var(--butter-ink);
  --low-bg: var(--sky-bg);         --low: var(--sky-ink);
  --ok-bg: var(--mint-bg);         --ok: var(--mint-ink);
  --info-bg: var(--surface-3);     --info: var(--ink-2);

  --r-xs: 8px; --r-s: 12px; --r: 18px; --r-l: 24px; --r-xl: 32px; --r-pill: 999px;
  --shadow-s: 0 1px 2px rgba(64, 44, 110, .05), 0 2px 8px rgba(64, 44, 110, .04);
  --shadow: 0 2px 4px rgba(64, 44, 110, .04), 0 12px 32px -8px rgba(64, 44, 110, .12);
  --shadow-l: 0 24px 64px -16px rgba(64, 44, 110, .28);
  --glow: 0 10px 30px -10px color-mix(in srgb, var(--brand) 70%, transparent);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .45s;
  --sidebar-w: 236px;
  --max: 1180px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.4 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: .05;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1a2b; --bg-2: #181626; --surface: #24223a; --surface-2: #2b2944; --surface-3: #34314f;
    --line: rgba(220, 210, 255, .08); --line-2: rgba(220, 210, 255, .15);
    --ink: #ece8f6; --ink-2: #aaa4c2; --ink-3: #7c7696;
    --lavender: #a99cff; --lavender-bg: #332e5c; --lavender-ink: #c8bfff;
    --peach-bg: #45302e; --peach-ink: #ffc2a1; --mint-bg: #233f39; --mint-ink: #9fe0c0;
    --sky-bg: #263a55; --sky-ink: #a9cdf5; --butter-bg: #45401f; --butter-ink: #f3dc8a;
    --rose-bg: #4a2a3a; --rose-ink: #f6a9bf; --on-brand: #1c1a2b;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 12px 32px -8px rgba(0, 0, 0, .5); --shadow-l: 0 24px 64px -16px rgba(0, 0, 0, .7);
    --grain-opacity: .07; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1c1a2b; --bg-2: #181626; --surface: #24223a; --surface-2: #2b2944; --surface-3: #34314f;
  --line: rgba(220, 210, 255, .08); --line-2: rgba(220, 210, 255, .15);
  --ink: #ece8f6; --ink-2: #aaa4c2; --ink-3: #7c7696;
  --lavender: #a99cff; --lavender-bg: #332e5c; --lavender-ink: #c8bfff;
  --peach-bg: #45302e; --peach-ink: #ffc2a1; --mint-bg: #233f39; --mint-ink: #9fe0c0;
  --sky-bg: #263a55; --sky-ink: #a9cdf5; --butter-bg: #45401f; --butter-ink: #f3dc8a;
  --rose-bg: #4a2a3a; --rose-ink: #f6a9bf; --on-brand: #1c1a2b;
  --shadow-s: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 12px 32px -8px rgba(0, 0, 0, .5); --shadow-l: 0 24px 64px -16px rgba(0, 0, 0, .7);
  --grain-opacity: .07; color-scheme: dark;
}