/* Redpine brand — CSS custom properties.
 *
 * Import this file once in your app and use the variables everywhere.
 * Every colour in any Redpine surface should resolve back to one of these.
 *
 * Pair with `fonts.css` (../assets/fonts/fonts.css) for the full token set.
 */

:root {
  /* ── Primary palette ─────────────────────────────────────────── */
  --color-dark-red:    #BD0519;  /* RGB 189, 5, 25      */
  --color-crimson:     #EB301F;  /* RGB 235, 48, 31     */
  --color-orange:      #FB8520;  /* RGB 251, 133, 32    */
  --color-warm-white:  #FDFBF7;  /* RGB 253, 251, 247   */
  --color-dark-grey:   #171717;  /* RGB 23, 23, 23      */

  /* ── Secondary palette ───────────────────────────────────────── */
  --color-light-green: #628F6B;  /* RGB 98, 143, 107    */
  --color-sky-blue:    #8BBCE5;  /* RGB 139, 188, 229   */

  /* ── Semantic aliases (what you typically reach for) ─────────── */
  --color-bg:          var(--color-warm-white);   /* default page background */
  --color-ink:         var(--color-dark-grey);    /* default text / primary mark */
  --color-brand:       var(--color-crimson);      /* accent / link / highlight */
  --color-brand-deep:  var(--color-dark-red);     /* hover, pressed, heritage */
  --color-accent:      var(--color-orange);       /* second accent */

  /* ── Borders / radii — Redpine uses perfect squares ──────────── */
  --radius-none:       0;
  --radius:            0;  /* aliases — don't accidentally reintroduce rounding */

  /* ── Type stacks (mirrored in fonts.css) ─────────────────────── */
  --font-headline:     'Kessler Text', 'Kessler Display', ui-serif, Georgia, serif;
  --font-body:         'ABC Diatype', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-callout:      'Kessler Text Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-ui-mono:      'ABC Diatype Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Optional dark surface — flips ink/bg only. Keep everything else as-is. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:  var(--color-dark-grey);
    --color-ink: var(--color-warm-white);
  }
}