/* ==========================================================================
   Leadify SecureMark: design tokens
   Stylesheets load in this order: tokens, base, components, layout, icons,
   site (page styles), admin (Leadify admins only), utilities. Utilities come
   last and always win.
   Palette is taken from the logo: navy ink (the L), signal blue (the D) and
   coral (the triangle). In the product, coral is reserved for failures and
   rejections; green and amber carry pass and watch states.
   ========================================================================== */

:root {
  --ink: #131a2b;
  --ink-2: #2b3449;
  --ink-3: #4a5468;
  --muted: #5e6779;

  --signal: #3651c8;
  --signal-deep: #2639a0;
  --signal-tint: #eceffc;
  --signal-line: #b9c4f0;
  --signal-on-dark: #9fb0ff;

  --coral: #e2574c;
  --coral-ink: #a8322a;
  --coral-tint: #fdeeec;
  --coral-line: #f3c2bd;

  --pass: #1d8158;
  --pass-ink: #13603f;
  --pass-tint: #e7f5ee;
  --pass-line: #b5dfc9;

  --watch: #b97b0e;
  --watch-ink: #7a5208;
  --watch-tint: #fbf3e1;
  --watch-line: #ecd29a;

  --paper: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f8f9fc;
  --line: #dde2eb;
  --line-2: #e9ecf2;
  --line-strong: #c3cad8;

  --sidebar-bg: #131a2b;
  --sidebar-ink: #c5cbd8;
  --sidebar-hover: #1d2539;
  --sidebar-active: #252f48;
  --sidebar-line: #262f45;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;

  --shadow-1: 0 1px 2px rgba(19, 26, 43, .05);
  --shadow-2: 0 10px 30px -12px rgba(19, 26, 43, .18);
  --focus-ring: 0 0 0 3px rgba(54, 81, 200, .28);

  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sidebar-width: 256px;

  /* Height of the staging/development banner; sticky elements sit below it. Zero on the live site */
  --env-banner-height: 0px;

  /* Names used by older page-level rules */
  --brand-ink: var(--ink);
  --brand-muted: var(--muted);
  --brand-blue: var(--signal);
  --brand-blue-dark: var(--signal-deep);
  --brand-teal: var(--pass);
  --brand-amber: var(--watch);
  --brand-rose: var(--coral);
  --brand-border: var(--line);
  --brand-primary: var(--signal);
  --surface-page: var(--paper);
  --surface-card: var(--surface);
  --surface-soft: var(--surface-2);
  --line-soft: var(--line);
  --shadow-soft: var(--shadow-2);
  --shadow-tight: var(--shadow-2);

  /* Semantic roles: components use these rather than the palette directly */
  --text: var(--ink-2);
  --text-strong: var(--ink);
  --text-muted: var(--muted);
  --text-placeholder: #6b7385;
  --border: var(--line);
  --border-strong: var(--line-strong);
  /* White text on coral is 3.7:1, short of the 4.5:1 normal text needs; the ink shade is 6.4:1 */
  --danger-bg: var(--coral-ink);
  --danger-bg-hover: #8c2821;
  --danger-bg-active: #74201a;

  /* Spacing scale shared by the utilities: 1 = .25rem, 2 = .5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;

  /* Phones and other touch screens get larger targets and 16px fields, which iOS doesn't zoom into */
  --field-font-size: .925rem;
  --tap-target: 38px;
}

@media (max-width: 767.98px), (pointer: coarse) {
  :root {
    --field-font-size: 1rem;
    --tap-target: 44px;
  }
}