/* ============================================================
   MoneyBeh Design System — Colors & Type (MAINTAINED)
   "Calm. Breathable. Human. One accent. Everything else gets out of the way."

   Mirrors the source of truth: ios/MoneyBeh/Assets.xcassets (color) +
   ios/MoneyBeh/DesignSystem/ (type/spacing/motion), documented in
   web/docs/DesignTokens.md + web/docs/design-system.md. Carries the
   "soft paper" recolor (PR #488) and the 9-rank Joy spectrum.
   Not to be confused with the archived web/prototype/colors_and_type.css.
   ============================================================ */

/* ----- Fonts -------------------------------------------------
   MoneyBeh is SF Pro on iOS. On the web, we use the Apple system
   stack first, with Jost as the cross-platform fallback. Jost is
   geometric, airy, and quietly humanist — it preserves the calm,
   breathable rhythm of SF Pro on Windows / Android / Linux.
   ------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* === COLOR — LIGHT MODE ============================
     "Soft paper" foundation (recolor, PR #488). Mirrors
     ios/MoneyBeh/Assets.xcassets — the asset catalog is the
     single source of truth for these values. */

  /* Canvas + surface layers — a whisper of warmth, neutralized grays */
  --mb-background:       #F7F5F1;   /* Page / app background */
  --mb-surface:          #FDFCFA;   /* Cards, sheets, grouped content */
  --mb-surface-raised:   #FFFFFF;   /* Elevated overlays, inputs */
  --mb-surface-sunken:   #EFEDE8;   /* Progress tracks, pressed states — sits *below* background */

  /* Text — warm-neutral grays, never pure black */
  --mb-text-primary:     #23221F;   /* Headlines, primary labels (14.6:1) */
  --mb-text-secondary:   #5C5B57;   /* Supporting text, subtitles (6.2:1) */
  --mb-text-tertiary:    #727169;   /* Placeholders, hints, timestamps (4.5:1 — passes AA) */
  --mb-text-disabled:    #B9B7B1;   /* Disabled states only (decorative, exempt) */

  /* THE accent — seafoam. ONE per screen, max. Deepened for AA (5.11:1 white-on-fill). */
  --mb-accent:           #2F7A6A;   /* Seafoam — the locked accent */
  --mb-accent-soft:      #E4F4F2;   /* Tint backgrounds, progress ring tracks */
  --mb-accent-mid:       #A0D0C8;   /* Secondary fills, progress mid-tones */
  --mb-accent-faint:     #C6E5E0;   /* Faintest fill — least-achieved goal-ring segment */

  /* Semantic — used only for genuine state communication */
  --mb-positive:         #2F7A6A;   /* Success = accent (brand IS success) */
  --mb-positive-soft:    #E4F4F2;
  --mb-warning:          #C98E38;   /* Calm honey — "behind pace" only, over-budget bars */
  --mb-warning-soft:     #FBF1DD;
  --mb-warning-text:     #846518;   /* Warning label text (4.83:1 — passes AA) */
  --mb-destructive:      #B14A3F;   /* Delete/error actions only — never overspend */
  --mb-destructive-soft: #FBE9E6;

  /* Lines */
  --mb-separator:        #E2DFD9;
  --mb-border:           #E9E6E0;
  --mb-border-focus:     #2F7A6A;   /* = accent. Focus rings only. */

  /* Banner — warm parchment for inline advisory messages. Calm, not alarming. */
  --mb-banner:           #F4EFE6;
  --mb-banner-ink:       #6B5A3E;

  /* === HOLDING ROLE COLORS — fixed, not adaptive =======
     Used exclusively in the account allocation bar. Never
     for general UI or semantic states. */
  --mb-holding-bridge:       #65B5A8;
  --mb-holding-retirement:   #4A8FD9;
  --mb-holding-emergency:    #E8864A;
  --mb-holding-cash:         #8E8E93;
  --mb-holding-debt:         #666670;
  --mb-holding-not-in-plan:  #636369;

  /* === JOY IDENTITY PALETTE — 9-rank Essentialist spectrum ============
     Only inside Joy contexts (SpendSort, Joy buckets, month-end).
     NEVER for CTAs, navigation, focus rings, or non-Joy screens.
     Each hue is an *additive* identifier (icon + label + position also
     carry meaning). Solids are for dots/bars; `*-text` variants (darkened
     to ~5:1) are for hued text. Soft tints back tinted cards. */
  --mb-joy-1:  #D6A23E;  --mb-joy-1-soft:  #FAF3E6;  --mb-joy-1-text:  #8D6A26;  /* Memories */
  --mb-joy-2:  #C46DA2;  --mb-joy-2-soft:  #F7ECF3;  --mb-joy-2-text:  #A05883;  /* Deepening relationships */
  --mb-joy-3:  #5FA85F;  --mb-joy-3-soft:  #EAF4EA;  --mb-joy-3-text:  #447C44;  /* Taking care of yourself */
  --mb-joy-4:  #E08A47;  --mb-joy-4-soft:  #FBF0E7;  --mb-joy-4-text:  #9F6030;  /* Adventure and play */
  --mb-joy-5:  #6566BE;  --mb-joy-5-soft:  #EBEBF7;  --mb-joy-5-text:  #6566BE;  /* Faith and spirituality */
  --mb-joy-6:  #9A6CB6;  --mb-joy-6-soft:  #F2ECF6;  --mb-joy-6-text:  #885FA1;  /* Learning and growing */
  --mb-joy-7:  #5485C4;  --mb-joy-7-soft:  #E9EFF7;  --mb-joy-7-text:  #4771A8;  /* Your home and sanctuary */
  --mb-joy-8:  #E06A5A;  --mb-joy-8-soft:  #FBECEA;  --mb-joy-8-text:  #B25346;  /* Giving generously */
  --mb-joy-9:  #E0CB90;  --mb-joy-9-soft:  #FAF6EA;  --mb-joy-9-text:  #7B6F4D;  /* Spontaneous joy (wildcard) */

  /* === TITHING PALETTE — fixed, never adaptive =========
     Used only in TithingCard and TithingSettings. The warm
     parchment is intentional and stays warm in dark mode —
     it's a distinct spiritual/values context, not a generic
     surface. Never repurpose for other screens. */
  --mb-tithing-bg:      #FAF7F2;   /* Card / screen background — warm parchment */
  --mb-tithing-border:  #E5DDD0;   /* Card border, field outlines */
  --mb-tithing-ink:     #6B5228;   /* Body text inside tithing context */
  --mb-tithing-gold:    #9A7B4A;   /* Labels, amounts, ✦ symbol accent */

  /* === SPACING — 8pt base grid ======================== */
  --mb-space-xxs:  4px;   /* Tight gaps. Icon-to-label. */
  --mb-space-xs:   8px;   /* Between related elements. */
  --mb-space-sm:   12px;  /* Compact internal padding. */
  --mb-space-md:   16px;  /* Standard padding. Card interior. */
  --mb-space-lg:   24px;  /* Card-to-card gaps. */
  --mb-space-xl:   32px;  /* Major section separator. */
  --mb-space-xxl:  48px;  /* Top/bottom of screen. */
  --mb-space-xxxl: 64px;  /* Milestone celebrations. */

  /* === CORNER RADIUS ================================== */
  --mb-radius-sm:   8px;     /* Tags, chips, badges */
  --mb-radius-md:   12px;    /* Standard cards, inputs */
  --mb-radius-lg:   16px;    /* Featured cards, sheets */
  --mb-radius-xl:   20px;    /* Hero cards, modals */
  --mb-radius-ios:  13px;    /* iOS standard card radius */
  --mb-radius-full: 999px;   /* Pills, fully rounded buttons */

  /* === ELEVATION ======================================
     MoneyBeh layers, doesn't stack shadows. The single
     allowed shadow is the milestone celebration overlay. */
  --mb-shadow-card:       0 1px 2px rgba(0, 0, 0, 0.04);
  --mb-shadow-elevated:   0 2px 8px rgba(0, 0, 0, 0.06);
  --mb-shadow-celebration:0 24px 48px -12px rgba(0, 0, 0, 0.18);

  /* === MOTION =========================================
     Motion at MoneyBeh feels like breathing. Slow inhales,
     gentle exhales, never urgent. Every transition uses an
     ease-out so things SETTLE rather than snap. Springs are
     reserved for milestones, and even those land softly.
     Bouncy, kinetic motion is forbidden: this is a calm,
     confident guide, not a slot machine. */
  --mb-ease-out:     cubic-bezier(0.2, 0.7, 0.1, 1);    /* Default — long settling exhale */
  --mb-ease-breathe: cubic-bezier(0.4, 0.0, 0.2, 1);    /* Symmetrical for loops */
  --mb-ease-spring:  cubic-bezier(0.34, 1.2, 0.64, 1);  /* Restrained — milestones only */
  --mb-dur-fast:     220ms;   /* Press states, hover — still calm */
  --mb-dur-base:     420ms;   /* Card transitions, sheet present */
  --mb-dur-slow:     900ms;   /* Progress fills — a long exhale */
  --mb-dur-celebrate: 1400ms; /* Milestone reveal — unhurried */
  --mb-dur-breathe:  4200ms;  /* Idle breathe loop on hero numbers */

  /* === TYPE — base tokens ============================= */
  --mb-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                     "SF Pro", "Jost", "Segoe UI", Roboto, sans-serif;
  --mb-font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text",
                     "SF Pro", "Jost", "Segoe UI", Roboto, sans-serif;
  --mb-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo,
                     Consolas, monospace;

  /* Sizes — iOS HIG dynamic type defaults (Large) */
  --mb-size-display:    48px;  /* Major numbers, milestone headlines */
  --mb-size-title-1:    34px;  /* iOS large nav titles ("Freedom") */
  --mb-size-title-2:    28px;  /* Section headers */
  --mb-size-title-3:    20px;  /* Card titles — iOS .title3 */
  --mb-size-title-4:    17px;  /* Subsection — iOS .headline */
  --mb-size-headline:   17px;  /* Primary labels, card row titles — iOS .headline */
  --mb-size-body:       17px;  /* Paragraph text — iOS .body (HIG default) */
  --mb-size-callout:    16px;  /* iOS .callout — secondary body */
  --mb-size-body-sm:    15px;  /* iOS .subhead */
  --mb-size-label:      13px;  /* iOS .footnote — supporting text */
  --mb-size-caption:    11px;  /* iOS .caption2 — tracked uppercase */

  /* Numeric sizes (always tabular) */
  --mb-size-numeric-lg: 52px;
  --mb-size-numeric-md: 34px;
  --mb-size-numeric-sm: 22px;

  /* Weights */
  --mb-weight-thin:     300;   /* Large numbers — calm, not alarming */
  --mb-weight-regular:  400;
  --mb-weight-medium:   500;
  --mb-weight-semi:     600;
  --mb-weight-bold:     700;   /* iOS large title; never financial numbers */

  /* Line-heights and tracking */
  --mb-leading-tight:   1.1;
  --mb-leading-snug:    1.25;
  --mb-leading-normal:  1.45;
  --mb-leading-relaxed: 1.55;
  --mb-track-caption:   0.5px; /* The only tracking we use, for ALL CAPS */
}

