/* GENERATED FROM packages/shared/ui/nc-tokens.css -- DO NOT EDIT HERE.
   Edit the package, then run `node scripts/sync-design.mjs`. */

/*
 * Nitro Console design tokens. One file for both sites.
 *
 * The rules behind every value are in the Brand Book
 * (nitroconsole.business/docs/BRAND-BOOK.md); "Brand Book §…" below points
 * there, a bare (§…) to UI/UX.md. Components that use these tokens are in
 * packages/shared/ui/nc-components.css.
 *
 * GENERATED COPY WARNING: this file is edited here only, in
 * packages/shared/ui/nc-tokens.css. `node scripts/sync-design.mjs` copies it to
 * nitroconsole.com and nitroconsole.business as src/styles/nc-tokens.css, and
 * every page loads it before any other stylesheet. `--check` fails on drift.
 *
 * Colour and font tokens are defined here and nowhere else. Older stylesheets
 * use the retired names at the bottom of :root; they now resolve to the
 * signed-off values instead of carrying their own.
 */

:root {
  color-scheme: dark;

  /* Surfaces and text (§2.2) */
  --nc-black: #0B0B0F;
  --nc-chrome: #111419;
  --nc-surface: #1A1D22;
  --nc-surface-raised: #22262C;
  --nc-surface-hover: #292E35;
  --nc-border: #343A43;
  --nc-border-strong: #4A525D;
  --nc-text: #F5F7FA;
  --nc-text-muted: #A7ADB6;
  --nc-text-faint: #747C87; /* disabled text only */

  /* The one accent (§2.2) */
  --nc-action: #1F80FF;        /* focus ring, selected edges, active icons: never text or a fill behind text */
  --nc-action-fill: #1A6FE0;   /* filled primary buttons, white label 4.8:1 */
  --nc-action-pressed: #165EC0;
  --nc-action-text: #4D9AFF;   /* any blue text, at least 4.8:1 on every surface */
  --nc-action-tint: linear-gradient(rgba(31, 128, 255, 0.2), rgba(31, 128, 255, 0.08));
  --nc-action-edge: rgba(45, 145, 242, 0.42);

  /* Status (§2.2): dots and icons only, labels stay --nc-text */
  --nc-success: #42D77D;
  --nc-info: #1F80FF;
  --nc-warning: #F2BF4B;
  --nc-danger: #FF6B6B;
  --nc-neutral: #747C87;

  /* Status tints (Brand Book §3.5): backgrounds of whole-width notices only, never
     behind a chip label. Text on them stays --nc-text. */
  --nc-danger-tint: rgba(255, 107, 107, 0.16);
  --nc-warning-tint: rgba(242, 191, 75, 0.14);
  --nc-success-tint: rgba(66, 215, 125, 0.14);
  --nc-on-danger: #0B0B0F;     /* label on a filled danger button, 7.1:1 */
  --nc-on-action: #FFFFFF;     /* label on --nc-action-fill, 4.8:1 */

  /* Overlays (Brand Book §3.1, §6.3) */
  --nc-scrim: rgba(0, 0, 0, 0.56);
  --nc-surface-overlay: rgba(34, 38, 44, 0.96); /* toasts, menus: raised, slightly see-through */

  /* Type (§2.1, §2.5.4, Brand Book §2) */
  --nc-font-sans: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --nc-type-display: clamp(2rem, 1.75rem + 1.2vw, 3.375rem);
  --nc-type-title: 1.75rem;
  --nc-type-section: 1.375rem;
  --nc-type-card: 1.125rem;
  --nc-type-body: 1rem;
  --nc-type-control: 0.9375rem;
  --nc-type-support: 0.875rem;
  --nc-type-caption: 0.75rem;
  --nc-weight-regular: 400;
  --nc-weight-medium: 500;    /* tab labels only */
  --nc-weight-bold: 700;      /* titles, buttons, chips; hierarchy comes from 700 vs 400 */
  --nc-leading-display: 1.05;
  --nc-leading-title: 1.15;
  --nc-leading-section: 1.2;
  --nc-leading-card: 1.3;
  --nc-leading-body: 1.5;
  --nc-leading-control: 1.4;
  --nc-leading-support: 1.45;
  --nc-leading-caption: 1.3;
  --nc-tracking-tight: -0.02em;  /* display */
  --nc-tracking-title: -0.01em;  /* titles, section titles */
  --nc-tracking-caption: 0.01em; /* chips, badges */
  --nc-measure: 65ch;            /* longest line of running text */

  /* Spacing (§2.3) */
  --nc-space-1: 4px;
  --nc-space-2: 8px;
  --nc-space-3: 12px;
  --nc-space-4: 16px;
  --nc-space-5: 24px;
  --nc-space-6: 32px;
  --nc-space-7: 48px;
  --nc-space-8: 64px;

  /* Shape and elevation (§2.3) */
  --nc-radius-control: 14px;   /* buttons, fields, search */
  --nc-radius-card: 16px;      /* cards, tiles, list groups */
  --nc-radius-nav: 18px;       /* rail items */
  --nc-radius-sheet: 24px;     /* sheet top corners, dialogs */
  --nc-radius-inner: 8px;      /* thumbnails, icon wells */
  --nc-radius-pill: 999px;

  /* Strokes (Brand Book §6.2): hairlines separate, 2 px marks state, 3 px marks a
     notice's tone. Nothing else is outlined. */
  --nc-stroke: 1px;
  --nc-stroke-state: 2px;      /* focus ring, active tab underline, selected underline */
  --nc-stroke-edge: 3px;       /* attention strip and toast tone edge */
  --nc-focus-ring: var(--nc-stroke-state) solid var(--nc-action);
  --nc-focus-offset: 2px;

  /* Elevation (Brand Book §6.3): three tonal levels on the page, two shadows off it.
     Level 0 page --nc-black · 1 --nc-surface · 2 --nc-surface-raised. */
  --nc-shadow-overlay: 0 24px 70px rgba(0, 0, 0, 0.48); /* sheets, drawers, dialogs */
  --nc-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.36);   /* toasts, menus, tooltips */

  /* Layers (Brand Book §6.4) */
  --nc-z-sticky: 10;           /* sticky page buttons, table heads */
  --nc-z-shell: 100;           /* header, rail, tab bar */
  --nc-z-menu: 1000;           /* dropdown menus, tooltips */
  --nc-z-toast: 99990;
  --nc-z-skip: 100000;         /* skip link; <dialog> uses the browser's top layer */

  /* Touch targets (§7): at least 44 x 44 px. Older rules read this token;
     where it was undefined their !important minimum collapsed to auto. */
  --nc-touch-target: 44px;

  /* Control sizes (§4, Brand Book §5) */
  --nc-control-height: 44px;        /* buttons, chips, segmented, steppers */
  --nc-control-height-block: 48px;  /* full-width form and sheet buttons */
  --nc-control-height-hero: 60px;   /* one hero action on a landing page */
  --nc-field-height: 62px;          /* form fields */
  --nc-field-height-dense: 52px;    /* fields inside sheets and drawers */
  --nc-search-height: 58px;
  --nc-status-height: 24px;         /* status chips, badges */
  --nc-row-min: 64px;               /* list rows */
  --nc-nav-item-height: 58px;       /* rail rows */
  --nc-disabled-opacity: 0.45;
  --nc-press-scale: 0.97;

  /* Icons (§2.4, Brand Book §7) */
  --nc-icon-nav: 26px;
  --nc-icon-header: 22px;
  --nc-icon-button: 24px;
  --nc-icon-inline: 20px;
  --nc-icon-meta: 16px;             /* beside 14 px support text (café card facts) */
  --nc-icon-empty: 48px;

  /* Layout (§2.5, Brand Book §4). Breakpoints can't be variables in a media query;
     they are 359 / 600 / 768 / 1100 / 1440 px everywhere. */
  --nc-page-gutter: 18px;
  --nc-content-max: 440px;          /* phone content column */
  --nc-form-max: 560px;             /* forms, onboarding steps, sheets */
  --nc-workspace-max: 1180px;       /* rail + content, centred */
  --nc-rail-gap: 28px;
  --nc-header-height: 60px;
  --nc-bottom-nav-height: 93px;     /* five tabs plus the active-label strip */
  --nc-safe-top: env(safe-area-inset-top, 0px);
  --nc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --nc-header-total: calc(var(--nc-header-height) + var(--nc-safe-top));
  --nc-bottom-nav-total: calc(var(--nc-bottom-nav-height) + var(--nc-safe-bottom));

  /* Motion (§6.2, Brand Book §8.3) */
  --nc-motion-press: 140ms;
  --nc-motion-ui: 180ms;
  --nc-ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
  --nc-motion-sheet-in: 280ms;
  --nc-motion-sheet-out: 200ms;
  --nc-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --nc-motion-toast-in: 200ms;
  --nc-motion-toast-out: 150ms;
  --nc-ease-out: ease-out;

  /* Retired names, kept so older rules resolve to the values above (§11.1) */
  --nc-brand: var(--nc-action-fill);
  --nc-brand-strong: var(--nc-action);
  --nc-brand-hover: var(--nc-action);
  --nc-brand-pressed: var(--nc-action-pressed);
  --nc-brand-active: var(--nc-action-pressed);
  --nc-brand-soft: rgba(31, 128, 255, 0.18);
  --nc-blue: var(--nc-action-fill);
  --nc-focus: var(--nc-action);
  --nc-muted: var(--nc-text-muted);
  --nc-font-ui: var(--nc-font-sans);
}

