/* ============================================================
   Design Tokens — Lukas Klein Studio
   Shared CSS variables for all pages and assets.
   Change the accent color here once, everything follows.
   ============================================================ */

:root {
  /* ---------- Backgrounds ---------- */
  --bg: #FFFFFF;
  --bg-alt: #F5F5F4;
  --bg-card: #FAFAFA;

  /* ---------- Ink / Text ---------- */
  --ink: #0A0A0A;
  --ink-2: #262626;
  --ink-3: #404040;
  --mute: #737373;
  --mute-2: #A3A3A3;

  /* ---------- Lines / Borders ---------- */
  --line: #E7E5E4;
  --line-strong: #D6D3D1;

  /* ---------- Status ---------- */
  --green: #22C55E;
  --green-soft: rgba(34, 197, 94, 0.16);

  /* ---------- Accent ----------
     To change the accent globally, update these three lines:
       --accent       hex base
       --accent-2     ~15% darker, used for hover
       --accent-rgb   the space-separated rgb of --accent (no commas)
                      e.g. #E25822 → 226 88 34
     Everything else (--accent-soft, --accent-tint, glow, radial)
     is derived automatically.
  ---------------------------------- */
  --accent: #1E3FFF;
  --accent-2: #1832D6;
  --accent-rgb: 30 63 255;

  --accent-soft:   rgb(var(--accent-rgb) / 0.08);
  --accent-tint:   rgb(var(--accent-rgb) / 0.14);
  --accent-radial: rgb(var(--accent-rgb) / 0.18);
  --accent-glow:   rgb(var(--accent-rgb) / 0.35);

  /* ---------- Layout ---------- */
  --container: 1280px;
  --gutter: clamp(20px, 4vw, 48px);

  /* ---------- Radii ---------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 280ms;
  --dur-fast: 180ms;

  /* ---------- Typography ---------- */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}