/* ============================================================
   Motivation with Elements — Design Tokens
   Shared color + type variables. Import first, before other CSS.
   Palette grounded in the forest/water mood: dark coral + sage,
   warm amber accent, soft warm-paper background.
   ============================================================ */

:root {
  /* --- Core palette --- */
  --lila:     #59597c;
  --coral:          #d48f85;
  --green-transparent:    rgba(176, 226, 214, 0.35);
  --bridge:    #859891;
  --sage:          #565e59;
  --pinky:    #c2aba8;
  --turq: rgba(174,236,222,0.85);


  /* --- Accents (from landing page) --- */
  --accent-purple: #4a4b79;
  --warm-amber:    #e4af66;

  /* --- Neutrals / text --- */
  --text-dark:     #2a2a2a;
  --text-mid:      #555;
  --text-light:    #888;

  /* --- Surfaces --- */
  --bg-warm:       #ddcfb9;
  --bg-card:       #ffffff;
  --bg-tint:       rgba(124, 149, 134, 0.08);

  /* --- Borders --- */
  --border-soft:   rgba(61, 90, 74, 0.2);
  --border-mid:    rgba(61, 90, 74, 0.35);

  /* --- Type --- */
  --font-display:  'Nemoy', Georgia, serif;
  --font-body:     'Fira Mono', 'Courier New', monospace;

  /* --- Spacing scale --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* --- Layout --- */
  --content-max: 1100px;
  --radius: 6px;
}