/* Design tokens. Brand kit drop-in goes here. */

:root {
  --color-bg:           #faf7f2;
  --color-surface:      #ffffff;
  --color-text:         #1c1b1a;
  --color-text-muted:   #6b6664;
  --color-border:       #e8e2da;
  --color-border-strong:#cdc4b6;

  /* 2026-05-02 brand: pink rose accent (#e094b6) at saturation 56%. Bright
     enough to read as pink. Because the accent is light, button/chip text
     uses --color-accent-fg (charcoal) for contrast, and accent-as-text on
     white uses the darker --color-accent-text. */
  --color-accent:        #e094b6;
  --color-accent-hover:  #d683ab;
  --color-accent-tint:   #fae3ee;
  --color-accent-text:   #a83b6a;
  --color-accent-fg:     #1c1b1a;

  /* Cherry Blossom Pink — secondary accent / highlight (wordmark). */
  --color-pink:          #ffb6cd;  /* Cherry Blossom Pink */
  --color-pink-soft:     #ffd1de;
  --color-pink-tint:     #fff0f4;

  --color-success:       #3f6b4e;
  --color-error:         #a53d3d;
  --color-focus-ring:    rgba(224, 148, 182, 0.32);

  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Crisp geometry. The brand uses confident rectangles (sharp "Find More"
     buttons, color-blocked panels), not soft rounded cards. Keep radii small
     so the UI reads architectural, not toy-like. Pills (999px) are retired in
     favour of these. Round avatars keep their own border-radius: 50%. */
  --radius-sm: 0;   /* buttons, inputs, chips, tags — sharp */
  --radius-md: 0;   /* cards, panels, list rows — sharp */
  --radius-lg: 0;   /* large feature surfaces — sharp */

  /* Tight tracking for the wordmark logotype. */
  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;

  --shadow-sm: 0 1px 2px rgba(28, 27, 26, 0.04);
  --shadow-md: 0 4px 16px rgba(28, 27, 26, 0.06);
  /* Card elevation: subtle by default, lifts on hover. Warm tint in the
     shadow color (vs. pure black) so the cream background feels coherent
     rather than clinical. */
  --shadow-card:       0 1px 2px rgba(28, 27, 26, 0.04), 0 8px 24px rgba(168, 59, 106, 0.05);
  --shadow-card-hover: 0 2px 4px rgba(28, 27, 26, 0.06), 0 16px 36px rgba(168, 59, 106, 0.10);

  /* Hero washes — single-direction soft gradients used on page intro panels.
     The bottom of the gradient now fades cleanly into the cream background
     so there's no visible "ledge" between the hero and the content below.
     Saturation stays low; the eye should read "ambient" not "banner." */
  --gradient-hero:       linear-gradient(170deg, #fae3ee 0%, #fdf1f7 35%, var(--color-bg) 92%);
  --gradient-hero-soft:  linear-gradient(180deg, rgba(250, 227, 238, 0.55) 0%, rgba(250, 247, 242, 0) 90%);

  /* Five-tone avatar palette. Picked from the same low-saturation warm
     family as the brand pink so initials feel like part of the system,
     not a bag of clip-art colors. All paired with charcoal text. */
  --avatar-1: #f1c9d8;  /* dusty rose */
  --avatar-2: #d8c8e4;  /* dusty lavender */
  --avatar-3: #ecd6c4;  /* soft peach */
  --avatar-4: #c9d8c8;  /* sage mist */
  --avatar-5: #e8d9bf;  /* warm sand */

  --tap-target: 44px;
  --content-max: 28rem;
}