/* ============================================================
   gtlab.org theme layer.

   Loaded AFTER the iONE design-system tokens; it redefines their
   values so every component, including the compiled design-system
   bundle, adopts the gtlab.org language without a single component
   being rewritten.

   Extracted from the live site and from
   /home/ubuntu/pitchdeck-ione/{app/globals.css,tailwind.config.ts}:

     · Helvetica Neue only — light 300 for the big statements,
       poster-bold 700 (−0.02em) for section titles, 700 uppercase
       0.15em for labels.
     · Monochrome zinc. White page, zinc-900 tiles, zinc greys for text.
     · Cyan #22D3EE is an *interaction* colour only — hover, active,
       focus, live. Never decoration.
   ============================================================ */

:root {
  /* ---- one family for everything ---------------------------------- */
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---- neutrals: zinc --------------------------------------------- */
  --ink-950: #09090B;
  --ink-900: #18181B;
  --ink-800: #27272A;
  --ink-700: #3F3F46;
  --ink-600: #52525B;
  --ink-500: #71717A;
  --ink-400: #A1A1AA;
  --ink-300: #D4D4D8;
  --ink-200: #E4E4E7;
  --ink-150: #EAEAEC;
  --ink-100: #F4F4F5;
  --ink-75: #FAFAFA;
  --ink-50: #FAFAFA;

  /* ---- interaction accent: cyan (hover / active / focus / live) ---- */
  --ion-mint-700: #0E7490;
  --ion-mint-600: #0891B2;
  --ion-mint-500: #22D3EE;
  --ion-mint-400: #67E8F9;
  --ion-mint-300: #A5F3FC;
  --ion-mint-200: #CFFAFE;
  --ion-mint-100: #ECFEFF;
  --ion-mint-glow: #22D3EE;

  /* ---- the blue ramp is retired: actions are black ----------------- */
  --blue-800: #09090B;
  --blue-700: #18181B;
  --blue-600: #27272A;
  --blue-500: #3F3F46;
  --blue-400: #71717A;
  --blue-300: #D4D4D8;
  --blue-200: #E4E4E7;
  --blue-100: #F4F4F5;
  --blue-50: #FAFAFA;

  --steel-light: #F4F4F5;
  --steel: #E4E4E7;
  --steel-mid: #D4D4D8;
  --steel-dark: #A1A1AA;
  --steel-brushed: linear-gradient(100deg, #EDEDEF 0%, #FAFAFA 22%, #E4E4E7 48%, #F4F4F5 70%, #E9E9EC 100%);

  --success-600: #0E7490;
  --success-500: #0891B2;
  --success-100: #ECFEFF;
  --warning-600: #52525B;
  --warning-500: #A1A1AA;
  --warning-100: #F4F4F5;
  --danger-600: #991B1B;
  --danger-500: #B91C1C;
  --danger-100: #FEF2F2;

  /* ---- semantic aliases -------------------------------------------- */
  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-subtle: var(--ink-500); /* #A1A1AA fails AA on white; zinc-500 passes */
  --text-brand: var(--ink-500); /* labels are grey, not coloured */
  --text-link: var(--ink-900);

  --surface-page: #FAFAFA;
  --surface-sunken: #F4F4F5;
  --surface-tint: #FAFAFA;
  --surface-brand: #F4F4F5;

  --border-subtle: #F4F4F5;
  --border-default: #E4E4E7;
  --border-strong: #D4D4D8;
  --border-focus: var(--ink-900);
  --border-brand: var(--ion-mint-500);

  --action-primary: var(--ink-900);
  --action-primary-hover: var(--ink-800);
  --action-primary-press: #000000;
  --action-accent: var(--ink-900);
  --action-accent-hover: var(--ink-800);
  /* Focus is monochrome: a crisp dark ring, never a coloured halo.
     Cyan stays reserved for live/active states. */
  --focus-ring: var(--ink-900);

  /* ---- type: light statements, poster titles ----------------------- */
  --text-display-2xl: 300 clamp(3rem, 6vw, 5.5rem)/1.02 var(--font-display);
  --text-display-xl: 300 clamp(2.5rem, 4.6vw, 4.25rem)/1.05 var(--font-display);
  --text-display-lg: 700 clamp(2rem, 3.6vw, 3rem)/1.06 var(--font-display);
  --text-display-md: 700 clamp(1.75rem, 2.6vw, 2.375rem)/1.1 var(--font-display);

  --text-h1: 700 2rem/1.12 var(--font-display);
  --text-h2: 700 1.5rem/1.2 var(--font-display);
  --text-h3: 700 1.1875rem/1.3 var(--font-display);
  --text-h4: 700 1rem/1.35 var(--font-body);

  --text-lead: 400 1.25rem/1.6 var(--font-body);
  --text-body-lg: 400 1.0625rem/1.62 var(--font-body);
  --text-body: 400 0.9375rem/1.6 var(--font-body);
  --text-body-sm: 400 0.8125rem/1.55 var(--font-body);

  --text-kicker: 700 0.75rem/1 var(--font-display);
  --text-mono-sm: 500 0.8125rem/1.5 var(--font-body);
  --text-data: 500 1rem/1.4 var(--font-body);
  --text-caption: 500 0.6875rem/1.3 var(--font-body);

  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-kicker: 0.15em;
  --tracking-caption: 0.06em;

  /* ---- softer, larger corners -------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;

  /* ---- diffuse shadows, no cool cast -------------------------------- */
  --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04);
  --shadow-sm: 0 1px 3px rgba(9, 9, 11, 0.04), 0 6px 18px rgba(9, 9, 11, 0.04);
  --shadow-md: 0 2px 6px rgba(9, 9, 11, 0.05), 0 12px 32px rgba(9, 9, 11, 0.06);
  --shadow-lg: 0 6px 16px rgba(9, 9, 11, 0.06), 0 24px 56px rgba(9, 9, 11, 0.08);
  --shadow-xl: 0 10px 24px rgba(9, 9, 11, 0.08), 0 40px 80px rgba(9, 9, 11, 0.10);
  --ring-hairline: 0 0 0 1px rgba(9, 9, 11, 0.06);

  --glow-mint: 0 0 0 1px var(--ion-mint-500), 0 0 28px rgba(34, 211, 238, 0.45);
  --glow-blue: 0 0 0 2px var(--ink-900);
}

