/* Faces, page ground, type roles and the motifs every component shares (lib/ui/theme/typography.dart, lib/ui/support). */
@layer base {
  @font-face {
    font-family: Raleway;
    src: url("/assets/fonts/Raleway-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
  }

  @font-face {
    font-family: "DM Mono";
    src: url("/assets/fonts/DMMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
  }

  @font-face {
    font-family: "DM Mono";
    src: url("/assets/fonts/DMMono-Medium.ttf") format("truetype");
    font-weight: 500;
    font-display: swap;
  }

  @font-face {
    font-family: Ethnocentric;
    src: url("/assets/fonts/Ethnocentric-Regular.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    font-size: calc(100% * var(--text-scale));
    background: var(--surface-app);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-height: 100dvh;
    background: var(--surface-app);
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  dl,
  dd,
  ul,
  ol {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  img,
  svg,
  video,
  canvas {
    display: block;
    max-width: 100%;
  }

  :focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  ::selection {
    background: var(--primary-container-hover);
    color: var(--text-primary);
  }

  .display-xl,
  .display-lg,
  .display-md,
  .display-sm,
  .display-xs {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--text-primary);
  }

  .display-xl { font-size: var(--fs-x5l); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
  .display-lg { font-size: var(--fs-x4l); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
  .display-md { font-size: var(--fs-xxxl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
  .display-sm { font-size: var(--fs-xxl); line-height: var(--lh-tight); letter-spacing: var(--tracking-title); }
  .display-xs { font-size: var(--fs-step-row); line-height: var(--lh-tight); letter-spacing: var(--tracking-caps); }

  .heading-lg,
  .heading-md,
  .heading-sm,
  .heading-xs {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tightest);
    color: var(--text-primary);
  }

  .heading-lg { font-size: var(--fs-xl); }
  .heading-md { font-size: var(--fs-lg); }
  .heading-sm { font-size: var(--fs-md); }
  .heading-xs { font-size: var(--fs-base); }

  .title-xl,
  .title-lg,
  .title-md,
  .title-sm,
  .title-xs {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: var(--lh-snug);
    color: var(--text-primary);
  }

  .title-xl { font-size: var(--fs-step-hero); }
  .title-lg { font-size: var(--fs-step-feature); }
  .title-md { font-size: var(--fs-step-title); }
  .title-sm { font-size: var(--fs-sm); font-weight: 600; }
  .title-xs { font-size: var(--fs-step-row); }

  .body-lg,
  .body-md,
  .body-sm,
  .body-dense,
  .body-xs {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: var(--lh-relaxed);
    color: var(--text-body);
  }

  .body-lg { font-size: var(--fs-md); }
  .body-md { font-size: var(--fs-base); }
  .body-sm { font-size: var(--fs-sm); }
  .body-dense { font-size: var(--fs-step-row); line-height: var(--lh-normal); }
  .body-xs { font-size: var(--fs-xs); line-height: var(--lh-normal); }

  .label-xl,
  .label-lg,
  .label-md,
  .label-sm,
  .label-xs {
    font-family: var(--font-sans);
    font-weight: 800;
    line-height: var(--lh-normal);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .label-xl { font-size: var(--fs-md); letter-spacing: var(--tracking-caps); }
  .label-lg { font-size: var(--fs-sm); letter-spacing: var(--tracking-caps); }
  .label-md { font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); }
  .label-sm { font-size: var(--fs-xxs); letter-spacing: var(--tracking-label); }
  .label-xs { font-size: var(--fs-xxxs); letter-spacing: var(--tracking-label); }

  .data-xl,
  .data-lg,
  .data-md,
  .data-sm,
  .data-field,
  .data-row,
  .data-xs,
  .data-xxs {
    font-family: var(--font-mono);
    font-weight: 500;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
  }

  .data-xl { font-size: var(--fs-xxxl); line-height: var(--lh-tight); color: var(--text-primary); }
  .data-lg { font-size: var(--fs-xxl); line-height: var(--lh-tight); color: var(--text-primary); }
  .data-md { font-size: var(--fs-lg); color: var(--text-primary); }
  .data-sm { font-size: var(--fs-base); color: var(--text-body); }
  .data-field { font-size: var(--fs-sm); color: var(--text-body); }
  .data-row { font-size: var(--fs-step-row); color: var(--text-muted); }
  .data-xs { font-size: var(--fs-xs); color: var(--text-faint); }
  .data-xxs { font-size: var(--fs-xxs); color: var(--text-faint); }

  .ink-primary { color: var(--text-primary); }
  .ink-body { color: var(--text-body); }
  .ink-muted { color: var(--text-muted); }
  .ink-faint { color: var(--text-faint); }
  .ink-accent { color: var(--text-accent); }
  .ink-data { color: var(--text-data); }
  .ink-go { color: var(--text-go); }
  .ink-danger { color: var(--text-danger); }

  .rtg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .rtg-icon {
    --icon-size: var(--icon-base);
    display: inline-block;
    flex: none;
    width: var(--icon-size);
    height: var(--icon-size);
    color: inherit;
    stroke: currentColor;
    vertical-align: middle;
  }

  .rtg-notched {
    --notch: var(--notch-md);
    --notch-fill: transparent;
    --notch-stroke: transparent;
    --notch-overlay: transparent;
    position: relative;
    isolation: isolate;
  }

  .rtg-notched::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(var(--notch-overlay), var(--notch-overlay)), var(--notch-fill);
    border: var(--stroke-hairline) solid var(--notch-stroke);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
    transition: background-color var(--duration-hover) var(--ease-standard);
  }

  .rtg-notched::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: var(--notch);
    height: var(--notch);
    background: linear-gradient(to bottom right, transparent calc(50% - var(--stroke-hairline)), var(--notch-stroke) calc(50% - var(--stroke-hairline)), var(--notch-stroke) 50%, transparent 50%);
    pointer-events: none;
  }

  .rtg-notched--top-left::before {
    clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch));
  }

  .rtg-notched--top-left::after {
    right: auto;
    bottom: auto;
    left: 0;
    top: 0;
    background: linear-gradient(to bottom right, transparent 50%, var(--notch-stroke) 50%, var(--notch-stroke) calc(50% + var(--stroke-hairline)), transparent calc(50% + var(--stroke-hairline)));
  }

  .rtg-glass {
    background: var(--surface-glass);
    border: var(--stroke-hairline) solid var(--border-hairline);
    -webkit-backdrop-filter: blur(var(--blur-card)) saturate(var(--saturation-card));
    backdrop-filter: blur(var(--blur-card)) saturate(var(--saturation-card));
  }

  .rtg-glass--bar {
    background: var(--surface-glass-bar);
    -webkit-backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
    backdrop-filter: blur(var(--blur-bar)) saturate(var(--saturation-bar));
  }

  .rtg-glass--modal {
    background: var(--surface-glass-high);
    border-color: var(--border-subtle);
    -webkit-backdrop-filter: blur(var(--blur-modal)) saturate(var(--saturation-modal));
    backdrop-filter: blur(var(--blur-modal)) saturate(var(--saturation-modal));
  }

  .rtg-hatch {
    --hatch-ink: var(--accent);
    display: block;
    height: 10px;
    background: repeating-linear-gradient(var(--hatch-angle), var(--hatch-ink) 0 var(--hatch-stripe), transparent var(--hatch-stripe) var(--hatch-period));
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
  }

  .rtg-hatch--dense {
    background: repeating-linear-gradient(var(--hatch-angle), var(--hatch-ink) 0 var(--hatch-dense-stripe), transparent var(--hatch-dense-stripe) var(--hatch-dense-period));
  }

  .rtg-hatch--no-fade {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .rtg-hatch--well {
    --hatch-ink: color-mix(in srgb, var(--divider) 50%, transparent);
    background: repeating-linear-gradient(var(--hatch-angle), var(--hatch-ink) 0 var(--hatch-dense-stripe), transparent var(--hatch-dense-stripe) var(--hatch-dense-period));
    -webkit-mask-image: none;
    mask-image: none;
  }

  .rtg-telemetry-grid {
    background-image:
      linear-gradient(var(--grid-line) var(--grid-line-width), transparent var(--grid-line-width)),
      linear-gradient(90deg, var(--grid-line) var(--grid-line-width), transparent var(--grid-line-width));
    background-size: var(--grid-cell) var(--grid-cell);
  }

  .rtg-skewed {
    display: inline-block;
    transform: skewX(var(--skew-speed));
    transform-origin: bottom center;
  }

  .rtg-live-rail {
    --rail-ink: var(--accent);
    position: relative;
  }

  .rtg-live-rail::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--rail-width);
    background: var(--rail-ink);
    pointer-events: none;
    z-index: 1;
  }

  .rtg-speed-streak {
    --streak: var(--speed-streak);
    position: relative;
    overflow: hidden;
  }

  .rtg-speed-streak::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--streak-width);
    background: var(--streak);
    transform: translateX(-140%) skewX(var(--streak-skew));
    animation: rtg-speed-streak var(--duration-streak) var(--ease-throttle) 1 forwards;
    pointer-events: none;
  }

  .rtg-speed-streak--quiet {
    --streak: var(--speed-streak-light);
  }

  @keyframes rtg-speed-streak {
    from { transform: translateX(-140%) skewX(var(--streak-skew)); }
    to { transform: translateX(240%) skewX(var(--streak-skew)); }
  }

  .rtg-media-scrim {
    position: absolute;
    inset: 0;
    background: var(--media-protection-bottom);
    pointer-events: none;
  }

  .rtg-media-scrim--top {
    background: var(--media-protection-top);
  }

  @keyframes rtg-enter {
    from { opacity: 0; transform: translateX(calc(var(--enter-slide) * -1)); }
    to { opacity: 1; transform: none; }
  }

  @keyframes rtg-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    .rtg-speed-streak::after {
      display: none;
    }
  }
}