/**
 * ElectrocomIA - CSS Variables
 *
 * Brand colors and typography for ElectrocomIA
 * All component styles reference these variables
 */

/* ==========================================
 * @FONT-FACE - Local Inter Fonts
 * ========================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Italic variants */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
:root {
  /* ==========================================
   * BRAND COLORS
   * ========================================== */

  /* Primary - Main brand color (buttons, links, accents) */
  --color-primary: #2463EB;
  --color-primary-light: #3B82F6;
  --color-primary-dark: #1D4ED8;

  /* Secondary - Supporting brand color */
  --color-secondary: #061941;
  --color-secondary-light: #EFF6FF;
  --color-secondary-dark: #BFDBFE;

  /* Accent - Call-to-action, highlights */
  --color-accent: #2463EB;
  --color-accent-light: #3B82F6;
  --color-accent-dark: #1D4ED8;

  /* Success/Warning/Error states */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-error: #EF4444;


  /* ==========================================
   * TEXT COLORS
   * ========================================== */

  --color-text-primary: #061941;      /* Main body text */
  --color-text-secondary: #061941;    /* Headings */
  --color-text-muted: #64748B;        /* Secondary text */
  --color-text-light: #94A3B8;        /* Placeholders, hints */
  --color-text-inverse: #FFFFFF;      /* Text on dark backgrounds */


  /* ==========================================
   * BACKGROUND COLORS
   * ========================================== */

  --color-bg-white: #FFFFFF;
  --color-bg-light: #F8FAFC;          /* Light sections */
  --color-bg-alt: #F1F5F9;            /* Alternate sections */
  --color-bg-accent: #061941;
    /* Contact section, highlighted areas */
  --color-bg-dark: #061941;           /* Dark sections, footer */
  --color-bg-highlight: #FEF3C7;      /* Warning/info boxes */


  /* ==========================================
   * BORDER COLORS
   * ========================================== */

  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;
  --color-border-dark: #061941;


  /* ==========================================
   * TYPOGRAPHY
   * ========================================== */

  /* Font Families - Using Inter */
  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body-light: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body-medium: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body-bold: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 40px;
  --font-size-4xl: 48px;
  --font-size-5xl: 56px;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;


  /* ==========================================
   * SPACING
   * ========================================== */

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* Section spacing */
  --section-padding: 96px;
  --section-padding-mobile: 48px;


  /* ==========================================
   * LAYOUT
   * ========================================== */

  --container-max-width: 1440px;
  --container-padding: 16px;


  /* ==========================================
   * BORDERS & SHADOWS
   * ========================================== */

  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 9999px;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 50px rgba(18, 17, 39, 0.1);


  /* ==========================================
   * TRANSITIONS
   * ========================================== */

  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;


  /* ==========================================
   * Z-INDEX SCALE
   * ========================================== */

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
}


/* ==========================================
 * DARK MODE (optional - uncomment to enable)
 * ========================================== */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #E0E0E0;
    --color-text-secondary: #FFFFFF;
    --color-bg-white: #1A1A2E;
    --color-bg-light: #16213E;
    --color-bg-alt: #0F3460;
  }
}
*/