/* ============================================================================
   RoaMarket THEME — single source of truth for all visual tokens.
   Swap the whole look by editing ONLY this file (or replacing it at deploy).
   Nothing else in the app hardcodes a color, font, radius, or shadow.
   To try another theme: change the values under :root and reload. Done.
   ============================================================================ */

:root {
  /* ---- Brand palette (default: RoaCredit teal). Change these to reskin. ---- */
  --color-bg: #0b1418;
  --color-surface: #10222a;
  --color-surface-2: #163039;
  --color-border: #234450;
  --color-primary: #0d5c63;
  --color-primary-hover: #12747d;
  --color-primary-contrast: #ffffff;
  --color-accent: #f4b740;
  --color-accent-contrast: #1a1200;
  --color-text: #eaf3f4;
  --color-text-muted: #9db4bb;
  --color-text-faint: #5f7982;
  --color-success: #3fb984;
  --color-danger: #e06666;
  --color-locked: #46606a;

  /* ---- Progress bar ---- */
  --progress-track: #1c3843;
  --progress-fill-from: #0d5c63;
  --progress-fill-to: #3fb984;

  /* ---- Typography ---- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- Radius / elevation ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.55);

  /* ---- Layout ---- */
  --maxw: 1080px;
  --tabbar-h: 62px;
  --transition: 180ms cubic-bezier(0.2, 0, 0, 1);
}

/* ---- Base reset ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }