/* ============================================================
   ANCHOR — Design Tokens
   tokens.css  |  Global CSS custom properties
   ============================================================ */

:root {
  /* ── Brand ────────────────────────────────────────────── */
  --brand-primary:       #53FC18;
  --brand-primary-hover: #47e014;
  --brand-primary-muted: rgba(83, 252, 24, 0.10);

  /* ── Surfaces ─────────────────────────────────────────── */
  --surface-1: #0a0a0a;
  --surface-2: #111111;
  --surface-3: #151515;
  --surface-4: #1a1a1a;

  /* ── Text ──────────────────────────────────────────────── */
  --text-primary:   #ffffff;
  --text-secondary: #cccccc;
  --text-tertiary:  #999999;
  --text-muted:     #777777;
  --text-disabled:  #555555;

  /* ── Borders ──────────────────────────────────────────── */
  --border-subtle:  1px solid #222222;
  --border-default: 1px solid #2a2a2a;
  --border-strong:  1px solid #333333;

  /* ── Spacing ──────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Typography ───────────────────────────────────────── */
  --text-xs:  11px;
  --text-sm:  13px;
  --text-base: 15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --leading-tight:  1.25;
  --leading-normal: 1.45;
  --leading-loose:  1.7;

  /* ── Radius ───────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  14px;
  --radius-2xl: 20px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.45);
  --shadow-xl:  0 12px 40px rgba(0,0,0,0.55);

  /* ── Input ────────────────────────────────────────────── */
  --input-height-sm: 34px;
  --input-height-md: 40px;
  --input-height-lg: 48px;

  /* ── Extended surfaces ────────────────────────────────── */
  --surface-0: #0c0c0c;
  --surface-5: #1e1e1e;
  --surface-6: #2a2a2a;
  --surface-7: #333333;

  /* ── Extended typography ──────────────────────────────── */
  --text-md:  15px;
  --weight-semi: 600;
  --tracking-caps: 0.08em;

  /* ── Transitions ─────────────────────────────────────── */
  --transition-fast: 0.12s ease;

  /* ── Brand extras ────────────────────────────────────── */
  --brand-primary-text: #000000;
  --brand-danger: #ff3d3d;
  --brand-danger-muted: rgba(255, 61, 61, 0.06);

  /* ── Extended radius ─────────────────────────────────── */
  --radius-full: 9999px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-1);
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input { font: inherit; }