/* ============================================================
   Reefy brand color registry - the single source of truth for
   every color the public website is allowed to use.

   Rules:
   - Pages must use these tokens, not raw hex values.
   - Add a new token here (with a comment) before using a new color;
     don't sprinkle one-off hexes in templates.
   - Solid color:        color: var(--reef-accent);
   - With transparency:  background: rgba(var(--reef-accent-rgb), 0.3);

   Exceptions: third-party brand marks (e.g. the Google / GitHub
   sign-in SVGs) keep their official colors and are not tokenized.
   ============================================================ */
:root {
  /* ---- Primary accent: teal (the Reef color) ---- */
  --reef-accent: #2dd4bf;
  --reef-accent-rgb: 45, 212, 191;   /* same teal as an RGB triple */
  --reef-accent-light: #8fe6d8;      /* soft teal - headings / subtle */

  /* ---- Secondary accents (homepage section highlights) ---- */
  --reef-red: #e63232;               /* coral-red highlight */
  --reef-red-rgb: 230, 50, 50;
  --reef-blue: #0ea5e9;              /* sky-blue highlight */

  /* ---- Backgrounds (darkest -> lighter surfaces) ---- */
  --reef-bg: #0a0a0a;                /* page background */
  --reef-surface-1: #141414;         /* raised panel / code block */
  --reef-surface-2: #1a1a1a;         /* inline code / chips */
  --reef-surface-3: #222222;         /* hover / stronger surface */

  /* ---- Borders ---- */
  --reef-border: #222222;            /* default hairline */
  --reef-border-strong: #333333;     /* emphasized divider */

  /* ---- Text (brightest -> muted) ---- */
  --reef-text: #e8e8e8;              /* body text */
  --reef-text-2: #cccccc;            /* secondary text */
  --reef-text-muted: #888888;        /* captions / footers */
}