/* ============================================================
   My Day — Design Tokens
   Soft-pastel kawaii, hand-tuned. Three-layer tokens:
   primitive -> semantic -> component.
   ============================================================ */

:root {
  /* ---- Primitive: pastel palette ---- */
  --pink-50:  #fff5f9;
  --pink-100: #ffe7f1;
  --pink-200: #ffd1e3;
  --pink-300: #ffb3d1;
  --pink-400: #ff8cba;
  --pink-500: #ff5ea0;

  --blue-100: #eaf6ff;
  --blue-200: #bfe3ff;
  --blue-300: #8fccff;

  --lilac-100: #f3edff;
  --lilac-200: #e2d4ff;
  --lilac-300: #c7adff;

  --coral-100: #ffeced;
  --coral-200: #ffc9cb;
  --coral-300: #ff9fa3;

  --mint-100: #e9f9ee;
  --mint-200: #cdefd4;
  --mint-300: #9fe0ad;

  --cream:    #fffaf6;
  --ink-900:  #4a3340;   /* warm plum-charcoal, never pure black */
  --ink-700:  #6e5562;
  --ink-500:  #9a8490;
  --ink-300:  #c9bcc4;

  --white:    #ffffff;
  --gold:     #ffd66b;
  --good:     #57c98a;   /* improvement / success green */
  --good-bg:  #dcf6e7;
  --warn:     #ff9a76;

  /* ---- Semantic ---- */
  --bg:            var(--pink-50);
  --bg-elevated:   var(--white);
  --bg-sunken:     var(--pink-100);
  --surface-glass: rgba(255, 255, 255, 0.72);
  --text:          var(--ink-900);
  --text-soft:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --line:          #f2dfe9;
  --accent:        var(--pink-400);
  --accent-strong: var(--pink-500);
  --focus:         #b06aff;

  /* habit colours */
  --c-water:    var(--blue-200);
  --c-water-bg: var(--blue-100);
  --c-water-bd: var(--blue-300);
  --c-steps:    var(--pink-200);
  --c-steps-bg: var(--pink-100);
  --c-steps-bd: var(--pink-300);
  --c-sleep:    var(--lilac-200);
  --c-sleep-bg: var(--lilac-100);
  --c-sleep-bd: var(--lilac-300);
  --c-vit:      var(--coral-200);
  --c-vit-bg:   var(--coral-100);
  --c-vit-bd:   var(--coral-300);
  --c-food:     var(--mint-200);
  --c-food-bg:  var(--mint-100);
  --c-food-bd:  var(--mint-300);
  --c-skin:     #ffd9b3;
  --c-skin-bg:  #fff1e3;
  --c-skin-bd:  #ffb877;

  /* ---- Spacing scale (4px base, 1.5 rhythm) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ---- Radii (rounded, cosy) ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Type ---- */
  --font-display: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --font-body: "Nunito", "Quicksand", system-ui, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.2rem;
  --fs-3xl: 3rem;

  /* ---- Shadows: soft, pink-tinted, never harsh black ---- */
  --sh-sm: 0 2px 8px rgba(255, 142, 186, 0.12);
  --sh-md: 0 8px 24px rgba(255, 142, 186, 0.16);
  --sh-lg: 0 18px 48px rgba(176, 106, 255, 0.18);
  --sh-inset: inset 0 2px 6px rgba(174, 110, 142, 0.10);

  /* ---- Motion ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

@media (prefers-color-scheme: dark) {
  /* Gentle dusk variant — still soft and warm, not clinical */
  :root {
    --bg:          #2a2230;
    --bg-elevated: #352a3d;
    --bg-sunken:   #241d2a;
    --surface-glass: rgba(53, 42, 61, 0.7);
    --text:        #f7ecf3;
    --text-soft:   #d9c6d3;
    --text-muted:  #a892a2;
    --line:        #463a50;
    --cream:       #352a3d;
  }
}