/* Ekonbee Design System — Colors & Type Tokens
   Derived from ekonbee_beeta/assets/css/main.css */

/* ---------- Fonts ---------- */
/* Self-hosted in fonts/ — but the original site uses Google Fonts, so we
   load them from the CDN here for convenience and fidelity. */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Raleway:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  /* -------- Type families -------- */
  --font-default: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Raleway", sans-serif;
  --font-nav:     "Inter", sans-serif;

  /* -------- Colors: brand palette (pulled from the logo gradient) -------- */
  --ekb-purple:   #aa3baa; /* primary brand link / icon color */
  --ekb-orange:   #ee9002; /* accent CTA */
  --ekb-red:      #ff5821; /* nav hover / hot accent */
  --ekb-blue:     #0492ce; /* secondary, info blocks (why-box), dropdown hover */
  --ekb-sky:      #2db6fa; /* blue service-card underline */
  --ekb-yellow:   #ffc107; /* star rating */
  --ekb-magenta:  #ff2d8a; /* highlight from logo gradient */

  /* Logo gradient stops (left → right) */
  --ekb-grad-1: #fdb813; /* golden yellow */
  --ekb-grad-2: #f26722; /* orange */
  --ekb-grad-3: #e53e3e; /* red */
  --ekb-grad-4: #c1268c; /* magenta */
  --ekb-grad-5: #7e3fbf; /* purple */
  --ekb-grad-6: #2db6fa; /* cyan strap */

  /* -------- Colors: neutrals (from main.css) -------- */
  --bg:               #ffffff;
  --bg-section:       #f1f7ff; /* section default bg */
  --bg-dark:          #1d1918; /* dark-background preset */
  --surface:          #ffffff;
  --surface-dark:     #39312f;
  --surface-alt:      #f7f9fc;

  --fg:               #313030; /* default text */
  --fg-heading:       #473d3a; /* heading color */
  --fg-muted:         #6b6462;
  --fg-on-dark:       #ffffff;
  --contrast:         #ffffff;

  --border:           rgba(49, 48, 48, 0.15);
  --border-strong:    rgba(49, 48, 48, 0.30);

  /* -------- Semantic -------- */
  --color-primary:    var(--ekb-purple);
  --color-accent:     var(--ekb-orange);
  --color-info:       var(--ekb-blue);
  --color-success:    #059652;
  --color-danger:     #df1529;
  --color-warning:    var(--ekb-yellow);

  --link:             var(--ekb-purple);
  --link-hover:       color-mix(in srgb, var(--ekb-orange), transparent 25%);

  /* Nav */
  --nav-fg:                 #212529;
  --nav-fg-hover:           var(--ekb-red);
  --nav-dropdown-bg:        #ffffff;
  --nav-dropdown-fg:        #212529;
  --nav-dropdown-fg-hover:  var(--ekb-blue);

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

  --section-y: 60px;   /* section padding-y */
  --section-y-lg: 80px;

  /* -------- Radii -------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* -------- Shadows -------- */
  --shadow-sm:  0 2px 15px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 0 18px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 0 25px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 0 30px rgba(0, 0, 0, 0.10);

  /* -------- Type scale (semantic) -------- */
  --fs-display: 48px; /* hero h2 */
  --fs-h1:      34px;
  --fs-h2:      32px; /* section title */
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-h5:      18px;
  --fs-body:    16px;
  --fs-sm:      15px;
  --fs-xs:      14px;
  --fs-nav:     15px;

  --lh-tight:   1.2;
  --lh-body:    1.6;
  --lh-loose:   1.75;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* -------- Motion -------- */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out:ease-in-out;
  --dur-fast:   0.2s;
  --dur-base:   0.3s;
  --dur-slow:   0.5s;

  /* -------- Gradients -------- */
  --grad-brand: linear-gradient(90deg,
      var(--ekb-grad-1) 0%,
      var(--ekb-grad-2) 22%,
      var(--ekb-grad-3) 44%,
      var(--ekb-grad-4) 64%,
      var(--ekb-grad-5) 85%);
  --grad-brand-diag: linear-gradient(135deg,
      var(--ekb-grad-1) 0%,
      var(--ekb-grad-3) 45%,
      var(--ekb-grad-5) 100%);
}

/* ---------- Base ---------- */
body, .p {
  font-family: var(--font-default);
  color: var(--fg);
  background-color: var(--bg);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-heading);
  color: var(--fg-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.h1, h1 { font-size: var(--fs-h1); }
.h2, h2 { font-size: var(--fs-h2); }
.h3, h3 { font-size: var(--fs-h3); }
.h4, h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.h5, h5 { font-size: var(--fs-h5); font-weight: var(--fw-bold); }

.display  { font-family: var(--font-heading); font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: 1.1; color: var(--fg-heading); }
.eyebrow  { font-family: var(--font-nav); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ekb-purple); }
.lead     { font-size: 20px; line-height: 1.55; color: var(--fg); }
.p        { font-size: var(--fs-body); }
.p-sm     { font-size: var(--fs-sm); color: var(--fg-muted); }
.nav-link { font-family: var(--font-nav); font-size: var(--fs-nav); color: var(--nav-fg); }

a         { color: var(--link); text-decoration: none; transition: color var(--dur-base); }
a:hover   { color: var(--link-hover); }

/* ---------- Utility: brand gradient text ---------- */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}