/* Noto Sans Mono is now self-hosted via next/font/google (app/layout.jsx);
   the render-blocking @import has been removed. */

/* ============================================================
   GALYA — Compatibility bridge
   The marketing site (site.css + *.jsx) was authored against a
   sibling Galya design system that exposed short-named tokens
   (--teal, --text-h1, --space-24) and a Tailwind-style 4px scale.
   The bound design system ships --galya-* / --color-* tokens and
   a compact --space-1..9 scale. This file re-publishes the
   vocabulary the site expects, mapped onto the bound tokens so
   nothing is invented and the brand stays faithful.
   Load order: <DS>/styles.css  →  bridge.css  →  site.css
   ============================================================ */

:root {
  /* ---- Palette (short aliases → bound brand tokens) ---------- */
  --smoke:       var(--galya-white-smoke);
  --alabaster:   var(--galya-alabaster);
  --silver:      var(--galya-silver);
  --silver-mid:  var(--galya-silver-mid);
  --grey:        var(--galya-grey);
  --teal:        var(--galya-teal);
  --granite:     #2b2e2c;
  --gunmetal:    #353535;
  --carbon:      var(--galya-carbon);
  --violet:      var(--galya-violet);

  /* ---- Mono family (data-viz annotations) ------------------- */
  --font-mono: 'Noto Sans Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Type role tokens (→ bound 1.25 scale) ---------------- */
  --text-display: var(--size-display); /* 96 */
  --text-h1:      var(--size-h1);      /* 72 */
  --text-h2:      var(--size-h2);      /* 56 */
  --text-h3:      var(--size-h3);      /* 40 */
  --text-h4:      var(--size-h4);      /* 28 */
  --text-h5:      var(--size-h5);      /* 20 */
  --text-lg:      18px;                /* lede (between body & h5) */
  --text-body:    var(--size-body);    /* 16 */
  --text-sm:      var(--size-body-sm); /* 14 */
  --text-caption: var(--size-caption); /* 12 */
  --text-label:   var(--size-label);   /* 10 */
  --leading-body: var(--leading-normal);

  /* ---- Spacing — Tailwind-style 4px scale (N x 4px) --------- */
  /* Overrides the bound compact scale on the shared 1..9 names; */
  /* the site relies on this exact ramp. DS internals only use   */
  /* 2-4 at any visible scale, so the shift is immaterial.       */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Motion aliases --------------------------------------- */
  --ease-default: var(--ease-standard);
  --transition-colors: color var(--duration-base) var(--ease-standard),
                       background var(--duration-base) var(--ease-standard),
                       border-color var(--duration-base) var(--ease-standard);

  /* ---- Stacking --------------------------------------------- */
  --z-dropdown: 100;
  --z-popover:  200;

  /* ---- Primary CTA: near-black (green reserved as a sparing accent) */
  --pine:      #191919;
  --pine-dark: #000000;
}

/* ============================================================
   Button class bridge
   The bound Button renders .galya-btn--*; the site themes a few
   CTAs through class hooks the sibling system understood. Re-wire
   them here against the bound component classes.
   ============================================================ */

/* Primary becomes the brand pine CTA across the site. */
.gw .galya-btn--primary { background: var(--pine); color: var(--smoke); }
.gw .galya-btn--primary:hover:not([disabled]) { background: var(--pine-dark); box-shadow: none; }
.gw .galya-btn--primary:active:not([disabled]) { background: var(--pine-dark); box-shadow: none; }

/* On the violet CTA / blog panels: light fill + ghost outline. */
.gw .galya-btn.gw-btn-on-violet { background: var(--smoke); color: var(--carbon); border-color: transparent; }
.gw .galya-btn.gw-btn-on-violet:hover:not([disabled]) { background: #d9d8d8; box-shadow: none; }
.gw .galya-btn.gw-btn-ghost-violet { background: transparent; color: var(--smoke); border-color: rgba(243,242,242,.4); }
.gw .galya-btn.gw-btn-ghost-violet:hover:not([disabled]) { background: rgba(243,242,242,.12); box-shadow: none; }

/* Badges read as pills per the brand spec (defensive). */
.galya-badge { border-radius: var(--radius-full); }