/* === DARK MODE — warm-neutral, mirrors the asset catalog ===== */
.dark, [data-theme="dark"] {
  --mb-background:       #161514;
  --mb-surface:          #201F1D;
  --mb-surface-raised:   #2B2A27;
  --mb-surface-sunken:   #0F0E0D;

  --mb-text-primary:     #F1EFEC;
  --mb-text-secondary:   #A6A39D;
  --mb-text-tertiary:    #86837E;
  --mb-text-disabled:    #5C5A55;

  --mb-accent:           #65B5A8;
  --mb-accent-soft:      #102926;
  --mb-accent-mid:       #3A8C7E;
  --mb-accent-faint:     #29655A;

  --mb-positive:         #65B5A8;
  --mb-positive-soft:    #102926;
  --mb-warning:          #D8A24E;
  --mb-warning-soft:     #2A2310;
  --mb-warning-text:     #D8B36A;
  --mb-destructive:      #EF4444;
  --mb-destructive-soft: #330A0D;

  --mb-separator:        #2E2C29;
  --mb-border:           #353330;
  --mb-border-focus:     #65B5A8;

  /* Banner stays warm parchment by design, even in dark mode */

  /* Joy — 9-rank spectrum, dark variants */
  --mb-joy-1:  #D6B36E;  --mb-joy-1-soft:  #2A2410;  --mb-joy-1-text:  #D6B36E;
  --mb-joy-2:  #CE89B3;  --mb-joy-2-soft:  #2B1826;  --mb-joy-2-text:  #CE89B3;
  --mb-joy-3:  #86C586;  --mb-joy-3-soft:  #14260F;  --mb-joy-3-text:  #86C586;
  --mb-joy-4:  #D89E6E;  --mb-joy-4-soft:  #2A1C10;  --mb-joy-4-text:  #D89E6E;
  --mb-joy-5:  #9092CE;  --mb-joy-5-soft:  #16172B;  --mb-joy-5-text:  #9092CE;
  --mb-joy-6:  #B791CC;  --mb-joy-6-soft:  #221830;  --mb-joy-6-text:  #B791CC;
  --mb-joy-7:  #88A9D6;  --mb-joy-7-soft:  #121F2E;  --mb-joy-7-text:  #88A9D6;
  --mb-joy-8:  #E08C7E;  --mb-joy-8-soft:  #2C130F;  --mb-joy-8-text:  #E08C7E;
  --mb-joy-9:  #ECDCA8;  --mb-joy-9-soft:  #2A2510;  --mb-joy-9-text:  #ECDCA8;
}

