/* Credencialize design tokens shared by every page. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-sans: "Montserrat", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --brand-cyan: #00c8f0;
  --brand-cyan-soft: #63ddf5;

  --dark-canvas-start: #121d45;
  --dark-canvas-focus: #1a3a70;
  --dark-canvas-end: #18234f;
  --dark-surface: #10172f;
  --dark-surface-raised: #182143;
  --dark-surface-soft: #202b50;
  --dark-border: rgba(153, 174, 222, .24);
  --dark-border-strong: rgba(133, 209, 236, .38);
  --dark-text: #f7f9ff;
  --dark-text-secondary: #b8c2dc;
  --dark-text-muted: #7f8bab;
  --dark-focus: #43d9f6;
  --dark-shadow: rgba(3, 8, 27, .48);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-page: var(--dark-canvas-end);
  --color-surface: var(--dark-surface);
  --color-surface-raised: var(--dark-surface-raised);
  --color-surface-soft: var(--dark-surface-soft);
  --color-border: var(--dark-border);
  --color-border-strong: var(--dark-border-strong);
  --color-accent: var(--brand-cyan);
  --color-focus: var(--dark-focus);
  --color-text: var(--dark-text);
  --color-text-secondary: var(--dark-text-secondary);
  --color-text-muted: var(--dark-text-muted);
  --color-shadow: var(--dark-shadow);
}