/* ============================================================
   Experite Gifting — Colors & Type
   ============================================================
   Brand: corporate gifting platform. Formal foundation, with a
   quirky gift-box mascot ("Wrappy") and confetti-pink accents.
   White-dominant canvas, royal-blue primary, teal CTAs.
   ============================================================ */

/* --- Web fonts ------------------------------------------------ */
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rammetto One";
  src: url("fonts/RammettoOne-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette ---------- */
  /* Primary — royal blue. The Experite "click here" colour. */
  --eg-blue-50:   #EFF6FF;
  --eg-blue-100:  #DBEAFE;
  --eg-blue-200:  #8095E4;   /* lavender accent (testimonial card) */
  --eg-blue-500:  #155DFC;   /* primary action — used on every CTA */
  --eg-blue-600:  #1447E6;   /* primary hover / pressed */
  --eg-blue-900:  #001965;   /* deep brand navy (Novo Nordisk swatch) */
  --eg-navy-radial-1: #2B388F;
  --eg-navy-radial-2: #0F1D49;
  --eg-navy-radial-3: #0C112C;   /* hero radial: 1 → 2 → 3 */

  /* Secondary — teal. Used for confirmations, "in stock", schedule-call. */
  --eg-teal-100:  #DAF4F2;
  --eg-teal-400:  #20AAA4;
  --eg-teal-500:  #1BC0B9;   /* the "Customisable" / View Details pill */
  --eg-teal-600:  #0E9E97;

  /* Confetti — pink. The party-popper accent. Backgrounds + chips. */
  --eg-pink-100:  #FDB7D9;
  --eg-pink-200:  #FCC5CA;
  --eg-pink-400:  #FF7BAC;
  --eg-pink-500:  #F94680;   /* the "numbers" banner background */

  /* Sunshine — yellow. Used for the Wrappy mascot, chat CTA, gradient stops. */
  --eg-yellow-400: #FEBD17;
  --eg-yellow-500: #FCC800;

  /* Alert — used for "out-of-stock" / refund / destructive. */
  --eg-red-500:   #C53434;

  /* ---------- Surfaces ---------- */
  --eg-bg:           #FFFFFF;     /* canvas */
  --eg-bg-alt:       #FAFAFA;     /* subtle panel */
  --eg-bg-soft:      #F3F4F6;     /* table-row stripe */
  --eg-bg-dark:      #000000;     /* footer */
  --eg-bg-hero:      radial-gradient(circle at 50% 30%, #2B388F 0%, #0F1D49 74%, #0C112C 100%);
  --eg-bg-warm-sunset: linear-gradient(135deg, #FCC800 0%, #FDB7D9 50%, #FCC5CA 100%); /* "Don't know where to start" panel */

  /* ---------- Text ---------- */
  --eg-fg:          #0A0A0A;      /* primary body — near-black */
  --eg-fg-strong:   #101828;      /* headings on light */
  --eg-fg-muted:    #364153;      /* secondary text */
  --eg-fg-subtle:   #6A7282;      /* tertiary / captions */
  --eg-fg-faint:    #90A1B9;      /* footer copy, placeholders */
  --eg-fg-inverse:  #FFFFFF;      /* text on dark / colored fills */
  --eg-fg-link:     #1447E6;

  /* ---------- Borders / dividers ---------- */
  --eg-border:        #E5E7EB;
  --eg-border-strong: #D1D5DC;
  --eg-border-soft:   #F3F4F6;
  --eg-border-dark:   #1D293D;   /* footer divider */

  /* ---------- Shadows ---------- */
  --eg-shadow-xs:   0 1px 2px -1px rgba(0,0,0,0.10), 0 1px 3px 0 rgba(0,0,0,0.10);
  --eg-shadow-sm:   0 4px 6px -4px rgba(0,0,0,0.10), 0 10px 15px -3px rgba(0,0,0,0.10);
  --eg-shadow-md:   0 4px 5px 0 rgba(0,0,0,0.25);
  --eg-shadow-lg:   0 4px 4px 0 rgba(0,0,0,0.14);
  --eg-shadow-pill: 0 1px 2px -1px rgba(0,0,0,0.10), 0 1px 3px 0 rgba(0,0,0,0.10); /* header pill */

  /* ---------- Radii ---------- */
  --eg-radius-xs:   4px;          /* tag / chip */
  --eg-radius-sm:   8px;          /* small input */
  --eg-radius-md:   10px;         /* card, input, button */
  --eg-radius-lg:   17px;         /* feature card (Why-we-exist tiles) */
  --eg-radius-xl:   29px;         /* search inset */
  --eg-radius-pill: 70px;         /* header capsule */
  --eg-radius-full: 9999px;       /* round avatar / badge */

  /* ---------- Spacing scale (4 px grid) ---------- */
  --eg-space-1:  4px;
  --eg-space-2:  8px;
  --eg-space-3:  12px;
  --eg-space-4:  16px;
  --eg-space-5:  20px;
  --eg-space-6:  24px;
  --eg-space-8:  32px;
  --eg-space-10: 40px;
  --eg-space-12: 48px;
  --eg-space-16: 64px;
  --eg-space-20: 80px;

  /* ---------- Layout ---------- */
  --eg-container:        1280px;
  --eg-page-gutter:      320px;   /* large page side-padding used on 1920 designs */
  --eg-header-height:    81px;

  /* ---------- Type families ---------- */
  --eg-font-display: "Rammetto One", "Geologica", "Geist", Georgia, serif;
  --eg-font-body:    "Geologica", "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --eg-font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* ---------- Type tokens ---------- */
  /* Display — Rammetto One. The quirky chunky headline face. */
  --eg-text-display-hero: 700 90px/105px var(--eg-font-body);   /* white hero on dark navy (Inter Bold 90/105) */
  --eg-text-display-xl:   400 60px/64px  var(--eg-font-display); /* Rammetto headlines */
  --eg-text-display-lg:   400 58px/58.2px var(--eg-font-display); /* "Don't know where to start?" */
  --eg-text-display-md:   400 30px/36px  var(--eg-font-display); /* section title "About Us" */

  /* Headings — Geologica */
  --eg-text-h1:  700 30px/36px var(--eg-font-body);
  --eg-text-h2:  700 24px/30px var(--eg-font-body);
  --eg-text-h3:  700 22px/26px var(--eg-font-body);
  --eg-text-h4:  700 18px/24px var(--eg-font-body);
  --eg-text-h5:  600 16px/24px var(--eg-font-body);

  /* Body */
  --eg-text-body-lg:  400 18px/28px var(--eg-font-body);
  --eg-text-body:     400 16px/24px var(--eg-font-body);
  --eg-text-body-sm:  400 14px/20px var(--eg-font-body);
  --eg-text-caption:  300 12px/16px var(--eg-font-body);

  /* Interactive */
  --eg-text-button:   500 14px/20px var(--eg-font-body);
  --eg-text-button-lg: 500 16px/24px var(--eg-font-body);

  /* Numerals (stat banner) — Rammetto */
  --eg-text-stat:    400 44px/52px var(--eg-font-display);

  /* ---------- Motion ---------- */
  --eg-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --eg-ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --eg-dur-fast:       120ms;
  --eg-dur:            200ms;
  --eg-dur-slow:       320ms;
}

/* ============================================================
   Semantic resets
   ============================================================ */
body {
  font: var(--eg-text-body);
  color: var(--eg-fg);
  background: var(--eg-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--eg-text-display-md); color: var(--eg-fg-strong); margin: 0; }
h2 { font: var(--eg-text-h1); color: var(--eg-fg-strong); margin: 0; }
h3 { font: var(--eg-text-h2); color: var(--eg-fg-strong); margin: 0; }
h4 { font: var(--eg-text-h3); color: var(--eg-fg-strong); margin: 0; }
h5 { font: var(--eg-text-h4); color: var(--eg-fg-strong); margin: 0; }
p  { font: var(--eg-text-body); color: var(--eg-fg); margin: 0; }

a {
  color: var(--eg-fg-link);
  text-decoration: none;
  transition: opacity var(--eg-dur) var(--eg-ease);
}
a:hover { opacity: 0.7; }

small { font: var(--eg-text-caption); color: var(--eg-fg-subtle); }
code, pre { font-family: var(--eg-font-mono); font-size: 13px; }

/* ============================================================
   Utility classes (used by previews + UI kit)
   ============================================================ */
.eg-display { font: var(--eg-text-display-md); color: var(--eg-blue-500); }
.eg-display--ink { color: var(--eg-fg-strong); }
.eg-display--white { color: var(--eg-fg-inverse); }

.eg-card {
  background: var(--eg-bg);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius-md);
  box-shadow: var(--eg-shadow-xs);
}

.eg-card--feature {
  background: var(--eg-blue-50);
  border: 2px solid var(--eg-blue-600);
  border-radius: var(--eg-radius-lg);
  box-shadow: var(--eg-shadow-md);
}

.eg-btn {
  font: var(--eg-text-button);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--eg-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--eg-dur) var(--eg-ease),
              opacity var(--eg-dur) var(--eg-ease),
              transform var(--eg-dur-fast) var(--eg-ease);
}
.eg-btn:active { transform: translateY(1px); }

