/* tokens: design-system/tokens.css (inlined by mirror_build.py) */
/* GoBeze Data Strategies — design tokens (v1, 2026-07-15)
   Distilled from the live site (ultimate authority; capture ../assets/site-capture/)
   + brand canon projects/gobeze-data/docs/BRAND.md ("Tigrayan Indigo").
   Light-only: the site has no dark mode — the dark surface is the indigo section theme. */

:root {
  /* ---- palette ---- */
  --gb-indigo: #1B3A5C;          /* primary — headings, primary buttons, footer text */
  --gb-indigo-hover: #14304D;    /* primary button hover (from the site's Custom CSS panel) */
  --gb-indigo-section: #1A3A5B;  /* dark section-theme background (site stores this one step off primary) */
  --gb-saffron: #D4A017;         /* accent — eyebrows, arrow links; not for long-form text (fails AA) */
  --gb-offwhite: #F3F3F2;        /* section background (site value; brand canon wrote #F4F4F3) */
  --gb-offwhite-text: #F4F4F3;   /* inverted text + button labels on indigo */
  --gb-tan: #D9C9B4;             /* supporting surface — body bg, process section (gabi textile) */
  --gb-ink: #1A1A1A;             /* body text; white-bold-theme button bg */
  --gb-text-secondary: #6C6967;  /* captions, meta */
  --gb-border: #DAD9D9;          /* borders, dividers (brand canon; sparse on live) */

  /* ---- depth tints (added 2026-09-15 for the shared UI layer; surfaces need more than two flat colors) ---- */
  --gb-indigo-tint-1: #E9EEF4;   /* washed indigo — raised surfaces, chips */
  --gb-indigo-tint-2: #C8D4E2;   /* mid tint — rules, inactive states */
  --gb-saffron-tint: #F7E8B8;    /* saffron wash — highlights, never text */

  /* ---- motion ---- */
  --gb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* the site's hero fade curve */
  --gb-container: 1100px;        /* section content width (Capabilities list, home grid) */

  /* ---- type ---- */
  --gb-font-heading: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --gb-font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  /* observed scale (live, desktop) */
  --gb-h1-size: 4rem;            /* 64px, weight 900, lh 1.05, ls -0.02em */
  --gb-h2-size: 2.5rem;          /* 40px, weight 800, lh 1.15 */
  --gb-h3-size: 1.05rem;         /* 16.8px, weight 700 — card/section titles */
  --gb-lede-size: 1.25rem;       /* 20px / 28px, weight 400 */
  --gb-body-size: 1.05rem;       /* 16.8px / 26px, weight 400 */
  --gb-small-size: 0.92rem;      /* ~14.7px / 22px */
  --gb-caption-size: 0.9rem;     /* 14.4px, --gb-text-secondary */
  --gb-statement-size: 1.384rem; /* 22.1px / 1.5, weight 300 — large light statements */
  --gb-eyebrow-size: 0.85rem;    /* 12.5–13.6px, weight 700, uppercase, saffron */
  --gb-nav-size: 1rem;           /* 16px, IBM Plex Sans 300 */

  /* ---- components ---- */
  --gb-btn-radius: 4px;          /* hero/section primary buttons; header CTA is square (0) */
  --gb-btn-pad: 16px 32px;       /* header CTA: 16px 20.8px */
}

/* ==========================================================================
   GoBeze shared UI layer — foundations only (main branch, 2026-09-15)
   Injected by mirror_build.py into every page as /assets/gobeze-ui.css, after
   the site's own stylesheets. The build prepends design-system/tokens.css, so
   every --gb-* variable used here is the design system's single source.

   INERT BY DESIGN on main: this file defines classes under the .gbz-* prefix
   only. No existing markup carries these classes, no element or state selector
   is styled, and no motion is declared, so the rendered site is unchanged.
   Motion, page transitions and the brand curtain are proposals on the
   ui-proposal branch (ui/proposal/).
   ========================================================================== */

/* Layout ------------------------------------------------------------------ */
.gbz-container { width: min(var(--gb-container), calc(100% - 48px)); margin-inline: auto; }
.gbz-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.gbz-section { padding-block: clamp(56px, 8vw, 104px); }
.gbz-section--tight { padding-block: clamp(36px, 5vw, 64px); }

/* Type -------------------------------------------------------------------- */
.gbz-eyebrow {
  font-family: var(--gb-font-heading); font-weight: 700; font-size: var(--gb-eyebrow-size);
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--gb-saffron); margin: 0 0 20px;
}
.gbz-h1 { font-family: var(--gb-font-heading); font-weight: 900; font-size: clamp(2.4rem, 6vw, var(--gb-h1-size)); line-height: 1.05; letter-spacing: -.02em; color: var(--gb-indigo); margin: 0 0 24px; text-wrap: balance; }
.gbz-h2 { font-family: var(--gb-font-heading); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, var(--gb-h2-size)); line-height: 1.15; letter-spacing: -.015em; color: var(--gb-indigo); margin: 0 0 16px; text-wrap: balance; }
.gbz-lede { font-family: var(--gb-font-body); font-size: var(--gb-lede-size); line-height: 1.45; color: var(--gb-ink); max-width: 64ch; margin: 0 0 32px; }

/* Controls ---------------------------------------------------------------- */
.gbz-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--gb-font-heading); font-weight: 700; font-size: 1rem; letter-spacing: .3px;
  padding: var(--gb-btn-pad); border-radius: var(--gb-btn-radius); text-decoration: none; border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gbz-btn--primary { background: var(--gb-indigo); color: var(--gb-offwhite-text); }
.gbz-btn--primary:hover { background: var(--gb-indigo-hover); color: var(--gb-offwhite-text); }
.gbz-btn--inverse { background: var(--gb-offwhite-text); color: var(--gb-indigo); }
.gbz-btn--inverse:hover { background: #FFFFFF; color: var(--gb-indigo); }
.gbz-btn--ghost { background: transparent; color: var(--gb-indigo); border-color: var(--gb-indigo-tint-2); }
.gbz-btn--ghost:hover { border-color: var(--gb-indigo); }
.gbz-btn .gbz-arrow { color: var(--gb-saffron); }

.gbz-link { font-family: var(--gb-font-heading); font-weight: 700; color: var(--gb-indigo); text-decoration: none; border-bottom: 2px solid var(--gb-saffron); padding-bottom: 2px; transition: color .2s ease; }
.gbz-link:hover { color: var(--gb-saffron); }

.gbz-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--gb-indigo-tint-1); color: var(--gb-indigo); font-family: var(--gb-font-heading); font-weight: 700; font-size: .85rem; padding: 6px 12px; border-radius: 3px; }
.gbz-chip b { color: var(--gb-saffron); font-weight: 700; }

/* Surfaces ---------------------------------------------------------------- */
.gbz-card { background: #FFFFFF; border: 1px solid var(--gb-border); padding: 28px; }
.gbz-card--accent { border-left: 4px solid var(--gb-saffron); }
.gbz-panel { background: var(--gb-indigo-section); color: var(--gb-offwhite-text); padding: clamp(32px, 5vw, 48px); }
.gbz-panel .gbz-eyebrow { color: var(--gb-saffron); }
.gbz-panel .gbz-h2, .gbz-panel .gbz-lede { color: var(--gb-offwhite-text); }
.gbz-rail { width: 22px; height: 3px; background: var(--gb-saffron); }