/* Lily Kate's Planner — design tokens ("POSY", "Color Block" — Option B,
   picked 2026-07-07 from mockups because the original pass read too
   subtle/grandmother-pale for her "fun, bright, trendy" intake answer).
   All 6 of her intake colors are named directly below, then used at real
   saturation throughout — chips, rings, and the hero all carry visible
   color, not just pale tints. */
:root {
  /* her 6 chosen colors, verbatim */
  --c-homebody:  #F49F51; /* Homebody — orange */
  --c-tequila:   #FFD4E5; /* Tequila Sunrise — pale pink */
  --c-spring:    #BEE4E7; /* Spring Water — pale teal */
  --c-tropical:  #95C7C2; /* Tropical Breeze — teal */
  --c-flamingo:  #F490B9; /* Flamingo Pink */
  --c-florence:  #F7CCAD; /* Florence — peach */

  /* neutrals — near-white base; the hero (not the whole app) carries the color block */
  --bg: #FFFBF7;
  --surface: #FFFFFF;
  --ink: #59273C;
  --ink-soft: #8A6275;
  --hairline: #F6DEE9;
  --hairline-strong: #EBC0D2;
  --check-border: #EBC0D2;

  /* hero gradient — Tequila Sunrise, top to bottom */
  --hero-1: #FFD4E5;
  --hero-2: #FFE9F1;

  /* role mapping — real saturation, each of her 6 colors visible at rest */
  --accent: var(--c-homebody);
  --accent-soft: #E07E2D;      /* deepened homebody — small text on light */
  --accent-bg: #FBE4CB;
  --sage: #3E8E85;             /* deepened tropical breeze */
  --sage-soft: var(--c-tropical);
  --sage-bg: #DCEDEB;
  --blush: var(--c-flamingo);
  --blush-bg: #FCE0EC;
  --plum: #C6537B;             /* deepened tequila sunrise */
  --plum-bg: #F7DCE5;
  --terracotta: #8A5220;       /* deepened florence — the cool-brown 6th tone */
  --terracotta-bg: #F7E4D2;
  --rundown-bg: #FDF1E3;
  --rundown-border: #F0C896;
  --chip-soft-bg: #FCDCEA;
  --chip-soft-text: #8A6275;
  --chip-warm-bg: #FBEFE2;
  --chip-warm-text: #B4501F;
  --chip-urgent-bg: #FBE0EC;
  --chip-urgent-text: #C6537B;

  /* 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(89, 39, 60, 0.08);
  --shadow-lift: 0 8px 24px rgba(89, 39, 60, 0.2);
}
