/**
 * Self-hosted Poppins Font
 * Locally served WOFF2 files for better performance and privacy
 */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Poppins Light'), local('Poppins-Light'),
       url('/fonts/poppins-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Poppins Regular'), local('Poppins-Regular'),
       url('/fonts/poppins-400.woff2') format('woff2');
}

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

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
       url('/fonts/poppins-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Poppins Bold'), local('Poppins-Bold'),
       url('/fonts/poppins-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
       url('/fonts/poppins-800.woff2') format('woff2');
}
/**
 * Global CSS Reset and Base Styles
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

/**
 * CSS Variables for Theme
 * These enable instant theme switching without re-rendering
 */
:root {
  /* Light mode colors (default) */
  --color-background: #f5f5f5;
  --color-surface: #ffffff;
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748b;
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;

  /* Brand colors */
  --color-primary: #DE5A23;
  --color-primary-dark: #C54D1F;
  --color-primary-light: #E67344;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Border radius */
  --radius-button: 6px;
  --radius-card: 12px;
}

/**
 * Dark mode CSS variables
 * Applied when MUI theme mode is 'dark'
 */
[data-theme='dark'] {
  --color-background: #0f172a;
  --color-surface: #1e293b;
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-border: #334155;
  --color-border-light: #475569;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-background);
  color: var(--color-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#root {
  width: 100%;
  min-height: 100vh;
}

code {
  font-family: "SF Mono", Monaco, Consolas, "Courier New", monospace;
}