/* ==========================================================================
   O'Budget — web design tokens
   Lifted 1:1 from the Android app (ui/theme/Palette.kt, Color.kt, Type.kt,
   SoftShadow.kt and ui/components/*). 1dp in the app = 1px here; sp = px.
   Load Manrope first:
   <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --ob-purple: #7340FE;          /* purple as TEXT / ICON / BORDER / WASH. Lifts in dark. */
  --ob-purple-fill: #7340FE;     /* purple as a BACKGROUND with white on it. Never lifts. */
  --ob-purple-pressed: #6B3FE0;
  --ob-purple-highlight: #8D63FE;/* CTA inner-top highlight, gradient start */
  --ob-on-purple: #FAFAFA;       /* label on a purple fill */
  --ob-gradient-brand: linear-gradient(135deg, #8D63FE 0%, #7340FE 50%, #6B3FE0 100%);

  /* Purple washes (alpha of --ob-purple) */
  --ob-purple-5:  rgb(115 64 254 / 0.05);
  --ob-purple-8:  rgb(115 64 254 / 0.08);   /* tinted button, active chip, pill */
  --ob-purple-16: rgb(115 64 254 / 0.16);
  --ob-purple-24: rgb(115 64 254 / 0.24);   /* tinted button border */
  --ob-purple-55: rgb(115 64 254 / 0.55);

  /* ── Surfaces (depth = lightness step, plus a soft shadow on light) ───── */
  --ob-bg: #F8F9FA;              /* page */
  --ob-surface: #FFFFFF;         /* card */
  --ob-surface-raised: #FFFFFF;  /* sheet / modal / popover (one step above a card) */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --ob-text: #181818;            /* headings, values */
  --ob-text-secondary: #727272;  /* labels, captions (Figma said #929292; darkened for AA) */
  --ob-text-muted: #6A6A6A;      /* third body colour */
  --ob-text-heading: #2F1D4F;    /* deep-purple display headline (empty states / hero) */
  --ob-text-subtle: #6B637F;     /* purple-tinged grey under such a headline */

  /* ── Lines & fields ───────────────────────────────────────────────────── */
  --ob-hairline: #F2F4F7;        /* dividers */
  --ob-field-fill: #F9FAFB;
  --ob-field-border: #EAECF0;
  --ob-track: #E5E7EB;           /* progress track */
  --ob-icon-inactive: #B7B7B7;

  /* ── Meaning colours (use ONLY for their meaning) ─────────────────────── */
  --ob-amber: #EF9700;           /* a limit exceeded. Nothing else. */
  --ob-amber-tint: #FFF2DB;
  --ob-green: #2BB673;           /* verdict: on track */
  --ob-green-success: #2EA62E;   /* moment: success disc */
  --ob-red: #D92D20;             /* destructive */
  --ob-red-tint: #FFEBEA;
  --ob-coral: #F07A7A;           /* spend bar under limit */
  --ob-unallocated: #EC4D4D;     /* "running low" arc, used at 16% */

  /* ── Category palette (illustrative accents; same in both themes) ─────── */
  --ob-cat-general: #7340FE;   --ob-cat-general-tint: #F3EDFE;
  --ob-cat-transport: #4D8BF5; --ob-cat-transport-tint: #D0E2FF;
  --ob-cat-charity: #EF5D6B;   --ob-cat-charity-tint: #FAE5E7;
  --ob-cat-education: #F0921F; --ob-cat-education-tint: rgb(253 172 98 / 0.20);
  --ob-cat-pink: #F2569B;  --ob-cat-peach: #F7C08A;  --ob-cat-blue: #82ADF2;
  --ob-cat-cyan: #9FE3F0;  --ob-cat-lilac: #9D8BF0;  --ob-cat-orange: #F0A37C;
  --ob-cat-red: #E98484;   --ob-cat-rose: #EFA3C8;
  /* chip tint for any category colour = that colour at 16% alpha; soft tile = 8% */

  /* ── Explainer backdrops ("dark pages": where the app explains itself) ── */
  --ob-stage-purple: #2A1065;    /* brand / closing */
  --ob-stage-blue:   #0F2A63;
  --ob-stage-amber:  #5C3403;    /* use for a warning-themed section only */
  --ob-stage-green:  #07422C;
  --ob-stage-teal:   #06373F;
  --ob-stage-purple-deep: #1C0A45;
  --ob-stage-purple-light: #3A1A8A;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --ob-font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ob-weight-light: 300;
  --ob-weight-regular: 400;
  --ob-weight-medium: 500;
  --ob-weight-semibold: 600;
  --ob-weight-bold: 700;
  --ob-weight-extrabold: 800;

  /* App scale (size / line-height). Web display sizes extend it upward. */
  --ob-text-11: 11px;  --ob-lh-11: 16px;   /* nav label */
  --ob-text-12: 12px;  --ob-lh-12: 16px;   /* caption, time */
  --ob-text-13: 13px;  --ob-lh-13: 18px;   /* pill text, row title */
  --ob-text-14: 14px;  --ob-lh-14: 20px;   /* body, labels */
  --ob-text-15: 15px;  --ob-lh-15: 20px;   /* section label */
  --ob-text-16: 16px;  --ob-lh-16: 24px;   /* body large, buttons */
  --ob-text-18: 18px;  --ob-lh-18: 24px;   /* dialog title */
  --ob-text-20: 20px;  --ob-lh-20: 28px;   /* title, key amounts */
  --ob-text-26: 26px;  --ob-lh-26: 32px;   /* headline */
  --ob-text-36: 36px;  --ob-lh-36: 44px;   /* web: section heading (extension) */
  --ob-text-48: 48px;  --ob-lh-48: 56px;   /* web: hero (extension) */
  --ob-text-64: 64px;  --ob-lh-64: 70px;   /* web: big hero (extension) */
  --ob-tracking-display: -0.02em;          /* web only, for 36px+ */

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --ob-radius-sm: 8px;
  --ob-radius-field: 12px;
  --ob-radius-chip: 16px;       /* 48px category icon tile */
  --ob-radius-card: 18px;       /* THE card radius */
  --ob-radius-dialog: 24px;
  --ob-radius-pill: 32px;       /* every button */
  --ob-radius-full: 9999px;

  /* ── Spacing (4px grid; the app's recurring values) ───────────────────── */
  --ob-space-1: 4px;  --ob-space-2: 8px;  --ob-space-3: 12px; --ob-space-4: 16px;
  --ob-space-5: 20px; --ob-space-6: 24px; --ob-space-8: 32px; --ob-space-10: 40px;
  --ob-space-12: 48px; --ob-space-16: 64px; --ob-space-24: 96px; --ob-space-32: 128px;
  --ob-gutter-mobile: 20px;     /* app page side padding */
  --ob-card-padding: 20px;
  --ob-card-gap: 12px;

  /* ── Elevation (soft UI — never Material shadows) ─────────────────────── */
  --ob-shadow-card: 0 6px 24px rgb(0 0 0 / 0.05);
  --ob-shadow-dialog: 0 6px 30px rgb(0 0 0 / 0.08);
  --ob-shadow-cta: 0 4px 16px rgb(0 30 43 / 0.20), inset 0 4px 4px #8D63FE;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ob-ease: cubic-bezier(0.2, 0, 0, 1);
  --ob-dur-fast: 150ms;
  --ob-dur: 250ms;
  --ob-dur-crossfade: 420ms;    /* backdrop crossfade between explainer slides */
}

