/* ==========================================================================
   Utility Pages Pack: design tokens
   Change these values to match your brand. Every page reads from them.
   ========================================================================== */

:root {
  /* Brand */
  --accent: #2B55B5;          /* buttons, links, focus */
  --accent-hover: #234A9E;
  --accent-ink: #FFFFFF;      /* text on accent buttons */
  --accent-soft: #E3EAF8;     /* badges, icon backgrounds */

  /* Surfaces and text */
  --bg: #EEF0F3;
  --surface: #FFFFFF;
  --surface-2: #F6F7F9;
  --ink: #1B1F27;
  --muted: #5B6472;
  --line: #D5D9E0;

  /* Status */
  --ok: #2E7D5B;
  --err: #B3261E;

  /* Split style side panel */
  --panel-bg: #1B1F27;
  --panel-muted: #9AA3B2;

  /* Signature gradient (used for big numerals, the top band and progress bars) */
  --gradient: linear-gradient(90deg, #D9B44A 0%, #B8733A 33%, #6B4FA0 66%, #2E5BBA 100%);

  /* Type */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.5rem + 3.8vw, 4.5rem);
  --fs-display-l: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-heading: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  --fs-numeral: clamp(7rem, 4rem + 11vw, 13.75rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;

  /* Space and shape */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 104px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --shadow: 0 1px 0 rgba(27, 31, 39, 0.04), 0 12px 32px -12px rgba(27, 31, 39, 0.18);
  --gutter: clamp(24px, 6vw, 80px);

  color-scheme: light;
}

/* Dark style. Applied by data-theme="dark" on <html>. */
:root[data-theme="dark"] {
  --accent: #7C9BF0;
  --accent-hover: #93ADF4;
  --accent-ink: #0F1420;
  --accent-soft: #232D45;
  --bg: #12151B;
  --surface: #1A1E26;
  --surface-2: #20252F;
  --ink: #E6E9EF;
  --muted: #9AA3B2;
  --line: #2E3440;
  --ok: #5FC198;
  --err: #F2857C;
  --panel-bg: #0C0E12;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}