/* ============================================================
   Enomy Design System — Colors & Type
   ============================================================ */

/* ---------- Webfonts (self-hosted Open Sans) ---------- */
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Light.ttf") format("truetype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-LightItalic.ttf") format("truetype");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Regular.ttf") format("truetype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Italic.ttf") format("truetype");       font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Medium.ttf") format("truetype");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-SemiBold.ttf") format("truetype");     font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-Bold.ttf") format("truetype");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-BoldItalic.ttf") format("truetype");   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-ExtraBold.ttf") format("truetype");    font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/OpenSans-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }

/* Condensed and SemiCondensed cuts are available — Enomy uses them
   sparingly for ad headlines that need horizontal compression. Refer
   to them via the explicit family name. */
@font-face { font-family: "Open Sans SemiCondensed"; src: url("fonts/OpenSans_SemiCondensed-Regular.ttf") format("truetype");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans SemiCondensed"; src: url("fonts/OpenSans_SemiCondensed-Medium.ttf") format("truetype");   font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans SemiCondensed"; src: url("fonts/OpenSans_SemiCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans SemiCondensed"; src: url("fonts/OpenSans_SemiCondensed-Bold.ttf") format("truetype");     font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans SemiCondensed"; src: url("fonts/OpenSans_SemiCondensed-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans Condensed";     src: url("fonts/OpenSans_Condensed-Regular.ttf") format("truetype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans Condensed";     src: url("fonts/OpenSans_Condensed-SemiBold.ttf") format("truetype");     font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans Condensed";     src: url("fonts/OpenSans_Condensed-Bold.ttf") format("truetype");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans Condensed";     src: url("fonts/OpenSans_Condensed-ExtraBold.ttf") format("truetype");    font-weight: 800; font-style: normal; font-display: swap; }

/* ---------- Monospace (JetBrains Mono — the real family, from Google's CDN).
   When the licensed/self-hosted font file is uploaded to fonts/, swap these
   src URLs for local("fonts/JetBrainsMono-*.woff2"). Do NOT change the family. */
@font-face { font-family: "JetBrains Mono"; src: url("https://fonts.gstatic.com/s/jetbrainsmono/v24/tDba2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yK1jPVmUsaaDhw.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("https://fonts.gstatic.com/s/jetbrainsmono/v24/tDba2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yK1jPVmUsaaDhw.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("https://fonts.gstatic.com/s/jetbrainsmono/v24/tDba2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yK1jPVmUsaaDhw.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ----------------------------------------------------------
     COLOR PALETTE
     ----------------------------------------------------------
     Enomy's brand is anchored by a confident purple. The light
     brand purple (#8175ce) is the official primary; deeper
     purples are used as the canvas of marketing material and
     of the mobile app hero areas.
     ---------------------------------------------------------- */

  /* Primary purple scale */
  --purple-50:  #f1efff;
  --purple-100: #e3dfff;
  --purple-200: #c8c0f4;
  --purple-300: #aca1e6;
  --purple-400: #9387d8;
  --purple-500: #8175ce;   /* BRAND PRIMARY */
  --purple-600: #6d5fc1;
  --purple-700: #5847a8;
  --purple-800: #3f2e85;
  --purple-900: #2a1d63;
  --purple-950: #1a1140;

  /* Deep brand purple used as ad / marketing canvas */
  --brand-ink:        #3a1f8f;   /* the saturated marketing purple */
  --brand-ink-deep:   #2a1572;   /* depth gradient stop */

  /* Neutrals — slightly cool to live alongside the purple */
  --bg-app:        #f0f0ff;      /* light app background — matches production marketplace body bg */
  --bg-surface:    #ffffff;
  --bg-muted:      #ecebf5;
  --border-soft:   #e3e1ee;
  --border-strong: #c8c4dc;

  --fg-1: #1c1b2a;   /* primary text */
  --fg-2: #4c4a63;   /* secondary text */
  --fg-3: #7f7d96;   /* tertiary / hint */
  --fg-inverse: #ffffff;

  /* Accent / semantic */
  --accent-yellow: #ffe61a;     /* highlight emphasis (used in ad headlines) */
  --accent-green:  #25d366;     /* WhatsApp green */
  --accent-naira:  #008753;     /* Nigerian flag green badge */

  --success: #1f9d55;
  --warning: #d98a00;
  --danger:  #d34c5e;
  --info:    #4e7dd1;

  /* ---------- Type ---------- */
  /* Open Sans is the brand font — self-hosted from fonts/.
     Headlines use 700–800, body uses 400–600. Body default is 14/24
     to match the production marketplace stylesheet. The SemiCondensed
     cut is reserved for marketing-creative headlines that need
     horizontal compression. */
  --font-display:   "Open Sans", system-ui, -apple-system, sans-serif;
  --font-body:      "Open Sans", system-ui, -apple-system, sans-serif;
  --font-condensed: "Open Sans SemiCondensed", "Open Sans", system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --fs-display: 48px;
  --fs-h1:      36px;
  --fs-h2:      28px;
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-body:    14px;     /* matches production: 14px / 24px line-height */
  --fs-small:   13px;
  --fs-caption: 11px;

  --lh-tight: 1.1;   /* @kind other */
  --lh-snug:  1.25;  /* @kind other */
  --lh-base:  1.5;   /* @kind other */
  --lh-loose: 1.7;   /* @kind other */

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;     /* default for inputs */
  --radius-lg: 20px;     /* default for cards */
  --radius-xl: 28px;     /* hero panels, mobile sheets */
  --radius-2xl: 40px;
  --radius-full: 9999px;

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

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(26, 17, 64, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 17, 64, 0.06), 0 1px 2px rgba(26, 17, 64, 0.04);
  --shadow-md: 0 8px 20px rgba(26, 17, 64, 0.08), 0 2px 6px rgba(26, 17, 64, 0.04);
  --shadow-lg: 0 18px 40px rgba(26, 17, 64, 0.12), 0 4px 12px rgba(26, 17, 64, 0.06);
  --shadow-focus: 0 0 0 4px rgba(129, 117, 206, 0.28);

  /* Brand-tinted shadow (used under purple CTAs) */
  --shadow-brand: 0 12px 30px rgba(88, 71, 168, 0.35);
}

/* ============================================================
   Semantic typography
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 24px;
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.small  { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-3); letter-spacing: var(--tracking-wide); }
.eyebrow {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--purple-600);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Helpful utility colors */
.text-brand  { color: var(--purple-500); }
.text-ink    { color: var(--brand-ink); }
.text-muted  { color: var(--fg-3); }
.bg-brand    { background: var(--purple-500); color: var(--fg-inverse); }
.bg-ink      { background: var(--brand-ink); color: var(--fg-inverse); }