/* Numbers read as data without a monospace family. */
.ez-panel__row dd,
.ez-panel__bar-value,
.ez-panel__total-value,
.ez-econ__total,
.ez-scale__step,
.ez-assumptions dd {
  font-variant-numeric: tabular-nums;
}

/* Buttons are pills here, and the primary one is black. The `.mk` prefix
   outranks the design-system rules, which are injected into <head> at
   runtime and would otherwise win on source order. */
.mk .ione-btn {
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
}
.mk .ione-btn--sm,
.mk .ione-btn--lg {
  border-radius: var(--radius-pill);
}
.mk .ione-btn--secondary {
  border-color: var(--ink-300);
  color: var(--ink-900);
}
.mk .ione-btn--secondary:hover {
  border-color: var(--ink-900);
  background: var(--white);
}

/* Text fields mark focus by turning their own border black — no halo, and no
   second ring drawn by the global :focus-visible rule inside the field. */
.mk .ione-field__wrap:focus-within {
  border-color: var(--ink-900);
  box-shadow: none;
}
.mk .ione-field__wrap input:focus-visible,
.mk .ione-field__wrap textarea:focus-visible,
.mk .ione-field__wrap select:focus-visible {
  box-shadow: none;
}

/* Selection is grey, not tinted. */
::selection {
  background: var(--ink-200);
  color: var(--ink-900);
}

/* The kicker loses its coloured rule; it is a grey caps label. */
.mk-kicker {
  color: var(--text-muted);
}
.mk-kicker::before {
  display: none;
}

/* Tinted bands are the faintest grey, not a blue-cast slate. */
.mk-section--tint {
  background: var(--ink-75);
}