/* The rail (§2.5.2): icons only on tablets, labelled from 1100 px. */
:root { --nc-rail-width: 80px; }
@media (min-width: 1100px) {
  :root { --nc-rail-width: clamp(232px, 18vw, 280px); }
}

/* XS phones, 320-359 px (§2.5.4) */
@media (max-width: 359px) {
  :root {
    --nc-type-display: 2rem;
    --nc-type-title: 1.625rem;
    --nc-type-section: 1.25rem;
    --nc-page-gutter: 12px;
  }
}

/* Page gutter by size class (§2.5.2) */
@media (min-width: 768px) {
  :root { --nc-page-gutter: clamp(24px, 3vw, 36px); }
}
@media (min-width: 1440px) {
  :root { --nc-page-gutter: 36px; }
}

/* Reduced motion (§6.2): cross-fades only. Durations stay short and no
   component scales or slides. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --nc-press-scale: 1;
    --nc-motion-sheet-in: 150ms;
    --nc-motion-sheet-out: 150ms;
    --nc-motion-toast-in: 0ms;
    --nc-motion-toast-out: 0ms;
  }
}

/* One font declaration for the whole product (§2.1). Form controls do not
   inherit fonts by default, so they are told to. */
html {
  font-family: var(--nc-font-sans);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(button, input, select, textarea, optgroup) {
  font-family: inherit;
}

/* Inputs are 16 px at every size so iOS never zooms into a field (§2.1,
   §2.5.4). One-time-code boxes are their own larger component. */
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], .otp-digit, .otp-input, .auth-otp input, [autocomplete="one-time-code"][maxlength="1"]),
select,
textarea {
  font-size: 16px !important;
}

