/* Color tokens — base palette + semantic aliases.
   Adapted from a design-analysis reference (warm-cream / hot-orange
   editorial-developer aesthetic). See /readme.md for sourcing notes. */

:root {
  /* ---- Base palette ---- */
  --orange-600: #c01f00;
  --orange-500: #ea2804;
  --orange-400: #ff6a3d;
  --orange-200: #f4a8a0;

  --ink-900: #202020;
  --ink-700: #3a3a3a;
  --ink-600: #575757;
  --ink-500: #646464;
  --ink-400: #8d8d8d;
  --ink-300: #bbbbbb;

  --cream-100: #f9f7f3;
  --cream-200: #f3f0e8;
  --white: #ffffff;
  --black: #000000;

  --off-white-900: #fcfcfc;
  --off-white-700: rgba(252, 252, 252, 0.72);

  --green-500: #2b9a66;
  --blue-500: #3b82f6;
  --github-900: #24292e;

  /* ---- Semantic: brand ---- */
  --brand-accent: var(--orange-500);
  --brand-accent-pressed: var(--orange-600);
  --brand-accent-glow: var(--orange-400);
  --brand-accent-wash: var(--orange-200);
  --on-accent: var(--white);

  /* ---- Semantic: surface ---- */
  --surface-canvas: var(--cream-100);
  --surface-bone: var(--cream-200);
  --surface-card: var(--white);
  --surface-dark: var(--ink-900);
  --surface-deep: var(--black);

  /* ---- Semantic: text ---- */
  --text-primary: var(--ink-900);
  --text-body: var(--ink-700);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-tertiary: var(--ink-400);
  --text-disabled: var(--ink-300);
  --text-on-dark: var(--off-white-900);
  --text-on-dark-muted: var(--off-white-700);

  /* ---- Semantic: borders / dividers ---- */
  --hairline: rgba(32, 32, 32, 0.12);
  --hairline-strong: var(--ink-900);
  --divider-dark: rgba(255, 255, 255, 0.2);

  /* ---- Semantic: status ---- */
  --status-success: var(--green-500);
  --link-color: var(--orange-500);
  --ring-focus: rgba(59, 130, 246, 0.5);
  --brand-github: var(--github-900);

  /* ---- Shadows (colour-blocking system; shadows are rare) ---- */
  --shadow-thumbnail: 0 8px 24px rgba(32, 32, 32, 0.08);
}