/* HitchPayRide - design tokens (brand-matched to hitchpay.ng)
   Theme-aware: dark is the default; light applies via [data-theme="light"]. */

:root,
:root[data-theme="dark"] {
  /* ground + text */
  --bg: #140a24;
  --bg-2: #1a0f2e;
  --card: #1d1236;
  --card-2: #241640;
  --ink: #f4eeff;
  --mut: #a99dc4;
  --line: #2c2044;

  /* brand - purple */
  --brand: #8a5cf0;       /* fills (buttons, logo, ride accent) */
  --brand-on: #ffffff;    /* text on brand fills */
  --brand-ink: #c3a6ff;   /* brand accent as text/icons on ground */
  --lilac: #241634;       /* tinted surface */

  /* accents */
  --gold: #ffc22f;
  --gold-d: #ffce5a;      /* gold-as-text (contrast safe) */
  --green: #48d38a;
  --green-ink: #5fe0a0;

  /* effects */
  --shadow: 0 30px 70px -40px rgba(0, 0, 0, .7);
  --shadow-brand: 0 18px 40px -18px rgba(138, 92, 240, .55);
  --ring: rgba(138, 92, 240, .45);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-2: #faf7ff;
  --card: #ffffff;
  --card-2: #f8f5fe;
  --ink: #1e1e1e;
  --mut: #6f6a7d;
  --line: #ece7f3;

  --brand: #40196d;
  --brand-on: #ffffff;
  --brand-ink: #40196d;
  --lilac: #f8f1ff;

  --gold: #ffc22f;
  --gold-d: #a9750a;
  --green: #189352;
  --green-ink: #189352;

  --shadow: 0 30px 60px -40px rgba(64, 25, 109, .35);
  --shadow-brand: 0 18px 40px -18px rgba(64, 25, 109, .45);
  --ring: rgba(64, 25, 109, .4);
  color-scheme: light;
}

/* scale + type */
:root {
  --maxw: 1160px;
  --gap: 22px;
  --radius: 18px;
  --radius-lg: 24px;
  --font-body: "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Clash Display", var(--font-body);
}