/* ============================================================
   EFOGI — A Business Development Event Management Firm
   BRAND & DESIGN SYSTEM  ·  v1.0 · June 2026
   The single source of truth for how EFOGI looks & shows up.
   ------------------------------------------------------------
   Foundation: Montserrat · Ink + White + a rare strike of Gold
   ============================================================ */

/* ---- Brand typeface: Montserrat (geometric, confident, premium) ----
   One family carries everything; hierarchy = weight + tracking. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap");

:root {
  /* ============ COLOR — CORE ============ */
  /* The EFOGI palette is FOUR colors — Gold, Orange, Black, White —
     sampled from the professionally-designed logo & business card. */
  --efogi-gold:         #F6C500; /* PRIMARY brand color */
  --efogi-orange:       #E08E00; /* the growth-mark orange */
  --efogi-amber:        #E08E00; /* alias of orange (compat) */
  --efogi-deep-orange:  #C77D00; /* functional darker shade — hover/accents only */

  /* The logo "O" disc blends gold → orange. For the mark & disc accents only. */
  --efogi-gradient:     linear-gradient(135deg, #F6C500 0%, #E08E00 100%); /* @kind color */
  --efogi-gradient-soft:linear-gradient(135deg, #F6C500 0%, #E08E00 100%); /* @kind color */

  /* ============ COLOR — NEUTRALS ============ */
  /* The brand is three colors — Gold, Orange, Black — on white & warm grays. */
  --efogi-ink:        #111111; /* BLACK — primary dark backgrounds, type & reverse blocks */
  --efogi-charcoal:   #2B2B2B; /* soft black — body text, secondary dark */
  --efogi-slate:      #888890; /* muted text, captions, lines */
  --efogi-mist:       #E7E8EA; /* borders, dividers, fills */
  --efogi-cloud:      #F6F6F4; /* section & card surfaces */
  --efogi-white:      #FFFFFF; /* base background, reverse type */

  /* ============ SEMANTIC ROLES ============ */
  --color-bg:           var(--efogi-white);
  --color-surface:      var(--efogi-cloud);
  --color-border:       var(--efogi-mist);
  --color-ink:          var(--efogi-ink);
  --color-text:         var(--efogi-charcoal);
  --color-text-muted:   var(--efogi-slate);
  --color-primary:      var(--efogi-gold);
  --color-accent:       var(--efogi-deep-orange);
  --color-on-primary:   var(--efogi-ink);
  --color-on-dark:      var(--efogi-white);

  /* ============ TYPOGRAPHY ============ */
  --font-brand: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Weights — mirror the business card: Black display, Light intros */
  --w-light: 300;     /* @kind font */
  --w-regular: 400;   /* @kind font */
  --w-medium: 500;    /* @kind font */
  --w-semibold: 600;  /* @kind font */
  --w-bold: 700;      /* @kind font */
  --w-extrabold: 800; /* @kind font */
  --w-black: 900;     /* @kind font */

  /* Tracking — display gets tight, labels get wide caps */
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0em;
  --tracking-label:   0.2em;   /* +20% caps for eyebrows/labels */

  /* Type scale (px steps from the bible) */
  --text-display-lg: 82px;
  --text-display:    64px;
  --text-display-sm: 46px;
  --text-h1:         33px;
  --text-h2:         20px;
  --text-body-lg:    16px;
  --text-body:       13px;
  --text-label:      10px;
  --text-small:      11px;

  --leading-display: 0.98;
  --leading-heading: 1.1;
  --leading-body:    1.6;

  /* ============ SPACING — 8px baseline ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --gutter: 24px;        /* 12-col grid gutter */
  --page-margin: 0.72in; /* print page margin */

  /* ============ RADII ============ */
  --radius-btn:  8px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* ============ ELEVATION ============ */
  --shadow-sm: 0 1px 2px rgba(10,10,10,.06), 0 1px 3px rgba(10,10,10,.10);
  --shadow-md: 0 6px 18px rgba(10,10,10,.10), 0 2px 6px rgba(10,10,10,.06);
  --shadow-lg: 0 22px 48px rgba(10,10,10,.20);
}

/* ============================================================
   OPT-IN HELPERS  (scoped under .efogi — never global resets)
   ============================================================ */
.efogi {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — covers, hero, section titles */
.efogi-display {
  font-family: var(--font-brand);
  font-weight: var(--w-black);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: var(--leading-display);
}

/* Heading 1 */
.efogi-h1 {
  font-family: var(--font-brand);
  font-weight: var(--w-extrabold);
  font-size: var(--text-h1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-heading);
}

/* Label / eyebrow — wide caps */
.efogi-label {
  font-family: var(--font-brand);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-size: var(--text-label);
}

/* Body */
.efogi-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* Gold text — ONLY on ink/dark (gold-on-white fails AA) */
.efogi-gold-text { color: var(--efogi-gold); }

/* Gradient fill helpers */
.efogi-gradient-bg { background: var(--efogi-gradient); }
.efogi-gradient-text {
  background: var(--efogi-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Buttons (radius 8px, one primary per view) ---- */
.efogi-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-brand);
  font-weight: var(--w-bold);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  border: 0; cursor: pointer; line-height: 1;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.efogi-btn-primary  { background: var(--efogi-gold); color: var(--efogi-ink); }
.efogi-btn-primary:hover { background: var(--efogi-deep-orange); color: #fff; }
.efogi-btn-secondary{ background: var(--efogi-ink); color: #fff; }
.efogi-btn-outline  { background: transparent; color: var(--efogi-ink); box-shadow: inset 0 0 0 2px var(--efogi-ink); }
.efogi-btn-ondark   { background: var(--efogi-gold); color: var(--efogi-ink); }
.efogi-btn-ghost    { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }

/* ---- Pills / tags ---- */
.efogi-pill {
  display: inline-flex; align-items: center;
  font-family: var(--font-brand);
  font-weight: var(--w-semibold);
  font-size: 10px; letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 7px 14px; border-radius: var(--radius-pill);
}
.efogi-pill-solid   { background: var(--efogi-ink); color: #fff; }
.efogi-pill-gold    { background: var(--efogi-gold); color: var(--efogi-ink); }
.efogi-pill-outline { background: transparent; color: var(--efogi-charcoal); box-shadow: inset 0 0 0 1.5px var(--efogi-mist); }

/* ---- Cards ---- */
.efogi-card {
  background: var(--efogi-cloud);
  border: 1px solid var(--efogi-mist);
  border-radius: var(--radius-card);
}
.efogi-card-dark { background: var(--efogi-ink); color: #fff; border: 0; border-radius: var(--radius-card); }
.efogi-card-accent { background: var(--efogi-gradient); color: var(--efogi-ink); border: 0; border-radius: var(--radius-card); }