/*
 * The design tokens both apps share: colours, spacing, type, radii, as CSS variables.
 * The admin panel's palette is the default (:root); the client app's, with its dark
 * mode and a brand's own accent, applies under .tb-theme-client (on <html> or <body>).
 * Values are the pages' own (backend/assets/dist/css/panel.css, frontend/assets/client/app.css).
 */
:root {
  /* Surfaces, from furthest back to nearest. */
  --bg: #f1f3f6;
  --surface: #ffffff;
  --surface-sunken: #f7f8fa;
  /* The dark panel used for JSON and code blocks. */
  --code-bg: #16202e;
  --code-ink: #e6ebf2;

  /* Ink. */
  --text: #16202e;
  --muted: #5d6b7e;
  /* AA on every surface it sits on, the lightest tint (--accent-wash) included: 4.6:1. */
  --faint: #626f82;

  --border: #dce1e8;
  --border-strong: #c3ccd8;

  /* One accent. Everything interactive is this colour and nothing else is. */
  --accent: #2f5fd0;
  --accent-ink: #24499e;
  --accent-wash: #eef3fd;

  /* Status. Each is paired with text or a symbol wherever it appears. */
  --ok: #17794a;
  --ok-wash: #e8f5ee;
  --warn: #8a5a00;
  --warn-wash: #fdf4e3;
  --danger: #b3261e;
  --danger-wash: #fdeeed;
  --info: #24499e;
  --info-wash: #eef3fd;
  /* A robot waiting on a limit doing its job: neither healthy-green nor alarming. */
  --wait: #475a72;
  --wait-wash: #edf1f6;

  /* Spacing scale. Nothing below invents a value outside it. */
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  /* Type scale. */
  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-base: .875rem;
  --t-md: 1rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5rem;

  --radius: 6px;
  --radius-sm: 4px;
  --radius-lg: 10px;

  /* One elevation, used only where a layer genuinely sits above another. */
  --shadow: 0 1px 2px rgba(22, 32, 46, .06), 0 1px 8px rgba(22, 32, 46, .04);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Content columns: wide for lists of rows, narrower for one record or a form. */
  --w-wide: 1360px;
  --w-narrow: 1080px;
  --gutter: var(--s6);

  /* Minimum comfortable target for a finger. */
  --tap: 2.75rem;

  /* The markup this stylesheet draws. panel.js checks it against its own
     STYLE_CONTRACT and refetches a stylesheet that does not match — a cached
     older one. Bump both together. */
  /* (the panel's stylesheet contract stays in panel.css) */
}

/* The client app: its own palette, mapped onto the same names (app.css). */
.tb-theme-client {
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #16191d;
  --muted: #5d6670;
  --line: #dde1e6;
  --accent: var(--brand-accent, #1f5fd6);
  --on-accent: var(--brand-on-accent, #ffffff);
  /* The accent as text (links, outline buttons): the brand's, darkened to 4.5:1 when it is too light (BrandColors). */
  --accent-text: var(--brand-accent-text, var(--accent));
  --danger: #c0352b;
  /* Text on a filled danger or warn surface (a button, a badge): AA in both modes. */
  --on-danger: #ffffff;
  --on-warn: #ffffff;
  --ok: #1d7a46;
  --warn: #9a6200;
  --surface: var(--card);
  --surface-sunken: color-mix(in srgb, var(--text) 5%, var(--card));
  --faint: var(--muted);
  --border: var(--line);
  --border-strong: var(--line);
  --accent-ink: var(--accent-text);
  --accent-wash: color-mix(in srgb, var(--accent) 12%, var(--card));
  --ok-wash: color-mix(in srgb, var(--ok) 12%, var(--card));
  --warn-wash: color-mix(in srgb, var(--warn) 12%, var(--card));
  --danger-wash: color-mix(in srgb, var(--danger) 12%, var(--card));
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  .tb-theme-client {
    --bg: #111418;
    --card: #1b1f25;
    --text: #e9ecef;
    --muted: #9aa3ad;
    --line: #2d333b;
    --accent: var(--brand-accent-dark, #6c9cf5);
    /* Dark ink on the light dark-mode accent: white on #6c9cf5 is 2.7:1, the ink 6.8:1. */
    --on-accent: var(--brand-on-accent-dark, #111418);
    --accent-text: var(--brand-accent-text-dark, var(--accent));
    --on-danger: #111418;
    --on-warn: #111418;
    --danger: #ef6a5f;
    --ok: #4cc283;
    --warn: #e0a83a;
  }
}