/* ============================================================
   Trickle Design System — Colors & Type
   Single source of truth. Import this CSS for any Trickle artifact.
   Extracted from the Trickle codebase (DesignSystem.md, 12 Apr 2026).
   ============================================================ */

/* ---------- Font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
  /* ---------- Core palette (hex mirrors of HSL tokens) ---------- */
  --background: #f8faf4;          /* Page bg — warm off-white */
  --foreground: #1a3126;          /* Primary text — deep forest */
  --card: #f3f6ee;                /* Card bg — softer than page */
  --card-foreground: #1a3126;
  --popover: #ffffff;
  --popover-foreground: #1a3126;
  --muted: #ebeee6;
  --muted-foreground: #677e72;    /* Captions, secondary text */
  --border: #d1e0d7;
  --input: #d1e0d7;

  /* ---------- Brand ---------- */
  --primary: #3a9b63;             /* Brand green — the droplet */
  --primary-foreground: #ffffff;
  --primary-soft: rgba(58, 155, 99, 0.1);   /* bg-primary/10 */
  --primary-ring: #3a9b63;

  --secondary: #e8eedc;           /* Soft sage surfaces */
  --secondary-foreground: #234233;

  --accent: #f4c63d;              /* Celebration gold */
  --accent-foreground: #4c3b19;

  --destructive: #dc3b3b;
  --destructive-foreground: #ffffff;

  /* ---------- Habit (streaks / celebration) ---------- */
  --habit-celebration: #fed24c;   /* Star / badge earned */
  --habit-streak: #f97a1f;        /* Flame / streak */

  /* ---------- Lab category palette (Money Moves) ----------
     Each category has an accent + a 94%-light fill for card bgs. */
  --lab-teal: #20b6a9;            --lab-teal-light: #e6f8f7;    /* Save */
  --lab-purple: #8c47d1;          --lab-purple-light: #efe8f7;  /* Invest */
  --lab-amber: #f39d24;           --lab-amber-light: #fbf1e3;   /* Smart Spend */
  --lab-coral: #ea6247;           --lab-coral-light: #fbece9;   /* Plan Ahead */
  /* Earn = primary; Learn = secondary — see nudge color map */

  /* ---------- Sidebar (shadcn default, desktop-only surfaces) ---------- */
  --sidebar-background: #f9f9f9;
  --sidebar-foreground: #3f3f46;
  --sidebar-primary: #17171b;
  --sidebar-primary-foreground: #f9f9f9;
  --sidebar-accent: #f4f4f5;
  --sidebar-accent-foreground: #17171b;
  --sidebar-border: #e5e7eb;
  --sidebar-ring: #3b82f5;

  /* ---------- Radii ---------- */
  --radius: 1rem;                 /* 16px base — rounded-lg */
  --radius-sm: calc(var(--radius) - 4px); /* 12px */
  --radius-md: calc(var(--radius) - 2px); /* 14px */
  --radius-lg: var(--radius);             /* 16px — cards */
  --radius-xl: 0.75rem;                   /* shadcn rounded-xl == 12px */
  --radius-2xl: 1rem;                     /* chips, buttons — most common */
  --radius-3xl: 1.5rem;                   /* sheet tops */
  --radius-pill: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-bubble: 0 4px 20px -4px rgba(58, 155, 99, 0.15);
  --shadow-soft: 0 1px 3px rgba(26, 49, 38, 0.06);

  /* ---------- Type scale ---------- */
  --font-sans: 'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --text-9: 9px;        /* Calendar day labels */
  --text-10: 10px;      /* Nav labels, badge titles, micro-captions */
  --text-11: 11px;      /* Chart labels, tiny CTAs */
  --text-xs: 12px;      /* Captions, metadata, pills */
  --text-sm: 14px;      /* Body — most common */
  --text-base: 16px;    /* Larger body, CTAs */
  --text-lg: 18px;      /* Section headings */
  --text-xl: 20px;      /* Sub-headings */
  --text-2xl: 24px;     /* Card titles */
  --text-3xl: 30px;     /* Big stats */
  --text-4xl: 36px;     /* Celebration */
  --text-5xl: 48px;     /* Hero */

  /* Weights (Nunito is heavy-forward — bold is the default for a reason) */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;         /* most common */
  --fw-extrabold: 800;    /* section headings, sheet titles */
  --fw-black: 900;        /* hero stats */
}

/* ---------- Base ---------- */
html, body {
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  font-weight: var(--fw-bold);     /* Trickle defaults heavy — it's friendly */
  -webkit-font-smoothing: antialiased;
}

/* ---------- Semantic type utilities ---------- */
.t-hero       { font-size: var(--text-5xl); font-weight: var(--fw-black); line-height: 1.05; letter-spacing: -0.01em; }
.t-h1         { font-size: var(--text-3xl); font-weight: var(--fw-extrabold); line-height: 1.15; }
.t-h2         { font-size: var(--text-2xl); font-weight: var(--fw-extrabold); line-height: 1.2; }
.t-h3         { font-size: var(--text-xl);  font-weight: var(--fw-extrabold); line-height: 1.25; }
.t-section    { font-size: var(--text-lg);  font-weight: var(--fw-extrabold); line-height: 1.3; }
.t-title      { font-size: var(--text-base);font-weight: var(--fw-extrabold); line-height: 1.35; }

.t-body       { font-size: var(--text-sm);  font-weight: var(--fw-bold);      line-height: 1.5; }
.t-body-semi  { font-size: var(--text-sm);  font-weight: var(--fw-semibold);  line-height: 1.5; }
.t-caption    { font-size: var(--text-xs);  font-weight: var(--fw-bold);      line-height: 1.4; color: var(--muted-foreground); }
.t-micro      { font-size: var(--text-10);  font-weight: var(--fw-bold);      line-height: 1.3; letter-spacing: 0.02em; }
.t-eyebrow    { font-size: var(--text-10);  font-weight: var(--fw-extrabold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }

.t-stat-hero  { font-size: var(--text-5xl); font-weight: var(--fw-black); color: var(--primary); line-height: 1; }
.t-stat       { font-size: var(--text-3xl); font-weight: var(--fw-black); color: var(--foreground); line-height: 1; }

.fg-muted     { color: var(--muted-foreground); }
.fg-primary   { color: var(--primary); }
.fg-destructive { color: var(--destructive); }

/* ---------- Reusable primitives ---------- */
.card-playful {
  background: var(--card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-bubble);
  border: 0;
}

.bubble-shadow { box-shadow: var(--shadow-bubble); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  background: var(--muted);
  color: var(--muted-foreground);
}
.pill--active { background: var(--primary); color: var(--primary-foreground); }

/* Lab-category helper classes (pill tinting) */
.cat-save        { background: var(--lab-teal-light);   color: var(--lab-teal); }
.cat-invest      { background: var(--lab-purple-light); color: var(--lab-purple); }
.cat-smart-spend { background: var(--lab-amber-light);  color: var(--lab-amber); }
.cat-earn        { background: var(--primary-soft);     color: var(--primary); }
.cat-plan-ahead  { background: var(--lab-coral-light);  color: var(--lab-coral); }
.cat-learn       { background: var(--secondary);        color: var(--secondary-foreground); }

/* ---------- Motion ---------- */
@keyframes bounce-gentle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-3deg); }
  75%      { transform: rotate(3deg); }
}
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 2px var(--primary); }
  50%      { box-shadow: 0 0 0 4px rgba(58, 155, 99, 0.4); }
}