/* SAS Hub design tokens. Every colour, radius, shadow, space and type size lives here.
   Change a value once and it changes across the Hub.

   Mood: a private members' club that happens to be a property firm. Quiet, confident,
   generous with space. One accent (brass), used only for wins. Signal colours
   (positive, caution, risk) are reserved for verdicts and compliance. */

:root {
  /* Colour */
  --ink: #0E1624;            /* primary: sidebar, headings, primary buttons */
  --ink-soft: #283244;       /* body copy on paper */
  --ink-muted: #667085;      /* secondary text (4.9:1 on paper, passes AA) */
  --paper: #F7F5F0;          /* page background */
  --paper-deep: #EFECE4;     /* wells, hover on paper */
  --surface: #FFFFFF;        /* cards */
  --line: #E7E3DA;           /* hairlines only */
  --line-strong: #CFC9BC;    /* inputs, dividers that must be seen */
  --brass: #8F6F3E;          /* accent on text (4.6:1 on white) */
  --brass-bright: #B08D57;   /* accent on fills, rules and the dark sidebar */
  --brass-tint: #F6F0E4;
  --positive: #2F6F4F;
  --caution: #96620F;
  --risk: #A23B3B;
  --positive-tint: #EDF4EF;
  --caution-tint: #FAF3E4;
  --risk-tint: #F8ECEC;
  --logo-blue: #4870B8;      /* the house in the SAS mark. Used in the logo only. */

  /* Type */
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --display-sm: 26px;
  --display-md: 34px;
  --display-lg: 44px;
  --display-xl: 60px;
  --track-display: -0.022em;
  --track-eyebrow: 0.14em;

  /* Shape and depth */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 rgba(14, 22, 36, .02), 0 12px 32px -22px rgba(14, 22, 36, .22);
  --shadow-lift: 0 2px 0 rgba(14, 22, 36, .02), 0 22px 44px -24px rgba(14, 22, 36, .32);
  --shadow-sheet: 0 -8px 40px rgba(14, 22, 36, .2);

  /* Space (4px scale) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Layout */
  --rail-w: 284px;
  --main-max: 880px;
  --aside-w: 320px;
  --tabbar-h: 66px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 160ms;
  --slow: 240ms;

  /* Names the older stylesheet still uses, pointed at the new values */
  --rule: var(--line);
  --rule-strong: var(--line-strong);
  --brand: var(--ink);
  --brand-deep: var(--ink);
  --brand-tint: var(--paper);
  --good: var(--positive);
  --good-tint: var(--positive-tint);
  --masthead: var(--ink);
  --masthead-2: var(--ink);
  --mono: var(--sans);
  --shadow-panel: var(--shadow-card);
}