/* ── Dark ─────────────────────────────────────────────────────────────────
   Depth flips from shadow to lightness: bg < surface < surface-raised.
   Amber, green, coral stay the same hex. Purple (as text) lifts; red lifts. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ob-purple: #9E7BFF;
    --ob-purple-5:  rgb(158 123 255 / 0.05);
    --ob-purple-8:  rgb(158 123 255 / 0.08);
    --ob-purple-16: rgb(158 123 255 / 0.16);
    --ob-purple-24: rgb(158 123 255 / 0.24);
    --ob-purple-55: rgb(158 123 255 / 0.55);
    --ob-bg: #0E1013;
    --ob-surface: #1C1F24;
    --ob-surface-raised: #262A32;
    --ob-text: #F1F2F4;
    --ob-text-secondary: #9AA0A9;
    --ob-text-muted: #C4C8CF;
    --ob-text-heading: #DED5FF;
    --ob-text-subtle: #A8A0BE;
    --ob-hairline: #2A2E35;
    --ob-field-fill: #22262D;
    --ob-field-border: #333841;
    --ob-track: #2E333B;
    --ob-icon-inactive: #6E747C;
    --ob-amber-tint: #3D2E12;
    --ob-red: #FE3428;
    --ob-red-tint: #3B1E1C;
    --ob-cat-general-tint: #2A2140;
    --ob-cat-transport-tint: #1B2A45;
    --ob-cat-charity-tint: #3A2226;
    --ob-shadow-card: none;
    --ob-shadow-dialog: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ob-purple: #9E7BFF;
  --ob-purple-5:  rgb(158 123 255 / 0.05);
  --ob-purple-8:  rgb(158 123 255 / 0.08);
  --ob-purple-16: rgb(158 123 255 / 0.16);
  --ob-purple-24: rgb(158 123 255 / 0.24);
  --ob-purple-55: rgb(158 123 255 / 0.55);
  --ob-bg: #0E1013;
  --ob-surface: #1C1F24;
  --ob-surface-raised: #262A32;
  --ob-text: #F1F2F4;
  --ob-text-secondary: #9AA0A9;
  --ob-text-muted: #C4C8CF;
  --ob-text-heading: #DED5FF;
  --ob-text-subtle: #A8A0BE;
  --ob-hairline: #2A2E35;
  --ob-field-fill: #22262D;
  --ob-field-border: #333841;
  --ob-track: #2E333B;
  --ob-icon-inactive: #6E747C;
  --ob-amber-tint: #3D2E12;
  --ob-red: #FE3428;
  --ob-red-tint: #3B1E1C;
  --ob-cat-general-tint: #2A2140;
  --ob-cat-transport-tint: #1B2A45;
  --ob-cat-charity-tint: #3A2226;
  --ob-shadow-card: none;
  --ob-shadow-dialog: none;
}

/* ==========================================================================
   Reference components — the app's own, translated
   ========================================================================== */

