/* ============================================

 * Aeon Laser — Style Guide CSS

 * Generated by The Style Guide

 * ============================================ */

:root {
  /* Fonts */
  --font-heading: 'Rubik', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Colors */
  --color-cta: #9D1C1F;
  --color-cta-opposite: #FFFFFF;
  --color-cta-alt: #C82428;
  --color-cta-alt-opposite: #FFFFFF;
  --color-primary: #9D1C1F;
  --color-primary-opposite: #FFFFFF;
  --color-primary-alt: #C82428;
  --color-primary-alt-opposite: #FFFFFF;
  --color-secondary: #35415C;
  --color-secondary-opposite: #FFFFFF;
  --color-secondary-alt: #1C2C50;
  --color-secondary-alt-opposite: #FFFFFF;
  --color-tertiary: #F59E0B;
  --color-tertiary-opposite: #000000;
  --color-tertiary-alt: #C57F08;
  --color-tertiary-alt-opposite: #000000;
  --color-light: #F8FAFC;
  --color-light-opposite: #000000;
  --color-light-alt: #D4E0ED;
  --color-light-alt-opposite: #000000;
  --color-dark: #000000;
  --color-dark-opposite: #FFFFFF;
  --color-dark-alt: #1A1A1A;
  --color-dark-alt-opposite: #FFFFFF;

  /* Heading scale */
  --fs-h1: 48px;
  --fs-h2: 38px;
  --fs-h3: 30px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 16px;

  /* Body scale */
  --fs-body-xs: 12px;
  --fs-body-sm: 14px;
  --fs-body: 16px;
  --fs-body-lg: 18px;
  --fs-body-2xl: 22px;

  /* Spacing scale */
  --space-10: 10px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-70: 70px;
  --space-80: 80px;
  --space-90: 90px;
  --space-100: 100px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  /* Radius & buttons */
  --radius-default: 4px;
  --heading-letter-spacing: -0.05em;
  --heading-base-font-size: 1.2rem;
  --body-base-font-size: 1rem;
  --body-bg: #FFFFFF;
  --btn-padding-y: 0.9em;
  --btn-padding-x: 1.75em;

  /* Layout — WordPress-compatible content/wide widths */
  --content-size: 1200px;
  --wide-size: 1400px;
  --wp--style--global--content-size: var(--content-size);
  --wp--style--global--wide-size: var(--wide-size);
}

/* Helper classes — colors */

.has-cta-background-color { background-color: var(--color-cta); color: var(--color-cta-opposite); }
.has-cta-color { color: var(--color-cta); }
.has-cta-border-color { border-color: var(--color-cta); }
.has-cta-alt-background-color { background-color: var(--color-cta-alt); color: var(--color-cta-alt-opposite); }
.has-cta-alt-color { color: var(--color-cta-alt); }
.has-cta-alt-border-color { border-color: var(--color-cta-alt); }
.has-primary-background-color { background-color: var(--color-primary); color: var(--color-primary-opposite); }
.has-primary-color { color: var(--color-primary); }
.has-primary-border-color { border-color: var(--color-primary); }
.has-primary-alt-background-color { background-color: var(--color-primary-alt); color: var(--color-primary-alt-opposite); }
.has-primary-alt-color { color: var(--color-primary-alt); }
.has-primary-alt-border-color { border-color: var(--color-primary-alt); }
.has-secondary-background-color { background-color: var(--color-secondary); color: var(--color-secondary-opposite); }
.has-secondary-color { color: var(--color-secondary); }
.has-secondary-border-color { border-color: var(--color-secondary); }
.has-secondary-alt-background-color { background-color: var(--color-secondary-alt); color: var(--color-secondary-alt-opposite); }
.has-secondary-alt-color { color: var(--color-secondary-alt); }
.has-secondary-alt-border-color { border-color: var(--color-secondary-alt); }
.has-tertiary-background-color { background-color: var(--color-tertiary); color: var(--color-tertiary-opposite); }
.has-tertiary-color { color: var(--color-tertiary); }
.has-tertiary-border-color { border-color: var(--color-tertiary); }
.has-tertiary-alt-background-color { background-color: var(--color-tertiary-alt); color: var(--color-tertiary-alt-opposite); }
.has-tertiary-alt-color { color: var(--color-tertiary-alt); }
.has-tertiary-alt-border-color { border-color: var(--color-tertiary-alt); }
.has-light-background-color { background-color: var(--color-light); color: var(--color-light-opposite); }
.has-light-color { color: var(--color-light); }
.has-light-border-color { border-color: var(--color-light); }
.has-light-alt-background-color { background-color: var(--color-light-alt); color: var(--color-light-alt-opposite); }
.has-light-alt-color { color: var(--color-light-alt); }
.has-light-alt-border-color { border-color: var(--color-light-alt); }
.has-dark-background-color { background-color: var(--color-dark); color: var(--color-dark-opposite); }
.has-dark-color { color: var(--color-dark); }
.has-dark-border-color { border-color: var(--color-dark); }
.has-dark-alt-background-color { background-color: var(--color-dark-alt); color: var(--color-dark-alt-opposite); }
.has-dark-alt-color { color: var(--color-dark-alt); }
.has-dark-alt-border-color { border-color: var(--color-dark-alt); }