/* === SEMANTIC TYPE CLASSES ==================================
   Apply these directly. They map onto the iOS native scale and
   carry the MoneyBeh weight/tracking rules. */

.mb-display {
  font-family: var(--mb-font-display);
  font-size: var(--mb-size-display);
  font-weight: var(--mb-weight-thin);
  line-height: var(--mb-leading-tight);
  letter-spacing: -0.02em;
  color: var(--mb-text-primary);
}

.mb-title-1 {
  font-family: var(--mb-font-display);
  font-size: var(--mb-size-title-1);
  font-weight: var(--mb-weight-bold);    /* iOS large title is bold */
  line-height: var(--mb-leading-tight);
  letter-spacing: -0.02em;
  color: var(--mb-text-primary);
}

.mb-title-2 {
  font-family: var(--mb-font-display);
  font-size: var(--mb-size-title-2);
  font-weight: var(--mb-weight-bold);
  line-height: var(--mb-leading-tight);
  letter-spacing: -0.015em;
  color: var(--mb-text-primary);
}

.mb-title-3 {
  font-family: var(--mb-font-text);
  font-size: var(--mb-size-title-3);
  font-weight: var(--mb-weight-semi);
  line-height: var(--mb-leading-snug);
  color: var(--mb-text-primary);
}

.mb-headline {
  font-family: var(--mb-font-text);
  font-size: var(--mb-size-headline);
  font-weight: var(--mb-weight-medium);
  line-height: var(--mb-leading-snug);
  color: var(--mb-text-primary);
}

