/* Will's and Carter's gift workshop — design tokens.
   Structurally identical to the girls' planners (same variable names, so every
   stylesheet and page built against them works untouched); only the values
   differ. Their palette is Lily Kate's chosen six — pinks, peach, flamingo —
   which is hers, not theirs. This is the same system in blues and greens.
   Swap this one file and the whole app changes with it. */
:root {
  /* the six, cool side of the wheel */
  --c-marine:   #2E7DA6; /* Marine — the primary blue */
  --c-deep:     #1F4E6B; /* Deep Water — navy */
  --c-sky:      #BBD9E8; /* Sky — pale blue */
  --c-pine:     #2F6B5A; /* Pine — the primary green */
  --c-moss:     #7FB09A; /* Moss — soft green */
  --c-slate:    #4A6572; /* Slate — the cool neutral tone */

  /* neutrals — cool near-white base, same near-white weight as the girls' */
  --bg: #F8FAFB;
  --surface: #FFFFFF;
  --ink: #16323F;
  --ink-soft: #5A7684;
  --hairline: #DEE9EE;
  --hairline-strong: #C2D6DE;
  --check-border: #C2D6DE;

  /* hero gradient — Sky, top to bottom */
  --hero-1: #CFE3EC;
  --hero-2: #E9F2F6;

  /* role mapping — same roles the girls' tokens define, cool equivalents.
     --sage carries the wishlist UI (it is this app's main accent), --accent
     the buttons and the add button. */
  --accent: var(--c-marine);
  --accent-soft: #24688C;      /* deepened marine — small text on light */
  --accent-bg: #DCEBF3;
  --sage: var(--c-pine);
  --sage-soft: var(--c-moss);
  --sage-bg: #DCEBE4;
  --blush: #3D8FA8;            /* teal, where the girls' is flamingo */
  --blush-bg: #D9EBF0;
  --plum: var(--c-deep);
  --plum-bg: #D6E4EC;
  --terracotta: var(--c-slate);
  --terracotta-bg: #DFE8EC;
  --rundown-bg: #EEF5F8;
  --rundown-border: #A9C9D8;
  --chip-soft-bg: #DFEDF3;
  --chip-soft-text: #5A7684;
  --chip-warm-bg: #DCEBE4;
  --chip-warm-text: #2F6B5A;
  --chip-urgent-bg: #D6E4EC;
  --chip-urgent-text: #1F4E6B;

  /* type */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Lato', -apple-system, 'Segoe UI', sans-serif;

  /* shape */
  --radius: 20px;
  --radius-sm: 13px;
  --shadow: 0 1px 6px rgba(22, 50, 63, 0.08);
  --shadow-lift: 0 8px 24px rgba(22, 50, 63, 0.2);
}