/* ===========================
   CSS VARIABLES & FONTS
   =========================== */
@font-face {
    font-family: "XP-Regular";
    src: url("../assets/XP-RegularLighthouse.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "XP-Bold";
    src: url("../assets/XP-BoldLighthouse.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "XP-Medium";
    src: url("../assets/XP-MediumLighthouse.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "XP-Light";
    src: url("../assets/XP-LightLighthouse.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}

:root {
    --color-primary: #ffc709;
    --color-secondary: #5a6fd8;
    --color-dark: #333;
    --color-light: #fff;
    --color-accent: #5a6fd8;
    --color-text: #333;
    --color-text-light: #666;
    
    /* Form colors */
    --color-form-bg: rgba(255, 255, 255, 0.95);
    --color-form-border: rgba(100, 116, 139, 0.4);
    --color-form-label: rgba(100, 116, 139, 0.7);
    --color-form-focus: rgba(71, 85, 105, 0.8);
    --color-form-text: rgba(51, 65, 85, 0.9);
    --color-form-button: rgba(71, 85, 105, 0.9);
    --color-form-button-hover: rgba(51, 65, 85, 0.95);
    --color-form-shadow: rgba(71, 85, 105, 0.3);
    --color-form-shadow-hover: rgba(71, 85, 105, 0.4);
    
    /* Status colors (para toasts) */
    --color-success: #4CAF50;
    --color-success-dark: #45a049;
    --color-error: #F44336;
    --color-error-dark: #da190b;
    --color-warning: #FF9800;
    --color-warning-dark: #f57c00;
    --color-info: #2196F3;
    --color-info-dark: #1976d2;
    
    /* Border colors */
    --color-border-light: #ccc;
    --color-border-error: #e74c3c;
    
    /* Overlay colors */
    --color-overlay-medium: rgba(255, 255, 255, 0.2);
    --color-shadow-text: rgba(0, 0, 0, 0.5);
    --color-shadow-text-strong: rgba(0, 0, 0, 0.7);

    --font-primary: "XP-Regular", Arial, sans-serif;
    --font-bold: "XP-Bold", Arial, sans-serif;
    --font-medium: "XP-Medium", Arial, sans-serif;
    --font-light: "XP-Light", Arial, sans-serif;

    --border-radius: 8px;
    --transition: all 0.3s ease;
}

/* ===========================
   RESET & BASE STYLES
   =========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--color-text);
}

img {
    max-width: 100%;
    height: auto;
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */

/* Tablets (768px to 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    body {
        font-size: 15px;
    }
}

/* Mobile landscape and small tablets (481px to 767px) */
@media (max-width: 767px) and (min-width: 481px) {
    body {
        font-size: 14px;
    }
    
    .hero {
        background-attachment: scroll;
    }
}

/* Mobile portrait (up to 480px) */
@media (max-width: 480px) {
    body {
        font-size: 14px;
        line-height: 1.5;
        min-height: 100vh;
    }
    
    .hero {
        background-attachment: scroll;
        min-height: auto;
    }
}

/* Very small screens (up to 320px) */
@media (max-width: 320px) {
    body {
        font-size: 13px;
    }
}

.toastify {
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  display: flex !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-lg) !important;
  max-width: 400px !important;
  word-wrap: break-word !important;
  padding: 16px 20px !important;
}

.toast-success {
  background: linear-gradient(135deg, var(--color-success), var(--color-success-dark)) !important;
}

.toast-error {
  background: linear-gradient(135deg, var(--color-error), var(--color-error-dark)) !important;
}

.toast-warning {
  background: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark)) !important;
}

.toast-info {
  background: linear-gradient(135deg, var(--color-info), var(--color-info-dark)) !important;
}

.toastify .toast-close {
  background: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 18px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-left: 10px !important;
}

.toastify .toast-close:hover {
  color: white !important;
}

@media (max-width: 768px) {
  .toastify {
    margin: 15px !important;
    max-width: calc(100vw - 30px) !important;
  }
}