.mb-body {
  font-family: var(--mb-font-text);
  font-size: var(--mb-size-body);
  font-weight: var(--mb-weight-regular);
  line-height: var(--mb-leading-relaxed);
  color: var(--mb-text-secondary);
}

.mb-body-sm {
  font-family: var(--mb-font-text);
  font-size: var(--mb-size-body-sm);
  font-weight: var(--mb-weight-regular);
  line-height: var(--mb-leading-relaxed);
  color: var(--mb-text-secondary);
}

.mb-label {
  font-family: var(--mb-font-text);
  font-size: var(--mb-size-label);
  font-weight: var(--mb-weight-regular);
  line-height: var(--mb-leading-normal);
  color: var(--mb-text-secondary);
}

/* The MoneyBeh caption: sentence case, no tracking, tertiary. Reads as
   words ("Freedom date", "This month"), never ALL-CAPS letterhead.
   Uppercase only for genuine acronyms/tickers. */
.mb-caption {
  font-family: var(--mb-font-text);
  font-size: var(--mb-size-caption);
  font-weight: var(--mb-weight-semi);
  line-height: var(--mb-leading-normal);
  color: var(--mb-text-tertiary);
}

/* Numeric — always monospaced digits to prevent layout shift.
   Balance figures sit at REGULAR (thin-at-card-size reads fragile);
   .thin is reserved for the ONE hero number per screen. Never bold. */
