/* ============================================================
   Calluna — "Calm" design tokens (the default theme)
   Calm teal action accent on clean neutral surfaces.
   Dark-first (the app default); light values included.
   Import into Claude Design as the foundation layer.
   ============================================================ */

:root {
  /* Brand — the calm teal spark (single action color) */
  --calm-brand: #149a8a;
  --calm-brand-hover: #11897b;
  --calm-brand-pressed: #0e756a;
  --calm-brand-subtle: #d6f0ec;
  --calm-on-brand: #ffffff;

  /* Surfaces — clean, faintly cool neutral (light) */
  --calm-bg: #f2f4f5;
  --calm-surface: #fafbfc;
  --calm-surface-raised: #ffffff;
  --calm-surface-sunken: #e8ebed;
  --calm-border: #e3e7e8;
  --calm-border-strong: #d2d8d9;

  /* Text (light) */
  --calm-text-strong: #1f2729;
  --calm-text: #36403f;
  --calm-text-muted: #6b7477;
  --calm-text-faint: #9aa1a3;

  /* Status (constant across themes) */
  --calm-success: #6fa12f;
  --calm-warning: #cc9a1f;
  --calm-danger: #d4477e;
  --calm-info: #4f8fd0;

  /* Mood scale — brights (intensity, not good/bad) */
  --calm-mood-0: #6aa9e0;
  --calm-mood-1: #a892e6;
  --calm-mood-2: #f5c84a;
  --calm-mood-3: #8cc63f;
  --calm-mood-4: #f0699a;

  /* Type — Nunito, rounded and warm */
  --calm-font: "Nunito", system-ui, sans-serif;
  --calm-text-xs: 0.78rem;
  --calm-text-sm: 0.9rem;
  --calm-text-base: 1rem;
  --calm-text-md: 1.15rem;
  --calm-text-lg: 1.4rem;
  --calm-text-xl: 1.85rem;
  --calm-text-2xl: 2.6rem;
  --calm-text-3xl: 3.4rem;
  --calm-weight-regular: 400;
  --calm-weight-medium: 600;
  --calm-weight-bold: 800;

  /* Shape & depth */
  --calm-radius-sm: 10px;
  --calm-radius-md: 16px;
  --calm-radius-lg: 22px;
  --calm-radius-pill: 999px;
  --calm-shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.18);
  --calm-shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.55);

  /* Spacing scale */
  --calm-space-1: 4px;
  --calm-space-2: 8px;
  --calm-space-3: 12px;
  --calm-space-4: 16px;
  --calm-space-5: 24px;
  --calm-space-6: 32px;
  --calm-space-8: 56px;
}

/* Dark — the app default: calm charcoal + brightened teal */
:root,
[data-theme="dark"] {
  --calm-brand: #2bbfac;
  --calm-brand-hover: #3fd0bd;
  --calm-brand-pressed: #22a896;
  --calm-brand-subtle: #16302d;
  --calm-on-brand: #06231f;

  --calm-bg: #16191a;
  --calm-surface: #1f2426;
  --calm-surface-raised: #262c2e;
  --calm-surface-sunken: #101314;
  --calm-border: #2e3537;
  --calm-border-strong: #404749;

  --calm-text-strong: #eef2f2;
  --calm-text: #d4dadb;
  --calm-text-muted: #919999;
  --calm-text-faint: #6b7273;

  --calm-success: #8cc63f;
  --calm-warning: #e0b73a;
  --calm-danger: #e86aa0;
  --calm-info: #6aa9e0;
}