/* Helper classes — font sizes */

.has-x-small-font-size { font-size: var(--fs-body-xs); }
.has-small-font-size { font-size: var(--fs-body-sm); }
.has-medium-font-size { font-size: var(--fs-body); }
.has-large-font-size { font-size: var(--fs-body-lg); }
.has-x-large-font-size { font-size: var(--fs-body-2xl); }

/* Typography */

body, .sg-body { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--color-dark); background: var(--body-bg); }
p { margin: 0; }
p + p { margin-top: 1em; }
h1, .h1, .sg-h1, h2, .h2, .sg-h2, h3, .h3, .sg-h3, h4, .h4, .sg-h4, h5, .h5, .sg-h5, h6, .h6, .sg-h6 { font-family: var(--font-heading); letter-spacing: var(--heading-letter-spacing); line-height: 0.9em; margin: 0; text-transform: uppercase; }
h1, .h1, .sg-h1 { font-size: var(--fs-h1); }
h2, .h2, .sg-h2 { font-size: var(--fs-h2); }
h3, .h3, .sg-h3 { font-size: var(--fs-h3); }
h4, .h4, .sg-h4 { font-size: var(--fs-h4); }
h5, .h5, .sg-h5 { font-size: var(--fs-h5); }
h6, .h6, .sg-h6 { font-size: var(--fs-h6); }

/* Eyebrow */

.sg-block-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-default);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-sm { font-size: var(--fs-body-sm); }
.btn-md { font-size: var(--fs-body); }
.btn-lg { font-size: var(--fs-body-lg); }

.btn-cta { background: var(--color-cta); color: var(--color-cta-opposite); }
.btn-cta:hover { background: var(--color-cta-alt); }
.btn-outline-primary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background: var(--color-primary); color: var(--color-primary-opposite); }

/* Layout — alignwide / alignfull / is-layout-constrained */

.is-layout-constrained > :where(:not(.alignfull):not(.alignwide)) {
  max-width: var(--content-size);
  margin-left: auto;
  margin-right: auto;
}
.is-layout-constrained > .alignwide {
  max-width: var(--wide-size);
  margin-left: auto;
  margin-right: auto;
}
.is-layout-constrained > .alignfull {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Forms */

.sg-input, .sg-select, .sg-textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 0.625em 0.875em;
  border: 1px solid #D0D5DD;
  border-radius: var(--radius-default);
  background: #FFFFFF;
  width: 100%;
}
.sg-input:focus, .sg-select:focus, .sg-textarea:focus {
  outline: 2px solid var(--color-cta);
  outline-offset: 1px;
  border-color: var(--color-cta);
}