.mb-num-lg, .mb-num-md, .mb-num-sm, .mb-num-thin {
  font-family: var(--mb-font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--mb-text-primary);
}
.mb-num-lg   { font-size: var(--mb-size-numeric-lg); font-weight: var(--mb-weight-regular); line-height: 1; }
.mb-num-md   { font-size: var(--mb-size-numeric-md); font-weight: var(--mb-weight-regular); line-height: 1; }
.mb-num-sm   { font-size: var(--mb-size-numeric-sm); font-weight: var(--mb-weight-regular); line-height: 1; }
.mb-num-thin { font-size: 44px;                       font-weight: var(--mb-weight-thin);    line-height: 1; }  /* the one thin hero per screen */

/* Mono — code, account numbers, technical strings */
.mb-mono {
  font-family: var(--mb-font-mono);
  font-size: var(--mb-size-body-sm);
  font-variant-numeric: tabular-nums;
}

/* === BASE ELEMENT MAPPING ==================================
   Sane defaults for documents that just use raw HTML tags. */

body {
  font-family: var(--mb-font-text);
  font-size: var(--mb-size-body);
  font-weight: var(--mb-weight-regular);
  line-height: var(--mb-leading-relaxed);
  color: var(--mb-text-primary);
  background: var(--mb-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-family: var(--mb-font-display); font-size: var(--mb-size-title-1); font-weight: var(--mb-weight-bold); line-height: var(--mb-leading-tight); letter-spacing: -0.02em; }
h2 { font-family: var(--mb-font-display); font-size: var(--mb-size-title-2); font-weight: var(--mb-weight-bold); line-height: var(--mb-leading-tight); letter-spacing: -0.015em; }
h3 { font-family: var(--mb-font-text); font-size: var(--mb-size-title-3); font-weight: var(--mb-weight-semi); line-height: var(--mb-leading-snug); }
h4 { font-family: var(--mb-font-text); font-size: var(--mb-size-title-4); font-weight: var(--mb-weight-medium); line-height: var(--mb-leading-snug); }
p  { margin: 0 0 var(--mb-space-md); color: var(--mb-text-secondary); text-wrap: pretty; }
a  { color: var(--mb-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: var(--mb-size-label); color: var(--mb-text-tertiary); }
code { font-family: var(--mb-font-mono); font-size: 0.9em; background: var(--mb-surface-sunken); padding: 0.1em 0.35em; border-radius: var(--mb-radius-sm); }

/* === UTILITY HELPERS ======================================= */
.mb-tabular { font-variant-numeric: tabular-nums; }
.mb-divider { height: 1px; background: var(--mb-separator); border: 0; }

/* === MOTION KEYFRAMES =====================================
   Hero numerics use `mb-breathe` to subtly inhale/exhale at
   rest — a near-imperceptible 1% scale that signals "I'm
   here, calmly working." Use sparingly: never on more than
   one element per screen, never on dense lists.
   Honors prefers-reduced-motion. */
@keyframes mb-breathe {
  0%, 100% { transform: scale(1.0);    opacity: 1.0; }
  50%      { transform: scale(1.012);  opacity: 0.96; }
}
@keyframes mb-soft-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mb-breathe { animation: mb-breathe var(--mb-dur-breathe) var(--mb-ease-breathe) infinite; }
.mb-fade-in { animation: mb-soft-fade-in var(--mb-dur-base) var(--mb-ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .mb-breathe, .mb-fade-in { animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}