@charset "UTF-8";

:root {

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

  --snow: #ffffff;
  --cream: #f5f7fa;
  --charcoal: #2f2f2f;

  --deep-navy: #0b1b29;
  --forest-shadow: #081722;

  --alpine-lake-blue: #1f6c8b;
  --sky-blue: #4fa3c4;
  --glacier-blue: #8ed3ee;

  --summit-teal: #1c7a74;

  --sunrise-coral: #f26b5e;
  --golden-wheat: #f2a65a;
  --wildflower-purple: #7a6f9b;

  /* =========================================
     GRADIENTS
     ========================================= */

  --gradient-primary: linear-gradient(
    135deg,
    #1f6c8b 0%,
    #4fa3c4 50%,
    #f2a65a 100%
  );

  --gradient-accent: linear-gradient(
    90deg,
    #8ed3ee 0%,
    #f2a65a 50%,
    #f26b5e 100%
  );

  --gradient-dark: linear-gradient(
    135deg,
    #0b1b29 0%,
    #102a3a 100%
  );

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

  --font-primary: "Helvetica Neue", Arial, sans-serif;

  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;

  --heading-xl: 76px;
  --heading-lg: 54px;
  --heading-md: 42px;
  --heading-sm: 30px;

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

  --section-padding-large: 120px;
  --section-padding-medium: 88px;
  --section-padding-small: 72px;

  --gap-lg: 72px;
  --gap-md: 48px;
  --gap-sm: 24px;

  /* =========================================
     LAYOUT (THIS FIXES YOUR EDGE SPACING)
     ========================================= */

  --container-max: 1600px;

  --page-gutter: 32px;
  --page-gutter-tablet: 24px;
  --page-gutter-mobile: 16px;

  /* =========================================
     RADIUS
     ========================================= */

  --radius-xl: 34px;   /* for hero images */
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* =========================================
     SHADOWS
     ========================================= */

  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 18px 40px rgba(0, 0, 0, 0.12);
  --shadow-strong: 0 28px 60px rgba(0, 0, 0, 0.18);

  /* =========================================
     GLASS / OVERLAY EFFECTS
     ========================================= */

  --glass-light: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.28);

  --overlay-dark: rgba(16, 37, 35, 0.65);
  --overlay-medium: rgba(16, 37, 35, 0.35);
  --overlay-light: rgba(16, 37, 35, 0.12);

}