/* ============================================================
   Palette - Forsoka Culinary Arts

   Retunes the Modernist tokens to the colouring used on
   PantryPonder/website. Loaded after tokens.css so every
   component keeps working off the same variable names; nothing
   below this line knows the palette changed.

     cream    #f8f5ec   the page (a shade under the site's #f5f0e2)
     card     #fbf8ef   surfaces
     ink      #33301f   body text
     forest   #40522d   headings and quiet emphasis
     subtle   #736f65   secondary text
     accent   #cc4326   links, the live icon, the call to action
     hairline #e4dcc8   rules and borders
   ============================================================ */

:root {
  --color-bg:       #f8f5ec;
  --color-surface:  #fdfbf5;
  --color-text:     #33301f;
  --color-accent:   #cc4326;
  --color-accent-2: #40522d;
  --color-divider:  #e4dcc8;

  /* warm neutrals, anchored on the site's own ink and subtle */
  --color-neutral-100: #fbf8ef;
  --color-neutral-200: #f2ece0;
  --color-neutral-300: #e4dcc8;
  --color-neutral-400: #cdc4b0;
  --color-neutral-500: #a8a294;
  --color-neutral-600: #8b8578;
  --color-neutral-700: #736f65;
  --color-neutral-800: #4c4a3e;
  --color-neutral-900: #33301f;

  --color-accent-100: #fdf1ed;
  --color-accent-200: #f9dbd2;
  --color-accent-300: #f2bcac;
  --color-accent-400: #e68e76;
  --color-accent-500: #d9603f;
  --color-accent-600: #b3391f;   /* hover: a shade under the base */
  --color-accent-700: #942e18;
  --color-accent-800: #6b2212;
  --color-accent-900: #45180e;

  --color-accent-2-100: #eef1e9;
  --color-accent-2-200: #dae1d0;
  --color-accent-2-300: #bcc9ab;
  --color-accent-2-400: #94a67d;
  --color-accent-2-500: #6d8355;
  --color-accent-2-600: #40522d;
  --color-accent-2-700: #354526;
  --color-accent-2-800: #2a361e;
  --color-accent-2-900: #1f2916;

  /* shadows warmed to the ink, not the old cool grey */
  --shadow-sm: 0 1px 2px  color-mix(in srgb, #33301f 12%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #33301f 14%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #33301f 20%, transparent);
}

/* headings take the forest green, as they do on the reference site */
.brand,
.lede h1,
.outro h2,
.app__name h2 { color: var(--color-accent-2) }