@font-face {
  font-family: "Vazirmatn";
  src: url("/assets/fonts/vazirmatn-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --night-0: #050b14;
  --night-1: #0a1a2a;
  --night-2: #10263a;
  --teal: #14e3d0;
  --teal-soft: #2dd4bf;
  --sky: #38bdf8;
  --sky-soft: #7dd3fc;
  --indigo: #6366f1;
  --amber: #fbbf24;
  --rose: #fb7185;

  --ink: #eaf6fb;
  --ink-dim: rgba(234, 246, 251, 0.74);
  --ink-faint: rgba(234, 246, 251, 0.52);
  --ink-on-brand: #03141d;

  --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.045));
  --glass-fill-flat: rgba(255, 255, 255, 0.06);
  --glass-edge: rgba(255, 255, 255, 0.13);
  --glass-edge-bright: rgba(125, 211, 252, 0.38);
  --glass-blur: 20px;
  --glass-fallback: rgba(9, 22, 36, 0.93);
  --well: rgba(3, 12, 22, 0.55);

  --grad-brand: linear-gradient(135deg, var(--teal) 0%, var(--sky) 100%);
  --grad-title: linear-gradient(120deg, #ffffff 0%, var(--sky-soft) 48%, var(--teal) 100%);
  --grad-accent: linear-gradient(135deg, var(--indigo) 0%, var(--sky) 100%);

  --tone-pending: #fcd34d;
  --tone-approved: #5eead4;
  --tone-rejected: #fda4af;

  --shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.75);
  --glow-teal: 0 0 0 1px rgba(20, 227, 208, 0.28), 0 12px 44px -12px rgba(20, 227, 208, 0.55);

  --r-card: 26px;
  --r-inner: 18px;
  --r-control: 14px;
  --r-pill: 999px;

  --font-sans: "Vazirmatn", Tahoma, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --fs-display: clamp(1.75rem, 1.15rem + 2.6vw, 3rem);
  --fs-title: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  --fs-heading: 1.18rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.76rem;
  --lh-tight: 1.4;
  --lh-body: 1.85;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-wave: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;

  --page-max: 1160px;
  --gutter: clamp(1rem, 0.55rem + 2vw, 2rem);
  --header-h: 68px;
  --dock-h: 70px;
}

@media (max-width: 720px) {
  :root {
    --glass-blur: 12px;
    --header-h: 60px;
    --r-card: 22px;
  }
}