/* ============================================
   THEME: Forge Software
   Fire Spectrum — dark base, flame orange/yellow

   Brand Identity:
   - Primary: Flame orange (#E25822)
   - Secondary: Warm charcoal (#2a2a2a)
   - Accent: Hot yellow (#FFDB00)
   - Dark premium surfaces
   ============================================ */

:root {
  /* --- Brand Colors (Fire Spectrum) --- */
  --color-primary:        #E25822;      /* Flame orange — canonical fire */
  --color-primary-light:  #FE650D;      /* Bold active flame */
  --color-primary-dark:   #C04210;      /* Deep ember */
  --color-secondary:      #2a2a2a;      /* Warm charcoal */
  --color-secondary-light:#3a3a3a;
  --color-accent:         #FFDB00;      /* Hot yellow — upper core */
  --color-accent-light:   #FFF75D;      /* Glossy yellow — near white-hot */

  /* --- Flame Gradient Stops --- */
  --flame-core:    #FFF75D;   /* White-hot core */
  --flame-hot:     #FFDB00;   /* Hot yellow */
  --flame-mid:     #FFC11F;   /* Golden */
  --flame-active:  #FE650D;   /* Bold orange */
  --flame-base:    #E25822;   /* Classic flame */
  --flame-deep:    #DA1F05;   /* Deep red edge */
  --flame-ember:   #801100;   /* Dark ember glow */

  /* --- Surfaces --- */
  --color-bg:             #0e0e0e;
  --color-surface:        #171717;
  --color-surface-light:  #1f1f1f;
  --color-border:         rgba(255, 255, 255, 0.08);

  /* --- Text --- */
  --color-text:           #f5f5f5;
  --color-text-secondary: #a3a3a3;
  --color-text-muted:     #666666;

  /* --- Typography --- */
  --font-heading:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type Scale */
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.5rem;
  --text-5xl:   3.25rem;
  --text-6xl:   4.5rem;

  /* --- Spacing / Layout --- */
  --container-max:        1200px;
  --container-padding:    2rem;
  --section-padding:      6rem;
  --grid-gap:             2rem;

  /* --- Borders --- */
  --radius:     6px;
  --radius-lg:  12px;
}

/* --- Responsive Type Scaling --- */
@media (max-width: 1024px) {
  :root {
    --text-6xl:  3.5rem;
    --text-5xl:  2.75rem;
    --text-4xl:  2rem;
    --section-padding: 4.5rem;
  }
}

@media (max-width: 768px) {
  :root {
    --text-6xl:  2.5rem;
    --text-5xl:  2rem;
    --text-4xl:  1.75rem;
    --text-3xl:  1.5rem;
    --container-padding: 1.25rem;
    --section-padding: 3.5rem;
    --grid-gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  :root {
    --text-6xl:  2rem;
    --text-5xl:  1.75rem;
    --container-padding: 1rem;
    --section-padding: 3rem;
  }
}

/* =============================================
   CLIENT-SPECIFIC STYLES
   ============================================= */

/* Form fields on accent/colored backgrounds */
.section--accent input::placeholder,
.section--accent textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.section--accent input,
.section--accent textarea,
.section--accent select {
  color: #fff;
}

/* Accent color highlight for brand emphasis */
.highlight {
  color: var(--color-primary);
}

.highlight--gold {
  color: var(--color-accent);
}

/* Brand separator line */
.divider {
  width: 60px;
  height: 3px;
  background-color: var(--color-primary);
  margin-bottom: 1.5rem;
}

.divider--center {
  margin-left: auto;
  margin-right: auto;
}

/* Image placeholder styling (until real photos are provided) */
.img-placeholder {
  background: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    var(--color-surface-light) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Hero & page banner gradients — flame-tinged dark */
.hero__bg .img-placeholder {
  background: linear-gradient(135deg, #0e0e0e 0%, #1a0d06 25%, #2e1208 45%, #1a0d06 65%, #0e0e0e 100%) !important;
}

.hero__overlay {
  background: linear-gradient(
    135deg,
    rgba(14, 14, 14, 0.85) 0%,
    rgba(14, 14, 14, 0.55) 45%,
    rgba(14, 14, 14, 0.75) 100%
  ) !important;
}

.page-banner {
  background: linear-gradient(135deg, #0e0e0e 0%, #1a0d06 30%, #2e1208 50%, #1a0d06 70%, #0e0e0e 100%) !important;
}

/* Comparison table highlight column (pricing page) */
.comparison-table__highlight {
  background-color: rgba(226, 88, 34, 0.08);
  border-left: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
}

.comparison-table thead .comparison-table__highlight {
  border-top: 2px solid var(--color-primary);
  color: var(--color-primary) !important;
}

.comparison-table tbody tr:last-child .comparison-table__highlight {
  border-bottom: 2px solid var(--color-primary);
}