/* ==========================================================================
   Elyon Engenharia e Eficiência Energética — Colors & Type
   --------------------------------------------------------------------------
   Brand DNA:
   - Deep navy (the trust + engineering anchor) paired with energetic orange
     (the spark, the lightning bolt, the energy itself).
   - Confident, technical, residential-friendly. The brand sells trust in
     solar engineering for Brazilian homes & businesses.
   - Sans-serif geometric, all-caps logo, clean technical body type.
   ========================================================================== */

/* --- Webfonts (Google Fonts substitutes — see README for flagged swaps) --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ====== CORE BRAND COLORS ====== */
  /* Navy — the primary brand color. Logo wordmark, dark backgrounds, headers. */
  --elyon-navy-900: #0F2340;        /* Logo wordmark, deepest navy */
  --elyon-navy-800: #15315A;        /* Header bar (Cabeçalho top stripe) */
  --elyon-navy-700: #1B3D6E;        /* Hover / lighter navy */
  --elyon-navy-600: #2A4D80;
  --elyon-navy-500: #3A5F94;
  --elyon-navy-400: #6B86AE;
  --elyon-navy-300: #9DB1CD;
  --elyon-navy-200: #CFD9E7;
  --elyon-navy-100: #E7ECF3;
  --elyon-navy-50:  #F4F6FA;

  /* Orange — the energy. Lightning bolt, accent stripe, CTA, contact bar. */
  --elyon-orange-900: #B8430C;
  --elyon-orange-800: #D54E0F;
  --elyon-orange-700: #ED5A14;       /* Bolt mid */
  --elyon-orange-600: #F26522;       /* Primary brand orange (footer, accent stripe) */
  --elyon-orange-500: #FF7733;       /* Lightning bolt highlight */
  --elyon-orange-400: #FF9259;
  --elyon-orange-300: #FFB186;
  --elyon-orange-200: #FFD0B5;
  --elyon-orange-100: #FFE6D6;
  --elyon-orange-50:  #FFF4EC;

  /* Neutrals */
  --elyon-white:   #FFFFFF;
  --elyon-paper:   #FAFAFA;
  --elyon-gray-50:  #F5F6F7;
  --elyon-gray-100: #ECEEF1;
  --elyon-gray-200: #DCDFE4;
  --elyon-gray-300: #BFC4CC;
  --elyon-gray-400: #8B919B;
  --elyon-gray-500: #5E646E;
  --elyon-gray-600: #3F454E;
  --elyon-gray-700: #2A2F37;
  --elyon-gray-800: #1A1D23;
  --elyon-gray-900: #0E1014;
  --elyon-black:   #000000;

  /* Sustainability accent (greens — used sparingly for "carregando", solar eco messaging) */
  --elyon-green-600: #2BA84A;
  --elyon-green-500: #3DC264;
  --elyon-green-100: #DBF3E1;

  /* Semantic — status */
  --color-success: var(--elyon-green-500);
  --color-warning: #F4B400;
  --color-danger:  #E0413A;
  --color-info:    var(--elyon-navy-500);

  /* ====== SEMANTIC / SURFACE TOKENS ====== */
  --bg-default:       var(--elyon-white);
  --bg-subtle:        var(--elyon-gray-50);
  --bg-muted:         var(--elyon-navy-50);
  --bg-inverse:       var(--elyon-navy-900);
  --bg-brand:         var(--elyon-navy-900);
  --bg-brand-soft:    var(--elyon-navy-100);
  --bg-accent:        var(--elyon-orange-600);
  --bg-accent-soft:   var(--elyon-orange-100);

  --fg-default:       var(--elyon-navy-900);   /* Body text on light bg */
  --fg-muted:         var(--elyon-gray-500);
  --fg-subtle:        var(--elyon-gray-400);
  --fg-on-brand:      var(--elyon-white);      /* Text on navy */
  --fg-on-accent:     var(--elyon-white);      /* Text on orange */
  --fg-accent:        var(--elyon-orange-600);
  --fg-link:          var(--elyon-orange-700);
  --fg-link-hover:    var(--elyon-orange-800);

  --border-default:   var(--elyon-gray-200);
  --border-strong:    var(--elyon-gray-300);
  --border-brand:     var(--elyon-navy-700);
  --border-accent:    var(--elyon-orange-600);

  /* ====== TYPE: families ====== */
  --font-display: 'Montserrat', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'Inter', 'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ====== TYPE: scale (rem-based, body=16px) ====== */
  --fs-xxs:  0.6875rem;   /* 11px — captions, microlabels */
  --fs-xs:   0.75rem;     /* 12px — labels */
  --fs-sm:   0.875rem;    /* 14px — small body, table */
  --fs-base: 1rem;        /* 16px — body */
  --fs-md:   1.125rem;    /* 18px — lead */
  --fs-lg:   1.375rem;    /* 22px — h4 */
  --fs-xl:   1.75rem;     /* 28px — h3 */
  --fs-2xl:  2.25rem;     /* 36px — h2 */
  --fs-3xl:  3rem;        /* 48px — h1 */
  --fs-4xl:  4rem;        /* 64px — display */
  --fs-5xl:  5.5rem;      /* 88px — hero display, slide titles */

  /* Weights — Montserrat covers 400–900. Logo wordmark is 800/900. */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;
  --fw-black:    900;

  /* Line heights */
  --lh-tight:   1.05;   /* display */
  --lh-snug:    1.2;    /* headings */
  --lh-normal:  1.45;   /* body */
  --lh-relaxed: 1.6;    /* long-form */

  /* Letter-spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;   /* All-caps labels (e.g. footer "ELYON - Engenharia...") */

  /* ====== SPACING (4px base) ====== */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* ====== RADII ====== */
  /* Logo lockup uses subtle rounding; footer pill is fully rounded.
     Cards in the system house diagram use ~6–8px. */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ====== SHADOWS ====== */
  --shadow-xs: 0 1px 2px rgba(15, 35, 64, 0.06);
  --shadow-sm: 0 2px 6px rgba(15, 35, 64, 0.08);
  --shadow-md: 0 6px 18px rgba(15, 35, 64, 0.10);
  --shadow-lg: 0 14px 32px rgba(15, 35, 64, 0.14);
  --shadow-xl: 0 24px 60px rgba(15, 35, 64, 0.18);
  --shadow-glow-orange: 0 0 0 4px rgba(242, 101, 34, 0.18);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.06);

  /* ====== MOTION ====== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ====== LAYOUT ====== */
  --container-narrow: 720px;
  --container-base:   1080px;
  --container-wide:   1280px;
  --container-full:   1440px;
}

/* --------------------------------------------------------------------------
   SEMANTIC TYPE BLOCKS — drop-in classes / element styles
   -------------------------------------------------------------------------- */

.elyon-display,
h1.elyon, .elyon h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
}

.elyon-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-default);
}

h2.elyon, .elyon h2, .elyon-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
}

h3.elyon, .elyon h3, .elyon-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-default);
}

h4.elyon, .elyon h4, .elyon-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-default);
}

.elyon-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-accent);
}

.elyon-lead, p.elyon-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

p.elyon, .elyon p {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-default);
}

.elyon-small, small.elyon {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.elyon-label {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

code.elyon, .elyon code, .elyon-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--elyon-navy-50);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--elyon-navy-900);
}

a.elyon, .elyon a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
a.elyon:hover, .elyon a:hover {
  color: var(--fg-link-hover);
  border-bottom-color: currentColor;
}