/* ============================================================
   COLORS
   ------------------------------------------------------------
   Opacity-driven system. Every neutral is #1c1c1c (charcoal)
   modulated by transparency — NOT arbitrary hex grays. This is
   the source of the brand's tonal coherence.
   ============================================================ */

:root {
  /* ---- Brand primitives ---- */
  --cream: #ffffff;          /* page bg, card surfaces, button surfaces */
  --charcoal: #1c1c1c;       /* primary text, headings, dark surfaces   */
  --off-white: #fcfbf8;      /* button text on dark, subtle highlight   */
  --light-cream: #ececec;    /* divider / border line                   */
  --muted-gray: #5f5f5d;     /* secondary text, descriptions, captions  */

  /* ---- Charcoal opacity ladder (the "gray scale") ---- */
  --charcoal-100: #1c1c1c;
  --charcoal-83: rgba(28, 28, 28, 0.83);  /* strong secondary text   */
  --charcoal-82: rgba(28, 28, 28, 0.82);  /* body copy               */
  --charcoal-40: rgba(28, 28, 28, 0.40);  /* interactive borders     */
  --charcoal-04: rgba(28, 28, 28, 0.04);  /* subtle hover background  */
  --charcoal-03: rgba(28, 28, 28, 0.03);  /* barely-visible overlays  */

  /* ---- Interactive ---- */
  --ring-blue: rgba(59, 130, 246, 0.50);  /* keyboard focus ring     */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-page: var(--cream);
  --surface-card: var(--cream);
  --surface-dark: var(--charcoal);
  --surface-hover: var(--charcoal-04);
  --surface-overlay: var(--charcoal-03);

  /* Text */
  --text-heading: var(--charcoal-100);
  --text-strong: var(--charcoal-83);
  --text-body: var(--charcoal-82);
  --text-muted: var(--muted-gray);
  --text-on-dark: var(--off-white);

  /* Borders */
  --border-subtle: var(--light-cream);          /* passive containment  */
  --border-interactive: var(--charcoal-40);     /* outline buttons      */

  /* Focus */
  --focus-ring: var(--ring-blue);
}