/*
 * olladns — canonical design tokens.
 * Single source of truth shared by:
 *   - apps/dashboard/   (in qdns repo)
 *   - olladns-marketing (separate repo, pulls this file at build time)
 *
 * NEVER edit token values in the consumer repos — change them here.
 * Marketing's build script (scripts/sync-tokens.sh) overwrites its local
 * copy from this file on every CF Pages deploy.
 */

:root {
  /* ===== Surfaces (dark default) ===== */
  --bg-0: #05080f;
  --bg-1: #0a0f1c;
  --bg-2: #0e1525;
  --bg-3: #121b30;
  --panel: #0e1525;
  --panel-2: #111a2e;
  --line: #1c2740;
  --line-2: #243352;

  /* ===== Text ===== */
  --text: #e6ecf5;
  --text-2: #b4bfd2;
  --muted: #6a7894;
  --dim: #445072;

  /* ===== Brand accent (cyan) ===== */
  --accent: #22d3ee;
  --accent-2: #06b6d4;
  --accent-soft: rgba(34, 211, 238, 0.12);
  --accent-line: rgba(34, 211, 238, 0.28);

  /* ===== Semantic ===== */
  --good: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
  --info: #22d3ee;

  /* ===== Decorative ===== */
  --mag: #a78bfa;
  --pink: #f472b6;
  --orange: #fb923c;
  --teal: #2dd4bf;

  /* ===== Elevation ===== */
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset,
            0 8px 24px rgba(0, 0, 0, 0.35);

  /* ===== Radii ===== */
  --r-sm: 4px;
  --r: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* ===== Typography ===== */
  --font: "IBM Plex Sans", "Söhne", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs: 10.5px;
  --fs-sm: 11.5px;
  --fs-base: 12.5px;
  --fs-md: 13px;
  --fs-lg: 15px;
  --fs-xl: 22px;
  --fs-2xl: 32px;
  --fs-3xl: 48px;

  /* ===== Spacing scale ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ===== Motion ===== */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;
}

/* ===== Light theme overrides ===== */
[data-theme="light"] {
  --bg-0: #f5f7fb;
  --bg-1: #eef1f7;
  --bg-2: #ffffff;
  --bg-3: #f8fafc;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --line: #e2e8f0;
  --line-2: #cbd5e1;
  --text: #0f172a;
  --text-2: #334155;
  --muted: #64748b;
  --dim: #94a3b8;
  --accent: #0891b2;
  --accent-2: #0e7490;
  --accent-soft: rgba(8, 145, 178, 0.10);
  --accent-line: rgba(8, 145, 178, 0.30);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.02) inset,
            0 4px 16px rgba(15, 23, 42, 0.06);
}