/* ============================================================
   KIBO homepage tokens: type, spacing, radii, shadows, motion.
   Brand colors (--kibo-*) come from src/styles/tokens.css.
   ============================================================ */

/* ---- Webfonts ---- */
/* Self-hosted: Poppins and Inter in /fonts/fonts.css, Adamina in src/styles/global.css. */

:root {
  /* ---- Foreground ---- */
  --fg-1: var(--kibo-dark-grey);
  --fg-2: rgba(46, 52, 62, 0.7);
  --fg-3: rgba(46, 52, 62, 0.5);
  --fg-on-dark: var(--kibo-white);
  --fg-on-yellow: var(--kibo-dark-grey);

  /* ---- Background ---- */
  --bg-app: var(--kibo-white);
  --bg-surface: var(--kibo-white);
  --bg-soft: var(--kibo-light-grey);
  --bg-inverse: var(--kibo-dark-grey);

  /* ---- Borders ---- */
  --border-card: rgba(9, 30, 66, 0.14);
  --border-strong: var(--kibo-dark-grey);
  --border-input: rgba(46, 52, 62, 0.4);

  /* ---- Shadows ---- */
  --shadow-sm:  0 0 6px rgba(255, 255, 255, 0.55);             /* light glow on imagery */
  --shadow-card: 0 0 16px rgba(0, 0, 0, 0.20);                 /* foundation cards */
  --shadow-nav:  0 4px 31px rgba(0, 0, 0, 0.15);               /* nav bar */
  --shadow-tab:  0 4px 20px rgba(0, 0, 0, 0.15);               /* floating tab bar */
  --shadow-dropdown: 0 0 22px rgba(46, 52, 62, 0.22);          /* mega-dropdown */
  --shadow-image: 0 0 14px rgba(46, 52, 62, 0.39);             /* iconography */

  /* ---- Radii ---- */
  --radius-xs: 2px;     /* search button, small chips */
  --radius-sm: 6px;     /* highlight bar */
  --radius-md: 8px;     /* example/spec cards */
  --radius-lg: 11px;    /* dropdown panel bottom */
  --radius-xl: 15px;    /* foundation cards */
  --radius-pill: 60px;  /* buttons, tab bar, tab items */
  --radius-circle: 50%;

  /* ---- Spacing scale (observed) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 36px;
  --space-8: 44px;
  --space-9: 64px;
  --space-10: 96px;

  /* ---- Type families ---- */
  --font-base: "Poppins", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ui:   "Inter", "Poppins", system-ui, sans-serif;
  --font-testimonial: "Adamina", "Iowan Old Style", Georgia, "Times New Roman", serif;

  /* ---- Type scale (px / line-height) ---- */
  /* Headings (Poppins, weight 700) */
  --fs-h1: 40px;  --lh-h1: 44px;   /* H1 */
  --fs-h2: 34px;  --lh-h2: 38px;   /* Section H2 */
  --fs-h3: 24px;  --lh-h3: 26px;   /* Card H1 */
  --fs-h4: 18px;  --lh-h4: 24px;   /* Card H2 */
  --fs-h5: 16px;  --lh-h5: 22px;   /* small heading / dropdown title */
  --fs-eyebrow: 19px; --lh-eyebrow: 22px; /* footer list title */

  /* Body (Poppins regular) */
  --fs-body: 16px; --lh-body: 20px;
  --fs-sm:   14px; --lh-sm:   20px;
  --fs-list: 14px; --lh-list: 24px;
  --fs-xs:   12px; --lh-xs:   20px;

  /* Testimonial (Adamina) */
  --fs-quote-md: 19px; --lh-quote-md: 27px;
  --fs-quote-sm: 14px; --lh-quote-sm: 33px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 600; /* the brand uses Semibold as its top weight */
  --fw-black: 900;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   Semantic helpers — opt-in by class
   ============================================================ */

.kibo-body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.kibo-h1 { font-family: var(--font-base); font-weight: var(--fw-semibold); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--fg-1); letter-spacing: -0.01em; }
.kibo-h2 { font-family: var(--font-base); font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--fg-1); letter-spacing: -0.005em; }
.kibo-h3 { font-family: var(--font-base); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--fg-1); }
.kibo-h4 { font-family: var(--font-base); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--fg-1); }
.kibo-h5 { font-family: var(--font-base); font-weight: var(--fw-semibold); font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--fg-1); }
.kibo-eyebrow { font-family: var(--font-base); font-weight: var(--fw-semibold); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); color: var(--fg-1); }

.kibo-p   { font-family: var(--font-base); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); }
.kibo-sm  { font-family: var(--font-base); font-size: var(--fs-sm);   line-height: var(--lh-sm);   color: var(--fg-1); }
.kibo-xs  { font-family: var(--font-base); font-size: var(--fs-xs);   line-height: var(--lh-xs);   color: var(--fg-2); }

.kibo-quote   { font-family: var(--font-testimonial); font-size: var(--fs-quote-md); line-height: var(--lh-quote-md); color: var(--fg-1); }
.kibo-attrib  { font-family: var(--font-testimonial); font-size: var(--fs-quote-sm); line-height: var(--lh-quote-sm); color: var(--fg-1); }

.kibo-ui      { font-family: var(--font-ui); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--fg-1); }
.kibo-ui-label { font-family: var(--font-ui); font-weight: var(--fw-medium); font-size: 14px; line-height: 1; color: var(--fg-1); }

/* ---- Button & control primitives (Poppins Medium 14) ---- */
.kibo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-weight: var(--fw-medium);
  font-size: 14px;
  line-height: 1;
  color: var(--fg-1);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.kibo-btn--primary { background: var(--kibo-button); }
.kibo-btn--primary:hover { background: #ffd933; }
.kibo-btn--primary:active { transform: translateY(1px); }
.kibo-btn--outline { border-color: var(--kibo-dark-grey); background: transparent; }
.kibo-btn--outline:hover { background: var(--kibo-dark-grey); color: var(--kibo-white); }
.kibo-btn--disabled,
.kibo-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.kibo-btn--lg { height: 44px; padding: 0 24px; font-size: 16px; }