/* ============================================================
   CONFIG.CSS | Brand Configuration
   ============================================================
   EDIT THIS FILE TO REBRAND THE ENTIRE WEBSITE
   Change colors, fonts, company info: everything updates.
   ============================================================ */

:root {
  /* === BRAND COLORS === */
  --brand-primary: #FF0101;
  --brand-primary-hover: #e00000;
  --brand-primary-rgb: 255, 1, 1;
  --brand-dark: #1a1a1a;
  --brand-dark-rgb: 26, 26, 26;
  --brand-accent: #222222;
  --brand-white: #ffffff;
  --brand-gray: #777777;
  --brand-gray-light: #999999;
  --brand-gray-dark: #555555;
  --brand-light-bg: #F5F5F5;
  --brand-border: #e0e0e0;
  --brand-overlay: rgba(0, 0, 0, 0.6);
  --brand-footer-bg: #1a1a1a;
  --brand-prefooter-bg: #2a2a2a;

  /* === TYPOGRAPHY === */
  --font-heading: 'Epilogue', sans-serif;
  --font-body: 'Epilogue', sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.7;
  --line-height-heading: 1.2;

  /* === SPACING === */
  --section-padding: 120px;
  --section-padding-md: 80px;
  --section-padding-sm: 60px;
  --container-max: 1200px;
  --container-padding: 20px;

  /* === HEADER === */
  --header-height: 85px;
  --header-bg: rgba(166, 166, 166, 0.4);
  --header-bg-solid: rgba(166, 166, 166, 0.85);

  /* === DESIGN ELEMENTS === */
  --skew-angle: -8deg;
  --border-radius: 0px;
  --transition-speed: 0.3s;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 5px 25px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 15px 50px rgba(0, 0, 0, 0.2);
}