/**
 * Lumax Energy — Global Design Tokens & Base Styles
 * Source of truth for all brand CSS custom properties.
 * Reference these in Bricks via var(--lumax-navy) etc.
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {

  /* ── Brand Colours ──────────────────────────────────────── */
  --lumax-navy:          #0F304A;
  --lumax-blue:          #3698D4;
  --lumax-black:         #000000;
  --lumax-white:         #FFFFFF;
  --lumax-navy-dark:     #122030;
  --lumax-grey-dark:     #3D3C3D;
  --lumax-teal:          #518B99;
  --lumax-grey-light:    #DBDBDB;
  --lumax-subheading:    #275472;
  --lumax-icon-blue:     #0F304A;

  /* ── Product Classification Colours ────────────────────── */
  --lumax-red-product:   #EE312B;
  --lumax-cyan-product:  #00AEEF;
  --lumax-green-product: #47A147;

  /* ── Gradients ──────────────────────────────────────────── */
  --lumax-gradient-primary: linear-gradient(135deg, #0F304A 0%, #122030 100%);
  --lumax-gradient-accent:  linear-gradient(135deg, #0F304A 0%, #3698D4 100%);
  --lumax-gradient-hero:    linear-gradient(135deg, #0F304A 0%, #275472 84.5%, #3698D4 100%);

  /* ── Typography ─────────────────────────────────────────── */
  --font-primary:   'Ballinger', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-light:     300;
  --font-regular:   400;
  --font-medium:    500;
  --font-bold:      700;
  --font-xbold:     800;
  --font-black:     900;

  /* ── Type Scale ─────────────────────────────────────────── */
  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-base: 1rem;      /*  16px */
  --text-md:   1.125rem;  /*  18px */
  --text-lg:   1.25rem;   /*  20px */
  --text-xl:   1.5rem;    /*  24px */
  --text-2xl:  1.75rem;   /*  28px */
  --text-3xl:  2rem;      /*  32px */
  --text-4xl:  2.5rem;    /*  40px */
  --text-5xl:  3rem;      /*  48px */
  --text-6xl:  3.75rem;   /*  60px */

  /* ── Spacing Scale ──────────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px  */
  --space-2:  0.5rem;    /*  8px  */
  --space-3:  0.75rem;   /*  12px */
  --space-4:  1rem;      /*  16px */
  --space-5:  1.25rem;   /*  20px */
  --space-6:  1.5rem;    /*  24px */
  --space-8:  2rem;      /*  32px */
  --space-10: 2.5rem;    /*  40px */
  --space-12: 3rem;      /*  48px */
  --space-16: 4rem;      /*  64px */
  --space-20: 5rem;      /*  80px */
  --space-24: 6rem;      /*  96px */
  --space-32: 8rem;      /* 128px */

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max:     1280px;
  --container-padding: 1.5rem;

  /* ── Component Constraints ──────────────────────────────── */
  --btn-max-width:  194px;
  --btn-max-height: 44px;
  --logo-max-width: 320px;
  --logo-max-height: 46px;

  /* ── Brand Feature Line ─────────────────────────────────── */
  --line-width: 1px;
  --line-color: rgba(54, 152, 212, 0.25);

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.20), 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-navy: 0 8px 24px rgba(15, 48, 74, 0.35);

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 9999px;

  /* ── Z-Index ────────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}


/* ============================================================
   BASE RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--font-regular);
  font-size: var(--text-base);
  color: var(--lumax-grey-dark);
  background-color: var(--lumax-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--lumax-navy);
  line-height: 1.2;
  margin: 0 0 0.75em;
}

p {
  line-height: 1.65;
  margin: 0 0 1em;
}

a {
  color: var(--lumax-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--lumax-navy);
}

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


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Colours */
.text-navy    { color: var(--lumax-navy) !important; }
.text-blue    { color: var(--lumax-blue) !important; }
.text-white   { color: var(--lumax-white) !important; }
.text-sub     { color: var(--lumax-subheading) !important; }

.bg-navy      { background-color: var(--lumax-navy) !important; }
.bg-navy-dark { background-color: var(--lumax-navy-dark) !important; }
.bg-blue      { background-color: var(--lumax-blue) !important; }
.bg-white     { background-color: var(--lumax-white) !important; }
.bg-grey      { background-color: var(--lumax-grey-light) !important; }

.bg-gradient         { background: var(--lumax-gradient-primary) !important; }
.bg-gradient-accent  { background: var(--lumax-gradient-accent) !important; }
.bg-gradient-hero    { background: var(--lumax-gradient-hero) !important; }


/* ============================================================
   BUTTON COMPONENTS
   ============================================================ */

/* Ghost / Outline button (primary brand style) */
.btn-lumax {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: var(--btn-max-width);
  height: var(--btn-max-height);
  padding: 0 var(--space-6);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lumax-white);
  background: transparent;
  border: var(--line-width) solid var(--lumax-blue);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

.btn-lumax:hover {
  background: var(--lumax-blue);
  color: var(--lumax-white);
  border-color: var(--lumax-blue);
}

/* Solid button (dark background contexts) */
.btn-lumax--solid {
  background: var(--lumax-blue);
  color: var(--lumax-white);
}

.btn-lumax--solid:hover {
  background: var(--lumax-navy);
  border-color: var(--lumax-navy);
  color: var(--lumax-white);
}

/* Navy ghost (light background contexts) */
.btn-lumax--navy {
  color: var(--lumax-navy);
  border-color: var(--lumax-navy);
}

.btn-lumax--navy:hover {
  background: var(--lumax-navy);
  color: var(--lumax-white);
}


/* ============================================================
   BRAND FEATURE LINES
   ============================================================ */

/* Horizontal 1px brand line */
.lumax-line-h {
  display: block;
  width: 100%;
  height: var(--line-width);
  background: var(--line-color);
}

/* Vertical 1px brand line */
.lumax-line-v {
  display: block;
  width: var(--line-width);
  height: 100%;
  background: var(--line-color);
}

/* Decorative cross-line overlay (position: absolute on parent) */
.lumax-cross-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.lumax-cross-lines::before,
.lumax-cross-lines::after {
  content: '';
  position: absolute;
  background: var(--line-color);
}

/* Horizontal */
.lumax-cross-lines::before {
  top: 50%;
  left: 0;
  right: 0;
  height: var(--line-width);
}

/* Vertical */
.lumax-cross-lines::after {
  left: 50%;
  top: 0;
  bottom: 0;
  width: var(--line-width);
}


/* ============================================================
   BRICKS BUILDER OVERRIDES
   ============================================================ */

/* Respect container-max token */
#brx-content .brxe-container,
#brx-content .brxe-section > .brxe-container {
  max-width: var(--container-max);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Section default — remove Bricks default padding top/bottom */
#brx-content .brxe-section {
  padding-left: 0;
  padding-right: 0;
}