.eg-btn--primary { background: var(--eg-blue-500); color: #fff; }
.eg-btn--primary:hover { background: var(--eg-blue-600); }

.eg-btn--teal    { background: var(--eg-teal-500); color: #fff; }
.eg-btn--teal:hover { background: var(--eg-teal-600); }

.eg-btn--ghost   { background: #fff; color: var(--eg-blue-600); border-color: var(--eg-teal-500); }
.eg-btn--ghost:hover { background: var(--eg-teal-100); }

.eg-btn--warm    { background: var(--eg-yellow-400); color: #fff; }

.eg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--eg-radius-full);
  font: var(--eg-text-button);
  background: var(--eg-pink-200);
  color: var(--eg-fg);
}
.eg-chip--teal { background: var(--eg-teal-100); color: var(--eg-fg); }
.eg-chip--blue { background: var(--eg-blue-100); color: var(--eg-fg); }

.eg-input {
  font: var(--eg-text-body-sm);
  padding: 10px 16px;
  border-radius: var(--eg-radius-md);
  border: 1px solid var(--eg-border-strong);
  background: #fff;
  color: var(--eg-fg);
}
.eg-input::placeholder { color: var(--eg-fg-faint); }
.eg-input:focus { outline: 2px solid var(--eg-blue-500); outline-offset: -1px; }