/* AiB Platform — design tokens. The single source of truth for color, type,
   spacing, radii, elevation, stacking and motion across every surface
   (portal, public, auth). The only sheet allowed to spell a literal colour.
   Palette mirrors aib-site/tokens.css. Sodium discipline carried over from
   the site: monochrome UI, with sodium appearing ONLY as the wordmark's
   tittle and LIVE/running indicators — never as a general accent.

   Breakpoint ladder (custom properties can't reach media queries, so the
   ladder lives here as law and in each sheet as literals — no other widths):
     1180  wide boards keep four live columns
     1020  sidebar folds to the icon rail; two-column layouts fold
      860  mid folds (modal grid, settings, free-tools summary)
      719  phone: off-canvas drawer, single column (aib-site's phone line)
      560  smallest folds (invoice parties)
   Rail tier is scoped 720–1020 so tiers never overlap or fight. */

/* Contrast (WCAG 2.1 AA, 4.5:1 for text) is measured, not guessed: every
   colour that sets text passes on white, paper AND canvas — and a semantic
   colour on its own -face too. Where the site's value fell short, the token
   took the smallest darkening step (HLS lightness, hue and saturation kept)
   that passes all of them; the measured floor is noted beside it. */
:root {
  --ink: #0D0E13;
  /* site #75777C read 4.48 / 4.29 / 4.07 — under AA on every ground.
     #6E7075: 4.96 white · 4.74 paper · 4.50 canvas. The lightest text grey
     the house has; nothing that must be read sits lighter than this. */
  --grey: #6E7075;
  --grey-label: #3F4148;
  --grey-on-face: #6A6C71; /* --grey on a tinted -face (the sea map's labels): the smallest step to AA there, 4.54:1 on --info-face */
  --photo-light: #DADCD8;
  --photo-dark: #C7C9C4;
  --skeleton-highlight: #ECECEA;
  /* the site's dim grey: 2.74 white · 2.63 paper · 2.49 canvas — below AA
     even for large text, and no lighter text grey can pass on canvas (the
     floor is --grey). So it never sets text on a light ground: decoration
     only (rules, ticks, a queued dot, chevrons, glyphs beside words that say
     the same) and text on ink (7.03:1 there, as aib-site's footer uses it). */
  --grey-dark: #9A9CA3;
  --white: #FFFFFF;
  --paper: #FAFAF9;
  --canvas: #F4F4F2;
  --sodium: #FFA43B;

  /* semantic statuses — muted, editorial; tinted face + dark text.
     --ok was #2E7D5B (4.37 on its face), --warn #A96B1F (3.83 on its face,
     3.96 on canvas): each darkened to its first passing step.
     --ok #2D7A59: 4.54 on face · 4.72 canvas. --warn #99611C: 4.51 on face
     · 4.67 canvas. --info and --danger pass as the site has them. */
  --ok: #2D7A59;
  --ok-face: #E8F2ED;
  --warn: #99611C;
  --warn-face: #F7EFE2;
  --info: #3D639F;
  --info-face: #E9EFF7;
  --danger: #AC4238;
  --danger-face: #F7EAE8;

  --hairline: rgba(13, 14, 19, 0.10);
  --hairline-strong: rgba(13, 14, 19, 0.18);
  --hairline-dark: rgba(255, 255, 255, 0.14);
  /* the faint ink wash a quiet control takes on hover (.tool-btn) */
  --ink-wash: rgba(13, 14, 19, 0.05);
  /* the dimmed room behind a modal or the phone drawer */
  --scrim: rgba(13, 14, 19, 0.44);
  /* paper output only: a printed sheet goes true black on white */
  --print-ink: #000000;
  /* the colour the pulse keyframes (base.css mark-pulse) glow with — the
     aib-site --dot convention. Only lit dots animate, and the only lit
     colour is sodium, so the default is the whole story. */
  --dot: var(--sodium);

  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 60px;
  --pad: clamp(20px, 2.6vw, 36px);

  /* type scale — the sizes the portal already speaks, named. Off-scale
     literals in older sheets are hand-tuned exceptions, not new steps. */
  --fs-2xs: 10.5px;  /* mono labels, badges, field captions */
  --fs-xs: 11.5px;   /* the mono voice (.mono), buttons */
  --fs-sm: 12.5px;   /* help text, captions, code */
  --fs-md: 13.5px;   /* dense UI copy: rows, facts, feed, table cells */
  --fs-base: 14.5px; /* body */
  --fs-lg: 17px;     /* card titles, empty-state titles */
  --fs-xl: 21px;     /* the wordmark, panel headings */
  --fs-2xl: 26px;    /* stage titles (drop zone, panel name) */
  --fs-3xl: 34px;    /* KPI figures */

  /* spacing scale — 4px steps up to 24, then the section rhythm */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-pill: 999px;

  /* elevation — ink-tinted, never grey-black */
  --shadow-card: 0 1px 2px rgba(13, 14, 19, 0.04);
  --shadow-pop: 0 12px 32px rgba(13, 14, 19, 0.12);    /* menus, toasts */
  --shadow-sheet: 0 12px 40px rgba(13, 14, 19, 0.14);  /* bottom sheets, floating buttons */
  --shadow-paper: 0 10px 40px rgba(13, 14, 19, 0.08);  /* a document sheet on the canvas */
  --shadow-modal: 0 24px 64px rgba(13, 14, 19, 0.28);

  /* stacking ladder — content, then sticky chrome, then what floats over
     it; nothing may cover a toast. Every z-index names a rung. */
  --z-base: 1;       /* lifted inside its own stacking context */
  --z-sticky: 40;    /* sticky topbar, sticky rails */
  --z-band: 50;      /* the public header band */
  --z-pop: 60;       /* dropdown menus, the cookie pill */
  --z-sheet: 61;     /* bottom sheets (above the cookie pill) */
  --z-scrim: 75;
  --z-drawer: 80;    /* the phone navigation drawer */
  --z-overlay: 90;   /* modals */
  --z-toast: 100;

  --font-display: "Sofia Sans", "Segoe UI", sans-serif;
  --font-body: "Inter Tight", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* motion — aib-site's two eases; three transition speeds plus the loop
     periods of the waiting indicators. Every duration names one. */
  --ease-out: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-out-quick: cubic-bezier(0.22, 0.6, 0.2, 1);
  --dur-fast: 0.2s;   /* hover colour, border and background shifts */
  --dur-move: 0.25s;  /* small moves: a chevron's turn, a card's lift */
  --dur-base: 0.3s;   /* opacity and press */
  --dur-slow: 0.4s;   /* travelling arrows, larger moves */
  --dur-sheet: 0.26s; /* the bottom sheet's slide (and its visibility delay) */
  --dur-spin: 0.8s;   /* one spinner turn */
  --dur-loop: 1.6s;   /* skeleton shimmer, indeterminate bar */
  --dur-pulse: 3.2s;  /* the lit dot's heartbeat (aib-site --anim-dot-pulse) */
}

/* phones: the gutter narrows so 360px screens keep a working text column */
@media (max-width: 719px) {
  :root { --pad: 16px; }
}