/* =============================================================
   180º E-commerce — Design Tokens
   Adapted from CH2V Design System (kept token names so component
   patterns are interchangeable), repainted for an electric-blue,
   dark-mode tech aesthetic.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND COLORS — electric blue stack ---------- */
  --e180-blue: #2563EB;
  --e180-blue-light: #60A5FA;
  --e180-blue-bright: #3B82F6;
  --e180-blue-electric: #1E5AFF;
  --e180-blue-deep: #1E40AF;
  --e180-blue-tint: rgba(37, 99, 235, 0.10);
  --e180-blue-glow: rgba(59, 130, 246, 0.35);

  /* dark canvas */
  --e180-night: #050B1F;        /* page bg */
  --e180-midnight: #0A1330;     /* card / lift bg */
  --e180-deepwater: #0F1B3D;    /* deeper card */
  --e180-hairline: rgba(96, 165, 250, 0.18);
  --e180-hairline-soft: rgba(255, 255, 255, 0.06);

  /* paired green (for 180º Websites side of the comparison) */
  --e180-green: #64A546;
  --e180-green-dark: #5F9C42;
  --e180-green-tint: rgba(100, 165, 70, 0.15);

  /* ink (used in light surface inserts) */
  --e180-ink: #0A1330;
  --e180-ink-deep: #050B1F;

  /* light surfaces (used sparingly) */
  --e180-cloud: #F1F6FF;
  --e180-mist: #E0EAFF;
  --e180-white: #FFFFFF;

  --e180-text: #B7C4E0;            /* body text on dark */
  --e180-text-muted: #7A86A8;      /* secondary / meta */
  --e180-text-bright: #E6ECFB;     /* near-white headings on dark */

  /* on-light fallback */
  --e180-text-on-light: #2B3556;
  --e180-text-on-light-muted: #6B7796;

  /* utility */
  --e180-overlay: rgba(5, 11, 31, 0.65);
  --e180-shadow-card: 0 18px 40px -22px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--e180-hairline) inset;
  --e180-shadow-card-hover: 0 24px 50px -18px rgba(30, 90, 255, 0.45), 0 0 0 1px rgba(96, 165, 250, 0.35) inset;
  --e180-shadow-glow: 0 0 0 1px rgba(96, 165, 250, 0.4), 0 0 36px -6px var(--e180-blue-glow);

  /* ---------- TYPOGRAPHY ---------- */
  --e180-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --e180-font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --e180-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --e180-text-xs: 0.75rem;
  --e180-text-sm: 0.875rem;
  --e180-text-base: 1rem;
  --e180-text-md: 1.125rem;
  --e180-text-lg: 1.375rem;
  --e180-text-xl: 1.75rem;
  --e180-text-2xl: 2.25rem;
  --e180-text-3xl: 2.875rem;
  --e180-text-4xl: 3.75rem;
  --e180-text-5xl: 4.75rem;

  --e180-lh-tight: 1.05;
  --e180-lh-snug: 1.2;
  --e180-lh-normal: 1.5;
  --e180-lh-relaxed: 1.65;

  --e180-tracking-eyebrow: 0.14em;
  --e180-tracking-tight: -0.02em;

  /* ---------- SPACING ---------- */
  --e180-space-1: 4px;
  --e180-space-2: 8px;
  --e180-space-3: 12px;
  --e180-space-4: 16px;
  --e180-space-5: 24px;
  --e180-space-6: 32px;
  --e180-space-7: 48px;
  --e180-space-8: 64px;
  --e180-space-9: 96px;
  --e180-space-10: 128px;

  /* ---------- RADII ---------- */
  --e180-radius-sm: 6px;
  --e180-radius: 12px;
  --e180-radius-lg: 16px;
  --e180-radius-xl: 22px;
  --e180-radius-pill: 999px;

  /* ---------- LAYOUT ---------- */
  --e180-content-narrow: 880px;
  --e180-content-wide: 1240px;
  --e180-header-height: 80px;
  --e180-bar-height: 38px;
}

/* =============================================================
   BASE — applied under .e180 scope
   ============================================================= */
.e180,
.e180 * { box-sizing: border-box; }

