/* ==========================================================================
   Design tokens — Arteva Studio
   Tek kaynak: renk, tipografi, boşluk, hareket.
   ========================================================================== */

:root {
  /* Color — paper (light) */
  --c-paper: #F5F5F2;
  --c-paper-2: #EDECE7;
  --c-paper-3: #E3E2DC;
  --c-white: #FCFCFA;

  /* Color — ink / graphite */
  --c-ink: #17191D;
  --c-ink-2: #3B3E45;
  --c-ink-3: #6A6D74;
  --c-graphite: #17191D;
  --c-graphite-2: #1D2025;
  --c-graphite-3: #2A2D34;
  --c-graphite-4: #3A3E46;

  /* Color — on dark */
  --c-on-dark: #F5F5F2;
  --c-on-dark-2: rgba(245, 245, 242, 0.66);
  --c-on-dark-3: rgba(245, 245, 242, 0.42);

  /* Color — lines */
  --c-line: rgba(23, 25, 29, 0.12);
  --c-line-strong: rgba(23, 25, 29, 0.24);
  --c-line-dark: rgba(245, 245, 242, 0.10);
  --c-line-dark-strong: rgba(245, 245, 242, 0.20);
  --c-grid: rgba(23, 25, 29, 0.05);

  /* Color — accent (sadece vurgu) */
  --c-accent: #696CFF;
  --c-accent-soft: rgba(105, 108, 255, 0.12);

  /* Typography */
  --f-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-display: clamp(46px, 8.4vw, 128px);
  --fs-h2: clamp(36px, 5.4vw, 76px);
  --fs-h3: clamp(28px, 3.1vw, 44px);
  --fs-h4: clamp(19px, 1.5vw, 22px);
  --fs-lead: clamp(17px, 1.35vw, 20px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-mono: 11.5px;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --col-gap: clamp(16px, 2vw, 24px);
  --space-section: clamp(104px, 13vw, 192px);

  /* Shape — bilinçli olarak küçük */
  --radius-xs: 3px;
  --radius-s: 6px;
  --radius-m: 10px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-s: 0.25s;
  --dur-m: 0.6s;
  --dur-l: 1s;

  /* Elevation — sadece cihazlar için, ölçülü */
  --shadow-device: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 40px 80px -40px rgba(23, 25, 29, 0.45);
}