/* =========================================================
   DEBİTEKNİK — Tasarım Sistemi (LIGHT-FIRST)
   Palet: Sıcak Kâğıt + Buz Mavisi + Lacivert + Ember
   ========================================================= */

:root {
  /* ---------- Kâğıt tonları (ana zemin) ---------- */
  --paper:        #fbfaf7;
  --paper-soft:   #f4f1ec;
  --paper-cool:   #f1f5fa;
  --paper-warm:   #fdf6ee;
  --paper-line:   #e7e2d8;
  --paper-line-strong: #d4ccbd;

  /* ---------- Ink (lacivert / metin) ---------- */
  --ink-950: #0a1628;
  --ink-900: #112038;
  --ink-800: #1a2d4d;
  --ink-700: #243f6b;
  --ink-600: #34568c;
  --ink-500: #4f72a8;

  /* ---------- Ice (buz mavisi vurgular) ---------- */
  --ice-100: #ecf6ff;
  --ice-200: #d6ecff;
  --ice-300: #a9d8ff;
  --ice-400: #6cbcfb;
  --ice-500: #3a9ef0;
  --ice-600: #1f7fd1;
  --ice-700: #1561a8;

  /* ---------- Ember (sıcak turuncu vurgular) ---------- */
  --ember-300: #ffd0a6;
  --ember-400: #ffa55e;
  --ember-500: #f4791f;
  --ember-600: #d85f0e;

  /* ---------- Nötr gri ---------- */
  --ash-300: #cfd6df;
  --ash-400: #9aa5b5;
  --ash-500: #6c7a8d;
  --ash-600: #4a5566;
  --ash-700: #2f3947;
  --white: #ffffff;

  /* ---------- Semantik (light-first) ---------- */
  --bg:           var(--paper);
  --bg-soft:      var(--paper-soft);
  --bg-cool:      var(--paper-cool);
  --bg-warm:      var(--paper-warm);
  --bg-dark:      var(--ink-900);
  --surface:      var(--white);
  --surface-line: var(--paper-line);
  --surface-line-strong: var(--paper-line-strong);

  --text:         var(--ink-900);
  --text-soft:    var(--ash-600);
  --text-muted:   var(--ash-500);
  --text-faint:   var(--ash-400);
  --text-invert:  #f6f1e8;
  --text-invert-soft: #c8c0b1;

  --accent:        var(--ice-500);
  --accent-strong: var(--ice-600);
  --warm:          var(--ember-500);
  --warm-strong:   var(--ember-600);

  /* ---------- Tipografi ---------- */
  --font-display: "Fraunces", "Söhne", "Inter", -apple-system, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;
  --fs-88: 5.5rem;

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.01em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.18em;

  /* ---------- Spacing ---------- */
  --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;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---------- Layout ---------- */
  --container: 1280px;
  --container-wide: 1440px;
  --gutter: clamp(1rem, 3vw, 2.5rem);

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --radius-pill: 999px;

  /* ---------- Shadows (light-first) ---------- */
  --shadow-xs: 0 1px 2px rgba(17, 32, 56, 0.04);
  --shadow-sm: 0 2px 6px rgba(17, 32, 56, 0.05), 0 1px 2px rgba(17, 32, 56, 0.04);
  --shadow-md: 0 10px 28px -12px rgba(17, 32, 56, 0.16);
  --shadow-lg: 0 28px 56px -20px rgba(17, 32, 56, 0.22);
  --shadow-xl: 0 40px 80px -24px rgba(17, 32, 56, 0.28);
  --shadow-ice: 0 18px 40px -16px rgba(58, 158, 240, 0.36);
  --shadow-ember: 0 18px 40px -16px rgba(244, 121, 31, 0.32);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  --hairline: 1px solid var(--surface-line);
  --hairline-strong: 1px solid var(--surface-line-strong);
}

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