/* UI system v1, section 3: every size, space, radius, width, colour, shadow and
   motion value the new components use. Loaded after app.css, only while
   ui_system_v1 or account_v2 is on (app/account2.php, ui2_head()).

   Two deliberate differences from the brief, both to keep older pages intact:
   - --paper stays #FFFFFF (app.css uses it as "white" in hundreds of rules);
     the page background is --paper-2, which is the brief's #FAFBFC.
   - The brief's --card is the existing --card (#FFFFFF). */
:root{
  /* ---- fonts (Outfit 400; Instrument Sans 400 and 600) ---- */
  --font-display:"Outfit","Instrument Sans",system-ui,sans-serif;
  --font-text:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* ---- type: size / line height / tracking (desktop; phones below) ---- */
  --t-display-size:72px; --t-display-lh:1.02; --t-display-ls:-.04em;
  --t-h1-size:44px;      --t-h1-lh:1.08;      --t-h1-ls:-.035em;
  --t-h2-size:30px;      --t-h2-lh:1.15;      --t-h2-ls:-.03em;
  --t-h3-size:22px;      --t-h3-lh:1.2;       --t-h3-ls:-.02em;
  --t-money-xl-size:48px;--t-money-xl-lh:1;   --t-money-xl-ls:-.03em;
  --t-money-size:28px;   --t-money-lh:1.1;    --t-money-ls:-.02em;
  --t-lead-size:18px;    --t-lead-lh:1.5;
  --t-body-size:16px;    --t-body-lh:1.55;
  --t-small-size:14px;   --t-small-lh:1.45;
  --t-caption-size:13px; --t-caption-lh:1.4;
  --t-eyebrow-size:12px; --t-eyebrow-lh:1.2;  --t-eyebrow-ls:.08em;

  /* ---- spacing, 4 px base ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --gutter-page:var(--s-5);

  /* ---- radius ---- */
  --r-pill:999px; --r-field:24px; --r-card:24px; --r-inner:14px; --r-xs:6px;

  /* ---- containers ---- */
  --w-wide:1200px; --w-text:760px; --w-narrow:480px;

  /* ---- colour (existing values; no new colours) ---- */
  --page:#FAFBFC;
  --card:#FFFFFF;
  --paper-3:#F4F6F8;
  --line:#E8ECEF; --line-2:#D6DDE2;
  --ink:#0E1417; --ink-2:#3B4750; --sub:#5C6B75;
  --teal-soft:#E1F5F1; --teal-ink:#00705F;
  --amber-soft:#FFF4E1; --amber-ink:#8A5800;
  --coral:#FF4F2B; --coral-ink:#C4341C;

  /* ---- elevation: one shadow, for things that float ---- */
  --shadow-float:0 10px 30px rgba(14,20,23,.10),0 2px 6px rgba(14,20,23,.06);
  --ring:0 0 0 3px rgba(14,20,23,.25);

  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1); --d-fast:150ms; --d-in:200ms;
}
@media (max-width:760px){
  :root{
    --t-display-size:44px; --t-h1-size:32px; --t-h2-size:24px; --t-h3-size:20px;
    --t-money-xl-size:40px; --t-money-size:24px; --t-lead-size:17px;
    --gutter-page:var(--s-4);
  }
}