@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Italic-VariableFont_wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colors */
  --color-primary: #0066ff;
  --color-on-primary: #ffffff;
  --color-text: #1a202c;
  --color-text-secondary: #76818c;
  --color-text-subtle: #4a5568;
  --color-placeholder: rgba(74, 85, 104, 0.6);
  --color-surface: #f8fafc;
  --color-surface-overlay: #fafcff;
  --color-surface-muted: #edf2f6;
  --color-foreground-muted: #6a737c;
  --color-background: #ffffff;
  --color-background-subtle: #f3f8ff;
  --color-border: #e8e8e8;
  --color-border-subtle: #cfdaf8;
  --color-error: #e7000b;
  --color-warning: #f47616;
  --color-warning-text: #a84900;
  --color-success: #22c55e;
  --color-off-white: #f3f8ff;

  /* Typography */
  --font-family-base: "Roboto", sans-serif;
}