/*
 * Dark Theme — Violet Glow
 * Design tokens. Import once at the root of any project.
 */

:root {
  /* === SURFACES — dark foundation, slight cool/violet undertone === */
  --bg:        #0a0a0c;
  --surface-1: #111114;  /* cards */
  --surface-2: #16161a;  /* inputs / nested */
  --surface-3: #1c1c22;  /* raised / hover */
  --border:        #26262e;
  --border-strong: #38384a;

  /* === TEXT === */
  --text-1: #ededed;  /* primary */
  --text-2: #a1a1aa;  /* secondary */
  --text-3: #71717a;  /* tertiary / labels */

  /* === BRAND — violet-led === */
  --violet:      #8b5cf6;
  --violet-deep: #6d28d9;
  --violet-soft: #c4b5fd;
  --blue:        #3b82f6;
  --pink:        #ec4899;

  /* === SEMANTIC === */
  --success: #84cc16;
  --warning: #fbbf24;
  --danger:  #ef4444;
  --info:    #3b82f6;

  /* === GLOW — accents only === */
  --glow-violet:        0 0 24px rgba(139, 92, 246, 0.35);
  --glow-violet-strong: 0 0 32px rgba(139, 92, 246, 0.55);
  --glow-violet-ring:   0 0 0 3px rgba(139, 92, 246, 0.22);
  --glow-danger:        0 0 24px rgba(239, 68, 68, 0.35);
  --glow-success:       0 0 16px rgba(132, 204, 22, 0.30);

  /* === SPACING — 8-step scale (px) === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* === RADIUS — tight === */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* === TYPE === */
  --display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:    "Inter",       -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* === TYPE SCALE === */
  --t-display-size:    60px;
  --t-display-line:    1.0;
  --t-display-weight:  700;
  --t-display-track:   -0.03em;

  --t-h1-size:    40px;
  --t-h1-line:    1.1;
  --t-h1-weight:  600;
  --t-h1-track:   -0.02em;

  --t-h2-size:    26px;
  --t-h2-line:    1.2;
  --t-h2-weight:  600;
  --t-h2-track:   -0.015em;

  --t-body-size:    16px;
  --t-body-line:    1.6;
  --t-body-weight:  400;

  --t-small-size:    14px;
  --t-small-line:    1.55;
  --t-small-weight:  400;

  --t-caption-size:    12px;
  --t-caption-line:    1.4;
  --t-caption-weight:  500;
  --t-caption-track:   0.12em;

  /* === MOTION === */
  --ease:        cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --dur-fast:    0.12s;
  --dur-default: 0.18s;
  --dur-slow:    0.30s;
}

/* Reset opinionated defaults so tokens render true */
html, body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}