/* Design Tokens - Colors, Spacing, Fonts */

/* Font Faces */
@font-face {
  font-family: "Eudoxus Sans";
  src: url("../assets/fonts/EudoxusSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Eudoxus Sans";
  src: url("../assets/fonts/EudoxusSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Eudoxus Sans";
  src: url("../assets/fonts/EudoxusSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* Colors - Light Mode */
:root {
  /* Primary */
  --color-primary: #635bff;
  --color-primary-light: #5b5cf6;
  
  /* Backgrounds */
  --color-bg-light: #ffffff;
  --color-bg-dark: #000000;
  --color-bg-card-light: #ffffff;
  --color-bg-card-dark: #111111;
  --color-bg-section-light: #f5f5f5;
  --color-bg-section-dark: #111111;
  --color-bg-placeholder-light: #f9f9f9;
  --color-bg-placeholder-dark: #111111;
  
  /* Text */
  --color-text-primary-light: #333333;
  --color-text-primary-dark: #ffffff;
  --color-text-secondary-light: #666666;
  --color-text-secondary-dark: #ffffff;
  --color-text-tertiary-light: #6b7280;
  --color-text-tertiary-dark: #b0b0b0;
  --color-text-muted-light: #9ca3af;
  --color-text-muted-dark: #888888;
  
  /* Borders */
  --color-border-light: #d1d5db;
  --color-border-dark: #333333;
  --color-border-divider-light: #e0e0e0;
  --color-border-divider-dark: #333333;
  
  /* Buttons */
  --color-button-danger: #dc3545;
  
  /* Status */
  --color-success: #2e7d32;
  --color-error: #c62828;
  
  /* Modal */
  --color-modal-overlay-light: rgba(0, 0, 0, 0.5);
  --color-modal-overlay-dark: rgba(0, 0, 0, 0.7);
  --color-modal-border-light: #e0e0e0;
  --color-modal-border-dark: #333333;
  
  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 60px;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  
  /* Shadows */
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 12px 48px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
  
  /* Transitions */
  --transition-base: 0.2s;
  --transition-slow: 0.3s ease;
}