/* uSensi design tokens — warm pastel, simple, mobile-first. */
:root {
  /* Palette — soft cream base, mint primary, peach accent */
  --bg:           #faf6f1;
  --surface:      #ffffff;
  --surface-2:    #f3ede5;
  --surface-warm: #fff7ed;
  --border:       #e8ddd1;
  --border-soft:  #f0e8de;

  --primary:      #4fa08c;
  --primary-ink:  #2b6357;
  --primary-soft: #d5ece4;

  --accent:       #f2a88f;
  --accent-soft:  #fde6db;

  --text:         #2a1f18;
  --text-muted:   #6e5f54;
  --text-faint:   #a89a8e;

  --success:      #4caf6a;
  --success-soft: #d8efdf;
  --warning:      #d68b3c;
  --warning-soft: #fbe9d1;
  --danger:       #d9534f;
  --danger-soft:  #fadcdb;

  /* Typography — system stack with CJK priority */
  --font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans CJK TC",
          "Microsoft JhengHei", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-h2:   22px;
  --fs-h1:   28px;

  --lh-tight:  1.3;
  --lh-base:   1.55;
  --lh-loose:  1.7;

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

  /* Radii */
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* Shadows — kept subtle (warm tone, not gray) */
  --shadow-sm: 0 1px 2px rgba(43, 33, 24, 0.05);
  --shadow:    0 2px 10px rgba(43, 33, 24, 0.07);
  --shadow-lg: 0 8px 24px rgba(43, 33, 24, 0.10);
  --shadow-press: 0 0 0 4px rgba(79, 160, 140, 0.18);

  /* Motion — cubic-beziers + durations */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --ease-soft: cubic-bezier(0.34, 1.56, 0.64, 1);   /* gentle spring */
  --motion-fast:   140ms;
  --motion-medium: 240ms;
  --motion-slow:   400ms;

  /* Safe-area for iOS notch */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:   0ms;
    --motion-medium: 0ms;
    --motion-slow:   0ms;
  }
}