/*
  Canonical GRB Labs web theme tokens.
  Website and browser tools consume these variables; change them here once.
  The accent values mirror packages/grb-design-tokens/src/grb_design_tokens/tokens.json
  for native apps.
*/
@import url("https://use.typekit.net/aym3zfj.css");

:root {
  /*
    Cross-platform palette. These values mirror the canonical native tokens in
    packages/grb-design-tokens/src/grb_design_tokens/tokens.json exactly.
    Website and tool CSS consume semantic variables rather than inventing
    near-black or near-grey product-local colours.
  */
  --grb-color-background: #101114;
  --grb-color-surface: #15171b;
  --grb-color-surface-raised: #181a1f;
  --grb-color-surface-alternate: #191c21;
  --grb-color-surface-overlay: #202329;
  --grb-color-surface-interactive: #22252b;
  --grb-color-surface-interactive-hover: #2a2e35;
  --grb-color-surface-selected: #262a31;
  --grb-color-surface-status: #4b505b;
  --grb-color-border: #343842;
  --grb-color-border-subtle: #2c3038;
  --grb-color-border-strong: #383c45;
  --grb-color-border-emphasis: #4a5060;
  --grb-color-text: #f5f5f5;
  --grb-color-text-strong: #cdd1d8;
  --grb-color-text-muted: #9ba0aa;
  --grb-color-text-disabled: #6f7480;
  --grb-color-text-inverse: #101114;
  --grb-color-text-on-color: #ffffff;
  --grb-color-ion-blue: #2c65f6;
  --grb-accent: var(--grb-color-ion-blue);
  --grb-accent-hover: #3a72ff;
  --grb-color-action-primary: #f5f5f5;
  --grb-color-action-primary-hover: #dfe1e5;
  --grb-color-action-primary-text: #101114;
  --grb-color-success: #2f9e63;
  --grb-color-warning: #c89631;
  --grb-color-danger: #c8424f;
  --grb-color-selection: #263d78;
  --grb-color-row-hover: #252a33;
  --grb-color-control-handle-disabled: #3a3e48;
  --grb-color-control-handle-border-disabled: #2b2f37;
  --grb-accent-soft: color-mix(in srgb, var(--grb-accent) 16%, transparent);
  --grb-accent-focus: color-mix(in srgb, var(--grb-accent) 30%, transparent);

  /* Canonical brand typography. */
  --grb-font-body: "source-sans-pro", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --grb-font-editorial: "freight-text-pro", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --grb-font-interface: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --grb-button-font-family: var(--grb-font-body);

  /* Universal primary navigation. */
  --grb-primary-nav-gap: 30px;
  --grb-primary-nav-compact-gap: 18px;
  --grb-primary-nav-mobile-gap: 14px;
  --grb-primary-nav-narrow-gap: 10px;
  --grb-primary-nav-font-family: var(--grb-font-body);
  --grb-primary-nav-font-size: 14.4px;
  --grb-primary-nav-font-weight: 600;
  --grb-primary-nav-letter-spacing: .08em;
  --grb-primary-nav-color: #ffffff;

  /* Canonical identity headers. Optical strokes differ with rendered size. */
  --grb-site-header-cube-stroke: 2.9px;
  --grb-tool-header-height: 72px;
  --grb-tool-header-cube-size: 43px;
  --grb-tool-header-cube-stroke: 2px;
  --grb-tool-header-identity-gap: 10px;
  --grb-tool-header-wordmark-width: 87px;
  --grb-tool-header-copy-offset: 3px;
  --grb-tool-header-product-gap: 7px;
  --grb-tool-header-product-size: 11px;
  --grb-tool-header-product-tracking: .075em;
  --grb-tool-header-product-color: #9ba0aa;
  --grb-tool-header-compact-height: 68px;
  --grb-tool-header-compact-cube-size: 34px;
  --grb-tool-header-compact-wordmark-width: 71px;
  --grb-tool-header-compact-product-gap: 6px;
  --grb-tool-header-compact-product-size: 9.75px;
  --grb-tool-header-compact-product-tracking: .045em;
}

/* Canonical primary navigation shared by the site and every browser tool. */
.grb-primary-nav {
  display: flex;
  align-items: center;
  gap: var(--grb-primary-nav-gap);
}

.grb-primary-nav-link {
  color: var(--grb-primary-nav-color);
  font-family: var(--grb-primary-nav-font-family);
  font-size: var(--grb-primary-nav-font-size);
  font-weight: var(--grb-primary-nav-font-weight);
  letter-spacing: var(--grb-primary-nav-letter-spacing);
  line-height: 1;
  text-transform: uppercase;
  transition: none;
}

/* Optional editorial/site actions. Tool controls keep using grb-ui-button. */
.grb-site-cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 0;
  background: #fff;
  color: #000;
  font-family: var(--grb-button-font-family);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: none;
}
.grb-site-cta:hover { border-color: #dcdcdc; background: #dcdcdc; color: #000; }
.grb-site-cta:focus-visible,
.grb-site-action:focus-visible { outline: 2px solid var(--grb-accent); outline-offset: 3px; }

.grb-site-button-arrow {
  width: 10.5px;
  height: 10.5px;
  display: inline-block;
  flex: 0 0 auto;
  transition: transform .18s ease;
}
.grb-site-button-arrow svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; stroke-linejoin: miter; }
.grb-site-cta:hover .grb-site-button-arrow,
.grb-site-action--filled:hover .grb-site-button-arrow { transform: translate(2px,-2px); }

.grb-site-action {
  width: auto;
  min-width: 74px;
  height: 36px;
  padding: 0 15px;
  border: 1px solid #fff;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  background: #000;
  font: 600 10px/10px var(--grb-button-font-family);
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: none;
}
.grb-site-action:hover { background: #fff; color: #000; }
.grb-site-action--filled { background: #fff; color: #000; }
.grb-site-action--filled:hover { background: #dcdcdc; color: #000; }
.grb-site-action--disabled { min-width: 104px; border-color: #666; background: #666; color: #000; cursor: default; pointer-events: none; }

/*
  Opt-in cross-web typography roles. These deliberately do not set font size,
  line height, margin, width, wrapping or layout; each surface keeps its own
  established geometry.
*/
.grb-type-brand-headline {
  font-family: var(--grb-font-editorial);
  font-weight: 500;
  letter-spacing: .02em;
}

.grb-type-editorial { font-family: var(--grb-font-editorial); }
.grb-type-body { font-family: var(--grb-font-body); }
.grb-type-interface { font-family: var(--grb-font-interface); }