/* SpendMoth brand tokens — single source for marketing, web app, and mobile parity */

:root {
  /* Marketing / light app surfaces */
  --brand-bg-dark: #0a1219;
  --brand-surface-dark: #141c26;
  --brand-canvas: #e8eef5;
  --brand-surface: #ffffff;
  --brand-surface-subtle: #f4f7fb;
  --brand-canvas-2: #dce5f0;
  --brand-canvas-3: #d0daea;

  /* Typography colors */
  --brand-ink: #1c2b3a;
  --brand-ink-secondary: #445566;
  --brand-ink-muted: #7a90a8;
  --brand-text-on-dark: #f4f6f8;
  --brand-muted-on-dark: rgba(244, 246, 248, 0.72);

  /* Accent — teal (marketing hero + CTAs) */
  --brand-accent: #1a9b72;
  --brand-accent-dim: #116b4f;
  --brand-accent-bright: #2dd4a8;
  --brand-accent-deep: #04342c;
  --brand-accent-soft: rgba(26, 155, 114, 0.14);
  --brand-accent-soft-strong: rgba(26, 155, 114, 0.22);

  /* Semantic */
  --brand-amber: #c97a18;
  --brand-amber-soft: rgba(201, 122, 24, 0.12);
  --brand-rose: #c0435a;
  --brand-rose-soft: rgba(192, 67, 90, 0.08);
  --brand-emerald: #23b574;

  /* Borders & shadows */
  --brand-border: rgba(26, 26, 46, 0.08);
  --brand-border-strong: rgba(26, 26, 46, 0.14);
  --brand-shadow-1: 0 1px 2px rgba(26, 26, 46, 0.04);
  --brand-shadow-2: 0 4px 12px rgba(26, 26, 46, 0.08);

  /* Typography */
  --brand-font-sans: "Outfit", system-ui, -apple-system, sans-serif;
  --brand-font-display: "DM Serif Display", Georgia, serif;
  --brand-font-mono: "DM Mono", ui-monospace, monospace;

  /* Aliases used by landing.css */
  --color-bg: var(--brand-bg-dark);
  --color-surface: var(--brand-surface-dark);
  --color-surface-alt: var(--brand-canvas);
  --color-text: var(--brand-text-on-dark);
  --color-muted: var(--brand-muted-on-dark);
  --color-ink: var(--brand-ink);
  --color-ink-muted: var(--brand-ink-muted);
  --color-accent: var(--brand-accent);
  --color-accent-dim: var(--brand-accent-dim);
  --color-accent-bright: var(--brand-accent-bright);
  --font-sans: var(--brand-font-sans);
  --font-display: var(--brand-font-display);
}