/* ============================================================
   Batter Up — single source of truth for the brand palette.

   ⮕ EDIT COLORS HERE ONLY. Every page resolves its colors from this file.

   Loaded as a static stylesheet (NOT bundled) via <link href="/styles/palette.css">
   in two places, so both the bundled and standalone pages share one source:
     • src/layouts/Base.astro   → all interior pages (consume --color-* names)
     • src/pages/index.astro     → standalone homepage document (consumes bare --names)

   It is served from /public (not import-bundled) on purpose: the homepage is a
   standalone document that doesn't load global.css, and Vite would otherwise
   hoist a shared import into a chunk the homepage never links. A plain <link>
   to one static file is deterministic for both. Colors are read only as
   var(--…), never as Tailwind color utilities, so they live outside @theme.
   ============================================================ */
:root {
  /* ---- Canonical values ---- */
  --cream: #FFF4DA;
  --cream-2: #FCE9B8;
  --paper: #FFFFFF;

  --ink: #1A0F08;
  --ink-soft: #5C4438;
  --ink-mute: #8A6E5C;

  --persimmon: #EB4F28;
  --persimmon-deep: #C5380A;
  --persimmon-soft: #FFB59C;
  --berry: #B83F68;
  --berry-soft: #EFA9BE;
  --forest: #326B38;
  --forest-deep: #1B5E20;
  --sage-soft: #B5D9B1;
  --yolk: #F6BD38;
  --yolk-deep: #E9A72D;

  --rule: rgba(26, 15, 8, 0.16);

  /* ---- Prefixed aliases (components + interior pages) ---- */
  --color-cream: var(--cream);
  --color-cream-2: var(--cream-2);
  --color-paper: var(--paper);
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-soft);
  --color-ink-mute: var(--ink-mute);
  --color-persimmon: var(--persimmon);
  --color-persimmon-deep: var(--persimmon-deep);
  --color-persimmon-soft: var(--persimmon-soft);
  --color-berry: var(--berry);
  --color-berry-soft: var(--berry-soft);
  --color-forest: var(--forest);
  --color-forest-deep: var(--forest-deep);
  --color-sage-soft: var(--sage-soft);
  --color-yolk: var(--yolk);
  --color-yolk-deep: var(--yolk-deep);
  --color-rule: var(--rule);

  /* ---- Legacy aliases kept so older markup keeps resolving ---- */
  --color-marble: var(--cream);
  --color-flour: var(--cream);
  --color-crema: var(--cream-2);
  --color-sugar: var(--persimmon);
  --color-sugar-deep: var(--persimmon-deep);
}