/* Base layer: neutral roles, scales and layers. Contains no brand colour and no font name.
   Every colour and font comes from --brand-* (brand-eviden.css). Light and dark are decided there. */
:root {
  color-scheme: var(--brand-scheme);
  font-family: var(--brand-font-sans);
  font-size: 16px;
  line-height: var(--lh-body);

  /* roles */
  --ground: var(--brand-ground);          /* page */
  --surface: var(--brand-surface);        /* panels, dialogs, menus */
  --soft: var(--brand-soft);              /* hover, pressed fill, code */
  --ink: var(--brand-ink);                /* all text */
  --ink-2: color-mix(in srgb, var(--ink) var(--brand-ink-2-mix), transparent); /* secondary text */
  --line: var(--brand-line);              /* control borders, frames (3:1) */
  --hair: color-mix(in srgb, var(--line) 40%, transparent); /* dividers inside a component */
  --accent: var(--brand-accent);          /* decoration only: rule, mark, live dot, match underline */
  --indicator: var(--brand-indicator);    /* selected, pressed, active, bars (3:1) */
  --action-bg: var(--brand-action-bg);
  --action-fg: var(--brand-action-fg);
  --action-hover: var(--brand-action-hover);
  --error: var(--brand-error);            /* borders and markers, never text */
  --error-fill: var(--brand-error-fill);
  --focus: var(--ink);
  --shadow: var(--brand-shadow);
  --scrim: #00000080;
  --font-mono: var(--brand-font-mono);

  /* type scale */
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-snug: 1.45;
  --lh-body: 1.6;

  /* spacing scale, 4 px steps; 7 and 8 are page edges */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* shape, control heights, measures */
  --radius: 8px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --control-xs: 28px;
  --control-sm: 32px;
  --control-md: 36px;
  --control-lg: 44px;
  --measure-narrow: 48ch;
  --page-max: 72rem;

  /* layers */
  --z-popover: 20;
  --z-dialog: 30;
  --z-toast: 40;

}