/* ==========================================================================
   DESIGN TOKENS — Masohi PWA
   ==========================================================================
   Single source of brand truth for the app. Values come from the canonical
   brand color system: brand/masohi-color-system.md (derived from the
   screenshot direction). Edit a value here and the whole app follows; keep it
   in sync with that brand file.

   Palette: Night Ink base · Calm Mint (calm/function) · Orchid Bloom
   (brand + milestone/reward) · Golden Sand (warmth). Color is a REWARD, not a
   background. Orchid especially appears when something is achieved — mirroring
   the Larat orchid narrative: growth = routine, knowledge and consistency,
   never a promised skin transformation.
   Target mix — 82% dark neutrals · 10% text · 5% mint · 2% orchid · 1% sand.
   ========================================================================== */

:root {
  /* ---- Base surfaces (Night Ink) ---- */
  --bg: #080a0e;
  --bg-elevated: #0d1015;
  --surface: #16191f;
  --surface-2: #1a1f26;
  --surface-hover: #20242c;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: #333a47; /* Soft Border — borders, rings, inactive controls */

  /* ---- Text ---- */
  --text: #f7f8fa; /* Soft White — very strong contrast on Night Ink */
  --text-secondary: #a5abb5; /* Mist Gray */
  --text-tertiary: #7f8791; /* Quiet Gray */
  --text-disabled: #565e69;
  --text-on-reward: #0d1210; /* dark text on top of a light reward gradient */

  /* ---- Calm Mint — calm functional color (active, checks, progress) ---- */
  --mint: #9ed9cd;
  --mint-dim: #397f72; /* Mint Deep — for text/buttons on light */
  --mint-light: #bdefe5;
  --mint-soft: rgba(158, 217, 205, 0.13);
  --mint-line: rgba(158, 217, 205, 0.45);

  /* ---- Orchid Bloom — brand + milestone + reward (the Larat purple) ---- */
  --orchid: #a78ad8;
  --orchid-light: #c6b4f2;
  --orchid-deep: #6f5aa1;
  --orchid-soft: rgba(167, 138, 216, 0.14);
  --orchid-line: rgba(167, 138, 216, 0.45);

  /* ---- Golden Sand — warmth: morning, streak, small details ---- */
  --sand: #e7c572;
  --sand-dim: #a9772f; /* Sand Deep — readable on light */
  --sand-soft: rgba(231, 197, 114, 0.13);

  /* ---- Semantic ---- */
  --danger: #d98a7e;
  --success-quiet: #8a9a8f;

  /* ---- Signature gradient (mint → cool grey → orchid) --------------------
     The Masohi brand gradient. Used for the ring, the "View milestones"
     border, milestone progress, special selected cards, subtle lines.
     NEVER as a large background behind body text. */
  --gradient-brand: linear-gradient(90deg, #9ed9cd 0%, #91a9bd 50%, #a78ad8 100%);
  --gradient-brand-soft: linear-gradient(135deg, #bdefe5 0%, #c9d2e5 52%, #c6b4f2 100%);
  --gradient-brand-night: linear-gradient(135deg, #162522 0%, #202536 50%, #292039 100%);

  /* ---- Milestone gradients (one family, six stages) ----------------------
     The orchid growth arc: almost-colorless start → mint rooting → lavender
     leaves → deeper routine → orchid bud with a hint of sand → full
     (non-rainbow) bloom. See brand/masohi-color-system.md §6. */
  --gradient-day1: linear-gradient(135deg, #ddebe7 0%, #c9d5e4 52%, #c6b4f2 100%);
  --gradient-day7: linear-gradient(135deg, #9ed9cd 0%, #c1dbcf 58%, #e5cc97 100%);
  --gradient-day14: linear-gradient(135deg, #90d0c3 0%, #afcfd4 48%, #bbaae5 100%);
  --gradient-day30: linear-gradient(135deg, #80c4b6 0%, #8faebe 48%, #9e84cf 100%);
  --gradient-day60: linear-gradient(135deg, #79b8ac 0%, #927fc7 52%, #dcb96f 100%);
  --gradient-day90: linear-gradient(120deg, #9ed9cd 0%, #9b91d2 38%, #c69acf 70%, #e8c874 100%);

  /* ambient glow behind reward objects (single soft orchid-mint) */
  --gradient-glow: rgba(167, 138, 216, 0.22);

  /* the soft mint+orchid glow under the ring (from the screenshot) */
  --glow-masohi:
    radial-gradient(circle at 32% 52%, rgba(158, 217, 205, 0.18) 0%, rgba(158, 217, 205, 0.07) 34%, transparent 58%),
    radial-gradient(circle at 72% 62%, rgba(167, 138, 216, 0.15) 0%, rgba(167, 138, 216, 0.05) 36%, transparent 60%);

  /* ---- Typography ----
     Masohi pairing: Fraunces soft-serif for display (big numbers, headings,
     article + milestone titles), Inter for all UI text. See
     brand/brand-typography.md. Loaded via Google Fonts in index.html;
     Georgia/system fallbacks keep it usable offline before fonts cache. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --tracking-tight: -0.04em;
  --tracking-snug: -0.02em;
  --tracking-display: -0.01em;

  /* ---- Radii & spacing ---- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Motion (respects prefers-reduced-motion, see app.css) ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 160ms;
  --duration-med: 320ms;
  --duration-slow: 600ms;

  /* ---- Layout ---- */
  --max-width: 480px;
  --tap-min: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Reward gradient helper classes — applied only to milestone-context elements.
   Doubled selector (specificity 0,2,0) so these win over component backgrounds
   like `.card` in app.css, which loads later. */
.reward-day1.reward-day1 { background: var(--gradient-day1); }
.reward-day7.reward-day7 { background: var(--gradient-day7); }
.reward-day14.reward-day14 { background: var(--gradient-day14); }
.reward-day30.reward-day30 { background: var(--gradient-day30); }
.reward-day60.reward-day60 { background: var(--gradient-day60); }
.reward-day90.reward-day90 { background: var(--gradient-day90); }