@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400.9212f6f9860f.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400-italic.a242ba0df3a1.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500.a09f2fccfee3.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/poppins-600.72993dddf88a.woff2") format("woff2");
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700.25b0e113ca7c.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Brand primitives. Cyan is decorative; petrol carries accessible actions. */
  --ui-brand-cyan: #48a5bc;
  --ui-brand-petrol: #216f83;
  --ui-brand-petrol-hover: #195a6a;
  --ui-brand-petrol-active: #144754;
  --ui-brand-cyan-soft: #eaf5f7;

  /* Neutral primitives. */
  --ui-text: #262a2b;
  --ui-text-muted: #54595f;
  --ui-text-disabled: #7a7a7a;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f3f3f3;
  --ui-surface-strong: #eeeef0;
  --ui-border: #d8d8d8;
  --ui-border-control: #7a7a7a;

  /* Semantic feedback. */
  --ui-info: #216f83;
  --ui-info-soft: #eaf5f7;
  --ui-success: #17613f;
  --ui-success-soft: #e8f5ed;
  --ui-warning: #75520c;
  --ui-warning-soft: #fff3d5;
  --ui-danger: #8a2d25;
  --ui-danger-hover: #6f221d;
  --ui-danger-active: #5d1b18;
  --ui-danger-soft: #fff1ef;

  /* Type scale. */
  --ui-font-family: "Poppins", ui-sans-serif, system-ui, -apple-system,
    blinkmacsystemfont, "Segoe UI", sans-serif;
  --ui-font-size-1: 0.75rem;
  --ui-font-size-2: 0.875rem;
  --ui-font-size-3: 1rem;
  --ui-font-size-4: 1.125rem;
  --ui-font-size-5: 1.375rem;
  --ui-font-size-6: 1.75rem;
  --ui-font-size-7: 2.5rem;
  --ui-font-size-8: 3.5rem;

  /* Four-pixel spacing scale. */
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-space-7: 2rem;
  --ui-space-8: 2.5rem;
  --ui-space-9: 3rem;
  --ui-space-10: 4rem;

  /* Shape, elevation and layout. */
  --ui-radius-control: 0.375rem;
  --ui-radius-card: 0.625rem;
  --ui-radius-overlay: 1rem;
  --ui-radius-pill: 999px;
  --ui-shadow-sm: 0 0.25rem 1rem rgb(38 42 43 / 6%);
  --ui-shadow-panel: 0 0.75rem 2rem rgb(38 42 43 / 12%);
  --ui-shadow-overlay: 0 1.5rem 4rem rgb(38 42 43 / 24%);
  --ui-focus-ring: 0 0 0 0.1875rem rgb(33 111 131 / 16%);
  --ui-danger-ring: 0 0 0 0.1875rem rgb(138 45 37 / 12%);
  --ui-container-app: 82rem;
  --ui-container-content: 68rem;
  --ui-container-form: 54rem;
  --ui-container-narrow: 42rem;
  --ui-text-measure: 68ch;
  --ui-gutter: clamp(1rem, 3vw, 2rem);
  --ui-control-height: 2.75rem;
  --ui-duration-fast: 150ms;
  --ui-ease: ease;

  /* Compatibility aliases consumed by the existing page layouts. */
  --ink: var(--ui-text);
  --muted: var(--ui-text-muted);
  --surface: var(--ui-surface);
  --surface-soft: var(--ui-surface-subtle);
  --line: var(--ui-border);
  --brand: var(--ui-brand-petrol);
  --brand-dark: var(--ui-brand-petrol-hover);
  --accent: var(--ui-brand-cyan);
  --danger: var(--ui-danger);
  --focus: var(--ui-brand-petrol);
  --shadow: var(--ui-shadow-panel);
  --portal-ink: var(--ui-text);
  --portal-muted: var(--ui-text-muted);
  --portal-brand: var(--ui-brand-petrol);
  --portal-brand-dark: var(--ui-brand-petrol-hover);
  --portal-mint: var(--ui-brand-cyan-soft);
  --portal-surface: var(--ui-surface);
  --portal-page: var(--ui-surface-subtle);
  --portal-line: var(--ui-border);
  --portal-error: var(--ui-danger);
  --portal-error-bg: var(--ui-danger-soft);
  --portal-success: var(--ui-success);
  --portal-success-bg: var(--ui-success-soft);
  --portal-focus: var(--ui-brand-petrol);
}