/*
 * The admin tool's semantic tokens, mapped onto the brand in brand/tokens.css.
 * app.css only uses the names below. To change the look, change brand/ (and
 * this mapping), never app.css.
 *
 * Rules from the QuestieLabs brand: spacing and radii from the golden-ratio
 * scales only; corner radius = padding / phi (26 -> 16, 16 -> 10, 10 -> 6);
 * controls 44 px high; brass only for lines and the focus ring, never text.
 * Dark mode: [data-theme="dark"] on <html>, set from the system setting in app.js.
 */

:root {
  --color-bg: var(--ql-linen);
  --color-surface: var(--ql-surface);
  --color-surface-sunken: var(--ql-stone);
  --color-border: var(--ql-line);
  --color-border-strong: var(--ql-line-strong);
  --color-text: var(--ql-ink);
  --color-text-muted: var(--ql-muted);
  --color-text-inverse: var(--ql-surface);
  --color-accent: var(--ql-primary);
  --color-accent-hover: var(--ql-primary-hover);
  --color-accent-subtle: var(--ql-primary-tint);
  --color-accent-text: var(--ql-primary);
  --color-focus: var(--ql-brass);
  --color-danger: var(--ql-err);
  --color-danger-subtle: var(--ql-err-bg);
  --color-warning: var(--ql-warn);
  --color-warning-fill: var(--ql-warn-fill);
  --color-warning-subtle: var(--ql-warn-bg);
  --color-success: var(--ql-ok);
  --color-success-subtle: var(--ql-ok-bg);

  --font-body: var(--ql-font-text);
  --font-display: var(--ql-font-display);
  --font-mono: var(--ql-font-code);
  --font-size-xs: var(--ql-size-xs);
  --font-size-sm: var(--ql-size-xs);
  --font-size-md: var(--ql-size-s);
  --font-size-lg: var(--ql-size-m);
  --font-size-xl: var(--ql-size-l);
  --line-height-small: var(--ql-leading-xs);
  --line-height-body: var(--ql-leading-s);
  --line-height-tight: 1.25;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-display: 500;

  /* Golden-ratio spacing: 4, 6, 10, 16, 26, 42, 68 */
  --space-1: var(--ql-space-1);
  --space-2: var(--ql-space-2);
  --space-3: var(--ql-space-3);
  --space-4: var(--ql-space-4);
  --space-5: var(--ql-space-5);
  --space-6: var(--ql-space-6);
  --space-7: var(--ql-space-7);

  /* Radius = padding / phi: inputs (10) 6, buttons (16) 10, cards (26) 16 */
  --radius-sm: var(--ql-radius-3);
  --radius-md: var(--ql-radius-4);
  --radius-lg: var(--ql-radius-5);
  --radius-pill: 999px;

  --border-width: 1px;
  --focus-width: 2px;
  --shadow-sm: none;
  --shadow-md: 0 var(--ql-space-1) var(--ql-space-4) rgb(26 34 41 / 0.14);

  --size-control: var(--ql-control-h);
  --size-content: var(--ql-page-max);
  --size-sidebar: calc(var(--ql-space-8) * 2);
  --size-logo: var(--ql-space-5);
  --size-tile-min: calc(var(--ql-space-9) + var(--ql-space-7));
  --size-toast: calc(var(--ql-space-9) * 2);

  --motion-fast: 120ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
}