/* ========================================================================
   RedEnergy — Colors & Type
   Sister system to Red Petroleum, pivoted for the EV charging network.
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,400;0,700;0,800;0,900;1,700;1,800;1,900&family=Saira:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* ---------- Brand ---------- */
  --rp-red:        #E30613;   /* Red Petroleum primary — heritage red */
  --rp-red-deep:   #B80410;   /* Pressed / shadow / darker accent */
  --rp-red-ink:    #6E0008;   /* Header on red, blood-deep red */
  --re-green:      #00D964;   /* RedEnergy primary accent — EV "charged" green */
  --re-green-deep: #00A84B;   /* Pressed / shadow */
  --re-green-glow: rgba(0, 217, 100, 0.35);
  --re-volt:       #C6FF3D;   /* High-voltage yellow-green, used sparingly */

  /* ---------- Neutrals ---------- */
  --ink:           #0A0A0A;   /* Headlines / display text */
  --ink-2:         #1A1A1A;   /* Body strong */
  --steel-900:    #2A2D33;
  --steel-700:    #4A4F57;
  --steel-500:    #7A8089;   /* Body secondary */
  --steel-300:    #BFC4CB;
  --steel-200:    #DDE0E4;
  --steel-100:    #EEF0F2;   /* Card / surface alt */
  --bone:          #F7F6F2;   /* Warm off-white surface */
  --paper:         #FFFFFF;

  /* ---------- Semantic ---------- */
  --bg:            var(--paper);
  --bg-alt:        var(--bone);
  --bg-dark:       var(--ink);
  --fg-1:          var(--ink);
  --fg-2:          var(--steel-700);
  --fg-3:          var(--steel-500);
  --fg-on-red:     var(--paper);
  --fg-on-green:   var(--ink);
  --border:        var(--steel-200);
  --border-strong: var(--steel-300);
  --accent:        var(--rp-red);
  --accent-2:      var(--re-green);

  /* ---------- Status ---------- */
  --status-ok:     #00B454;
  --status-warn:   #F2A516;
  --status-err:    var(--rp-red);
  --status-info:   #1E7CE0;

  /* ---------- Type families ---------- */
  --font-display: 'Saira Condensed', 'Arial Narrow', 'Arial Black', sans-serif;
  --font-sans:    'Saira', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Saira', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Radii ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---------- Spacing ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(10,10,10,0.06), 0 1px 1px rgba(10,10,10,0.04);
  --shadow-md:  0 4px 12px rgba(10,10,10,0.08), 0 2px 4px rgba(10,10,10,0.04);
  --shadow-lg:  0 18px 40px -12px rgba(10,10,10,0.18), 0 4px 10px rgba(10,10,10,0.06);
  --shadow-red: 0 12px 32px -8px rgba(227,6,19,0.45);
  --shadow-grn: 0 12px 32px -8px rgba(0,217,100,0.45);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-in:    cubic-bezier(.6,.1,.9,.4);
  --ease-snap:  cubic-bezier(.2,.9,.25,1.2);
  --t-fast:   120ms;
  --t-med:    200ms;
  --t-slow:   320ms;

  /* ---------- Geometric primitive ----------
     The brand mark sits inside a slanted parallelogram. Use this skew
     across buttons, badges, ribbons and stat cards to keep the family. */
  --skew: -8deg;
}

/* ========================================================================
   Type scale — display-heavy, italic, condensed
   ======================================================================== */

.h-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(56px, 8vw, 132px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ink);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
}

.h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-red);
}

.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  color: var(--fg-2);
}

.p, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-2);
}

.p-sm {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
}

.label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.metric {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
}

/* ========================================================================
   Utility — parallelogram chip (signature shape from RP logo)
   ======================================================================== */

.chip-skew {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  background: var(--rp-red);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transform: skewX(var(--skew));
}
.chip-skew > * { transform: skewX(calc(-1 * var(--skew))); }