/* ================================================================
   DESIGN TOKENS
   Ported from design-kit-1/theme.css. The kit defines these inside a
   Tailwind v4 `@theme` block (compiled by Tailwind's build); this site
   has no build step, so the same variables live in a plain :root here.
   ================================================================ */
:root {
  /* ---- Accent colors ----
     Each accent ships as a trio: base / bg (tint) / line (border tint). */
  --color-blue: #2f6bb0;
  --color-blue-bg: #e8f0fa;
  --color-blue-line: #bcd3ef;

  --color-navy: #1e3a5f;
  --color-navy-bg: #e7ecf3;
  --color-navy-line: #c3d1e2;

  --color-pink: #ad2679;
  --color-pink-bg: #fbe5f0;
  --color-pink-line: #f0bfdb;

  --color-amber: #c37f16;
  --color-amber-bg: #fbf1db;
  --color-amber-line: #eed6a6;

  --color-purple: #7a56a8;
  --color-purple-bg: #efe9f7;
  --color-purple-line: #d9cbee;

  /* Alias to --color-pink — used where "magenta" is the more accurate
     name for what's being styled (e.g. Personal Projects). */
  --color-magenta: var(--color-pink);
  --color-magenta-bg: var(--color-pink-bg);
  --color-magenta-line: var(--color-pink-line);

  --color-green: #3d8f54;
  --color-green-bg: #e4f1e8;
  --color-green-line: #bfe0c9;

  --color-red: #b1504e;
  --color-red-bg: #f8e6e5;
  --color-red-line: #eec8c6;

  --color-orange: #c2591b;
  --color-orange-bg: #fdf1e7;
  --color-orange-line: #f3cda3;

  /* ---- Semantic aliases ---- */
  --color-primary: var(--color-blue);
  --color-primary-bg: var(--color-blue-bg);
  --color-primary-line: var(--color-blue-line);

  --color-success: var(--color-green);
  --color-success-bg: var(--color-green-bg);
  --color-success-line: var(--color-green-line);

  --color-warning: var(--color-amber);
  --color-warning-bg: var(--color-amber-bg);
  --color-warning-line: var(--color-amber-line);

  --color-danger: var(--color-red);
  --color-danger-bg: var(--color-red-bg);
  --color-danger-line: var(--color-red-line);

  /* ---- Neutrals ---- */
  --color-bg: #eef1f7;
  --color-surface: #ffffff;
  --color-ink: #131b26;
  --color-muted: #5b6775;
  --color-faint: #8a94a2;
  --color-line: #d5dce7;
  --color-line-strong: #b7c1d0;

  /* ---- Typography ---- */
  --font-display: "Outfit", sans-serif;
  --font-body: "Lora", serif;
  --font-mono: "Inconsolata", monospace;

  /* ---- Elevation ---- */
  --shadow: 0 1px 2px rgba(19, 27, 38, 0.05), 0 8px 24px -12px rgba(19, 27, 38, 0.22);
  --radius: 14px;
}