/* AssetIQ mobile design tokens — source of truth for every screen.
   Brand: asset-iq-starter-brand-guide.pdf + final landing page (12 Aug 2026). */
:root {
  /* Brand palette (exact, from brand guide) */
  --purple: #321544;        /* Asset Purple — primary actions, headings, active nav */
  --plum: #24102F;          /* Deep Plum — darkest text, pressed states */
  --aqua: #64D6D3;          /* Signal Aqua — accents, active state marks (never small text) */
  --mint: #E3FAF4;          /* Clinical Mint — soft supportive fills */
  --white: #FFFFFF;

  /* Derived brand tints */
  --purple-soft: #EFEAF4;   /* icon tiles, chips */
  --purple-100: #E3DAEC;
  --purple-text: #5B3E85;   /* in-progress / brand-accent text on white (AA) */
  --aqua-deep: #0E7674;     /* accessible aqua for text/icons */
  --aqua-soft: #DFF6F5;
  --mint-deep: #12805C;

  /* Canvas + surfaces */
  --canvas: #F7F5FA;
  --surface: #FFFFFF;
  --border: #E8E4EF;
  --border-strong: #D8D2E2;

  /* Text */
  --ink: #24102F;
  --ink-2: #4C3F5C;
  --muted: #6E6480;
  --faint: #8D849C;

  /* Status — always paired with text or an icon, never color alone */
  --red: #C62828;      --red-deep: #A31F1F;   --red-soft: #FCEBEA;  --red-border: #F3C8C5;
  --orange: #B45309;   --orange-bright: #E8710A; --orange-soft: #FDF0E2; --orange-border: #F2D5AE;
  --green: #157A46;    --green-soft: #E4F5EC; --green-border: #BFE5D0;
  --teal: #0E7674;     --teal-soft: #DFF6F5;  --teal-border: #AEE4E2;
  --violet: #5B3E85;   --violet-soft: #EFEAF7; --violet-border: #D8CCEA;
  --gray-soft: #F0EEF4;

  /* Typography */
  --font: "Barlow", "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;
  --fs-xxl: 1.5rem;    /* 24 — page titles */
  --fs-xl: 1.25rem;    /* 20 — section titles / hero names */
  --fs-lg: 1.0625rem;  /* 17 — card titles */
  --fs-md: 0.9375rem;  /* 15 — body */
  --fs-sm: 0.8125rem;  /* 13 — secondary */
  --fs-xs: 0.75rem;    /* 12 — captions, badges */

  /* Shape */
  --r-lg: 20px;   /* hero cards, sheets */
  --r-md: 16px;   /* cards */
  --r-sm: 12px;   /* inputs, buttons */
  --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(36, 16, 47, 0.05);
  --shadow-2: 0 4px 14px rgba(36, 16, 47, 0.08);
  --shadow-nav: 0 -4px 18px rgba(36, 16, 47, 0.09);

  /* Spacing rhythm */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* Layout */
  --page-x: 16px;
  --max-w: 480px;
  --nav-h: 72px;
  --touch: 44px;
}