.e180 {
  font-family: var(--e180-font-sans);
  font-size: var(--e180-text-base);
  line-height: var(--e180-lh-normal);
  color: var(--e180-text);
  background: var(--e180-night);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.e180 h1, .e180 h2, .e180 h3, .e180 h4, .e180 h5, .e180 h6 { margin: 0; color: var(--e180-text-bright); }
.e180 h1, .e180 .h1 { font-weight: 700; font-size: var(--e180-text-4xl); line-height: var(--e180-lh-tight); letter-spacing: var(--e180-tracking-tight); }
.e180 h2, .e180 .h2 { font-weight: 700; font-size: var(--e180-text-3xl); line-height: var(--e180-lh-tight); letter-spacing: var(--e180-tracking-tight); }
.e180 h3, .e180 .h3 { font-weight: 600; font-size: var(--e180-text-xl); line-height: var(--e180-lh-snug); }
.e180 h4, .e180 .h4 { font-weight: 600; font-size: var(--e180-text-lg); line-height: var(--e180-lh-snug); }

.e180 p { margin: 0 0 var(--e180-space-4); line-height: var(--e180-lh-relaxed); }
.e180 strong, .e180 b { color: var(--e180-text-bright); font-weight: 700; }

.e180 .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--e180-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--e180-tracking-eyebrow);
  color: var(--e180-blue-light);
}
.e180 .eyebrow::before {
  content: ""; width: 22px; height: 1px; background: currentColor;
}

.e180 .mono { font-family: var(--e180-font-mono); font-feature-settings: "tnum" 1, "zero" 1; }

.e180 .container { max-width: var(--e180-content-wide); margin: 0 auto; padding: 0 var(--e180-space-5); }
.e180 .container--narrow { max-width: var(--e180-content-narrow); }

/* Buttons */
.e180 .btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--e180-font-sans); font-weight: 600;
  font-size: var(--e180-text-base);
  padding: 14px 26px; border-radius: var(--e180-radius-pill);
  border: 0; cursor: pointer; white-space: nowrap; line-height: 1;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  text-decoration: none;
}
.e180 .btn--primary { background: var(--e180-blue); color: #fff; box-shadow: 0 12px 28px -10px var(--e180-blue-glow); }
.e180 .btn--primary:hover { background: var(--e180-blue-bright); transform: translateY(-1px); }
.e180 .btn--ghost { background: transparent; color: var(--e180-text-bright); border: 1px solid rgba(255,255,255,0.18); }
.e180 .btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.32); }
.e180 .btn--dark { background: var(--e180-midnight); color: #fff; border: 1px solid var(--e180-hairline); }
.e180 .btn--dark:hover { background: var(--e180-deepwater); }
.e180 .btn--green { background: var(--e180-green); color: #fff; box-shadow: 0 12px 28px -10px rgba(100, 165, 70, 0.4); }
.e180 .btn--green:hover { background: var(--e180-green-dark); }
.e180 .btn--sm { padding: 10px 18px; font-size: var(--e180-text-sm); }

/* Inputs */
.e180 .input {
  height: 50px; padding: 0 22px; border-radius: var(--e180-radius-pill);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--e180-hairline);
  color: var(--e180-text-bright);
  font: 500 var(--e180-text-base) var(--e180-font-sans);
  outline: none; width: 100%;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.e180 .input::placeholder { color: var(--e180-text-muted); }
.e180 .input:focus { border-color: var(--e180-blue-light); box-shadow: 0 0 0 4px var(--e180-blue-tint); }

/* Card */
.e180 .card {
  background: linear-gradient(180deg, var(--e180-midnight) 0%, var(--e180-deepwater) 100%);
  border-radius: var(--e180-radius-xl);
  box-shadow: var(--e180-shadow-card);
  position: relative;
}

/* Chip */
.e180 .chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--e180-text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--e180-tracking-eyebrow);
  padding: 8px 16px; border-radius: var(--e180-radius-pill);
  background: var(--e180-blue-tint);
  color: var(--e180-blue-light);
  border: 1px solid var(--e180-hairline);
}
.e180 .chip--green { background: var(--e180-green-tint); color: #B6E2A0; border-color: rgba(100,165,70,0.3); }
.e180 .chip--solid { background: var(--e180-blue); color: #fff; border: 0; }