body {
  margin: 0;
  background: var(--ob-bg);
  color: var(--ob-text);
  font-family: var(--ob-font);
  font-size: var(--ob-text-16);
  line-height: var(--ob-lh-16);
  -webkit-font-smoothing: antialiased;
}

/* Card: white, r18, p20, NO border, soft shadow only */
.ob-card {
  background: var(--ob-surface);
  border-radius: var(--ob-radius-card);
  padding: var(--ob-card-padding);
  box-shadow: var(--ob-shadow-card);
}

/* Primary CTA: purple fill, bold white 16px, pill, drop shadow + inner top highlight */
.ob-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  border: 0; border-radius: var(--ob-radius-pill);
  background: var(--ob-purple-fill); color: var(--ob-on-purple);
  font: var(--ob-weight-bold) var(--ob-text-16)/var(--ob-lh-16) var(--ob-font);
  box-shadow: var(--ob-shadow-cta);
  cursor: pointer; transition: background var(--ob-dur-fast) var(--ob-ease);
}
.ob-btn-primary:hover, .ob-btn-primary:active { background: var(--ob-purple-pressed); }
.ob-btn-primary:disabled { background: rgb(115 64 254 / 0.5); box-shadow: none; }

/* Tinted: de-emphasised but still clearly a button, on any surface */
.ob-btn-tinted {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 28px;
  border: 1px solid var(--ob-purple-24); border-radius: var(--ob-radius-pill);
  background: var(--ob-purple-8); color: var(--ob-purple);
  font: var(--ob-weight-bold) var(--ob-text-16)/var(--ob-lh-16) var(--ob-font);
  cursor: pointer;
}

/* On a dark/saturated stage the CTA inverts: white fill, label in the backdrop colour */
.ob-btn-on-stage {
  padding: 16px 28px; border: 0; border-radius: var(--ob-radius-pill);
  background: #FFFFFF; color: var(--ob-stage-purple);
  font: var(--ob-weight-bold) var(--ob-text-16)/var(--ob-lh-16) var(--ob-font);
}

/* Small "+ Add"-style pill */
.ob-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 20px;
  background: var(--ob-purple-8); color: var(--ob-purple);
  font: var(--ob-weight-bold) var(--ob-text-14)/var(--ob-lh-14) var(--ob-font);
}

/* Mode chips (never a full-width tab bar) */
.ob-chip {
  padding: 9px 14px; border-radius: 36px; border: 1px solid transparent;
  background: none; color: var(--ob-text);
  font: var(--ob-weight-light) var(--ob-text-14)/var(--ob-lh-14) var(--ob-font);
}
.ob-chip[aria-selected="true"] {
  background: var(--ob-purple-8); border-color: var(--ob-purple);
  color: var(--ob-purple); font-weight: var(--ob-weight-bold);
}

/* Text field */
.ob-field {
  width: 100%; box-sizing: border-box; padding: 14px 16px;
  background: var(--ob-field-fill); border: 1px solid var(--ob-field-border);
  border-radius: var(--ob-radius-field); color: var(--ob-text);
  font: var(--ob-weight-semibold) var(--ob-text-16)/var(--ob-lh-16) var(--ob-font);
}
.ob-field:focus { outline: none; border-color: var(--ob-purple); }
.ob-label { display: block; margin-bottom: 10px; font: var(--ob-weight-semibold) var(--ob-text-16)/var(--ob-lh-16) var(--ob-font); }

/* Category icon tile: 48px, r16, 24px glyph, colour at 16% behind the colour */
.ob-cat-icon {
  width: 48px; height: 48px; border-radius: var(--ob-radius-chip);
  display: grid; place-items: center;
}
.ob-cat-icon > svg { width: 24px; height: 24px; }

/* Status pill (under the ring): label 14 bold + pill 13 bold on accent @5% */
.ob-stat { display: inline-flex; align-items: center; gap: 8px; font: var(--ob-weight-bold) var(--ob-text-14)/1 var(--ob-font); }
.ob-stat > span { padding: 4px 12px; border-radius: 33px; font-size: 13px; background: var(--ob-purple-5); color: var(--ob-purple); }

.ob-section-label { font: var(--ob-weight-semibold) var(--ob-text-15)/var(--ob-lh-15) var(--ob-font); color: var(--ob-text-secondary); }
.ob-divider { height: 1px; background: var(--ob-hairline); border: 0; }