/* `hidden` always hides. Component rules such as `display: grid` otherwise
   beat the browser's own [hidden] rule and show empty cards. */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

/* Content safety (§2.5.6): a page canvas sizes to its column, never the
   viewport. Beside the rail, 100vw canvases ran under the right edge. The
   :not(#…) matches everything and lifts this above page rules that use ids. */
@media (min-width: 768px) {
  html body .app-shell .app-content > :not(#nc-canvas-guard) {
    max-inline-size: 100% !important;
  }
}

/* Text for screen readers only. */
:where(.nc-visually-hidden, .sr-only) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Icons (§2.4). Directional library glyphs point down (chevron.svg,
   navigation-control.svg) or right (circle-half.svg); these turn them. */
.nc-icon--left { transform: rotate(90deg); }
.nc-icon--right { transform: rotate(-90deg); }
.nc-icon--up { transform: rotate(180deg); }
.nc-icon--flip { transform: scaleX(-1); }

/* Library glyphs are white (Brand Book §7). An idle or decorative one
   (a search glyph in a field, a row chevron) is shown muted. */
.nc-icon--muted { opacity: 0.66; }

/* A single-colour glyph whose colour carries meaning (ticket, status check). */
.nc-icon-mask {
  display: inline-block;
  flex: 0 0 var(--nc-icon-size, 28px);
  inline-size: var(--nc-icon-size, 28px);
  block-size: var(--nc-icon-size, 28px);
  background-color: var(--nc-icon-color, currentColor);
  -webkit-mask: var(--nc-icon-source) center / contain no-repeat;
  mask: var(--nc-icon-source) center / contain no-repeat;
  pointer-events: none;
}

/* Accessibility fallbacks (§7) */
@media (prefers-contrast: more) {
  :root {
    --nc-text-muted: #C9CED6;
    --nc-border: #5E6773;
    --nc-border-strong: #7A8491;
  }
}

@media (forced-colors: active) {
  :root {
    --nc-text: CanvasText;
    --nc-text-muted: CanvasText;
    --nc-action: Highlight;
    --nc-action-text: LinkText;
    --nc-danger: CanvasText;
  }

  .nc-icon-mask {
    background-color: CanvasText;
  }
}