/* ──────────────────────────────────────────────────────────
   COLOR TOKENS — Jesús Delgado personal brand
   A near-black canvas, white type, one orange accent.
   ────────────────────────────────────────────────────────── */
:root {
  /* — Base neutrals — */
  --jd-black: #111111;        /* page canvas */
  --jd-surface: #1e1e1e;      /* raised surfaces, filled buttons */
  --jd-surface-2: #2a2a2a;    /* hover / elevated surface */
  --jd-line: #2e2e2e;         /* hairline borders on dark */

  --jd-white: #ffffff;        /* pure white — strokes, key marks */
  --jd-off-white: #fdfdfd;    /* primary text on dark */
  --jd-gray: #c2c2c2;         /* secondary / muted text */
  --jd-gray-dim: #8a8a8a;     /* tertiary text, captions */
  --jd-chip: #d9d9d9;         /* light dot / status indicator */

  /* — Accent (the only brand color) — */
  --jd-orange: #ff6f00;       /* primary accent — borders, links, focus */
  --jd-orange-strong: #ff8124;/* hover lift on accent */
  --jd-orange-dim: rgba(255, 111, 0, 0.16); /* accent wash / tint */

  /* ── Semantic aliases ── */
  --bg-page: var(--jd-black);
  --bg-surface: var(--jd-surface);
  --bg-surface-hover: var(--jd-surface-2);

  --text-primary: var(--jd-off-white);
  --text-secondary: var(--jd-gray);
  --text-tertiary: var(--jd-gray-dim);
  --text-on-accent: var(--jd-off-white);

  --border-hairline: var(--jd-line);
  --border-accent: var(--jd-orange);

  --accent: var(--jd-orange);
  --accent-hover: var(--jd-orange-strong);
  --accent-wash: var(--jd-orange-dim);

  --focus-ring: var(--jd-orange);
}