/* DM Sans - Variable Font */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-VariableFont_opsz%2Cwght.ttf") format("truetype-variations"),
       url("../fonts/DMSans-VariableFont_opsz%2Cwght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Italic-VariableFont_opsz%2Cwght.ttf") format("truetype-variations"),
       url("../fonts/DMSans-Italic-VariableFont_opsz%2Cwght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* DM Serif Text */
@font-face {
  font-family: "DM Serif Text";
  src: url("../fonts/DMSerifText-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Serif Text";
  src: url("../fonts/DMSerifText-Italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ========== Colors ========== */
  --primary-color: #0054C6;
  --secondary-color: #000000;
  --danger-color: #EA4236;
  --success-color: #2EA94F;

  --color-white: #ffffff;
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-gray-100: #F9FAFB;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #dddddd;
  --color-gray-600: #666666;
  --color-gray-800: #333333;
  --color-epaper-bg: #c8e4ff80;
  --color-epaper-border: #c8e4ff;

  /* ========== Font Family ========== */
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-serif: "DM Serif Text", Georgia, serif;

  /* ========== Font Size ========== */
  --font-xs: 0.875rem;   /* 14px */
  --font-sm: 1rem;       /* 16px */
  --font-md: 1.125rem;   /* 18px */
  --font-lg: 1.375rem;   /* 22px */
  --font-xl: 1.625rem;   /* 26px */
  --font-2xl: 1.875rem;  /* 30px */
  --font-3xl: 2.125rem;  /* 34px */
  --font-12: 12px;
  --font-20: 20px;

  /* ========== Spacing & Size ========== */
  --radius-sm: 8px;
  --radius-md: 10px;
  --input-height: 44px;
  --icon-sm: 20px;
}

body {
  font-family: var(--font-sans) !important;
  font-size: var(--font-xs) !important;
  color: var(--secondary-color);
  background-color: var(--color-gray-100);
}