/**
 * Design tokens — adapted from the EnduraDocs Design System v2 (Material 3,
 * blue/navy brand). Values are copied from the design project's own
 * colors.css / shape.css / spacing.css / typography.css so this page stays a
 * faithful subset, not a reinterpretation.
 *
 * Two deliberate departures from the source design system, both to keep this
 * page's zero-third-party-request posture (see src/index.html's CSP comment):
 *   - Roboto is self-hosted (@font-face below), not loaded from
 *     fonts.googleapis.com. See src/assets/fonts/ and README.md.
 *   - Only the tokens this single page actually uses are kept; app-shell
 *     constants like --rail-width belong to the full Vault product, not here.
 */

/* ---- Fonts: self-hosted Roboto (no remote request) ---- */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/roboto-300-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/roboto-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/roboto-500-normal.woff2') format('woff2');
}

:root {
  --font-sans:
    'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

  /* ---- Color: Material 3 system scheme (blue), verified against the
     production app's mat.theme({ primary: mat.$blue-palette }) ---- */
  --md-primary: #33618d;
  --md-on-primary: #ffffff;
  --md-primary-container: #d0e4ff;
  --md-on-primary-container: #001d34;

  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;

  --md-background: #f8f9ff;
  --md-on-background: #191c20;
  --md-on-surface: #191c20;
  --md-on-surface-variant: #43474e;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container: #eceef4;

  --md-outline: #73777f;
  --md-outline-variant: #c3c7cf;

  /* Brand navy — the logo color / on-primary-container */
  --brand-navy: #001d34;

  /* Material state-layer opacities */
  --state-hover: 0.08;
  --state-pressed: 0.12;
  --state-disabled-content: 0.38;
  --state-disabled-bg: 0.12;

  /* ---- Shape (Material 3 shape scale) ---- */
  --corner-sm: 8px;
  --corner-md: 12px;
  --corner-lg: 16px;
  --corner-full: 9999px;

  --shadow-card: 0 1px 2px rgba(29, 30, 38, 0.05), 0 1px 3px rgba(29, 30, 38, 0.12);

  /* ---- Spacing (Tailwind 4px base scale) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Typography (Material 3 type scale) ---- */
  --headline-small: 400 24px/32px var(--font-sans);
  --title-large: 400 22px/28px var(--font-sans);
  --title-small: 500 14px/20px var(--font-sans);
  --title-small-tracking: 0.1px;
  --body-medium: 400 14px/20px var(--font-sans);
  --body-medium-tracking: 0.25px;
  --body-small: 400 12px/16px var(--font-sans);
  --body-small-tracking: 0.4px;
  --label-large: 500 14px/20px var(--font-sans);
  --label-large-tracking: 0.1px;
  --label-small: 500 11px/16px var(--font-sans);
  --label-small-tracking: 0.5px;
}