/* Brand tokens, following the public Audi CI guidelines (styleguide.audi.com → Basics):
   - brand colours white, black and Progressive Red, always full tone (never tinted or transparent);
     the functional greys for digital; signal colours only for status text and icons,
   - mixed case, flush left, black or white text; Audi Type Extended for headlines, Wide for UI,
     Audi Type for body – with Verdana as the guide's own fallback,
   - straight, rectangular divisions bled to the edge, fine lines between elements, no boxes,
     frames, rounded corners, diagonals or decorative shadows.
   No Audi font, logo or claim ships with this code: see docs/branding.md. */
:root {
  --white: #FFFFFF;
  --black: #000000;
  --red: #F50537;            /* Progressive Red: full-tone spaces and marks, never text */

  --g10: #1A1A1A; --g20: #333333; --g30: #4C4C4C; --g40: #666666; --g50: #808080; --g60: #999999;
  --g70: #B3B3B3; --g80: #CCCCCC; --g85: #D9D9D9; --g90: #E5E5E5; --g95: #F2F2F2;

  /* signal colours: status text and icons only (light theme / dark theme) */
  --ok: #0DA20D;    --ok-d: #15DA15;
  --warn: #FFAA00;
  --err: #EB0D3F;   --err-d: #FD2C4E;

  /* Audi Type is used when it is installed on the device (or self-hosted, see css/fonts.css);
     everyone else gets Verdana, the fallback the guide names. */
  --display: 'Audi Type Extended', 'AudiTypeExtended', Verdana, 'DejaVu Sans', sans-serif;
  --wide: 'Audi Type Wide', 'AudiTypeWide', Verdana, 'DejaVu Sans', sans-serif;
  --font: 'Audi Type', 'AudiType', Verdana, 'DejaVu Sans', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* the guide's motion curve; movement only horizontal or vertical */
  --ease: cubic-bezier(.75, .02, .5, 1);

  /* width ÷ height of public/img/logo.svg */
  --logo-ratio: 2.6;

  /* kept for the moderation drawer and the remote */
  --ink: var(--black);
  --ink-soft: var(--g30);
  --muted: var(--g40);
  --line: var(--g85);
  --line-2: var(--g90);
  --paper: var(--white);
  --panel: var(--white);
  --stone: var(--g95);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }
code { font-family: var(--mono); font-size: .92em; background: var(--g95); padding: .05em .3em; }
button { font: inherit; }

/* the logo slot: any single-colour SVG at public/img/logo.svg, drawn in the current text colour,
   so the same file works black on light and white on dark */
.brand-mark { display: inline-block; flex: none; height: 1em; aspect-ratio: var(--logo-ratio); background: currentColor;
  -webkit-mask: url('/img/logo.svg') center / contain no-repeat; mask: url('/img/logo.svg') center / contain no-repeat; }