/* AutoSpottr design tokens + primitives.
   Ported verbatim from the design system bundle (_ds_bundle.css).
   Source of truth upstream: AutoSpottr/DesignSystem/Tokens/*.swift and
   AutoSpottr/Core/Models/RarityTier.swift. */

:root {
  /* Palette — light. The dark values follow in the two blocks below. */
  --as-paper: #E9E8E4;
  --as-paper-sunken: #DEDCD6;
  --as-card: #FFFFFF;
  --as-ink-panel: #141412;
  --as-ink-panel-lift: #1F1E1C;
  --as-ink1: #141412;
  --as-ink2: #55544E;
  --as-ink3: #8F8E86;
  --as-signal-tint: #FFE7E0;
  --as-ok: #1E7A44;
  --as-warn: #B7791B;
  --as-danger: #C51F0C;
  --as-line: #D3D1CA;
  --as-line-strong: #141412;
  --as-ink-inverse: #F2F1EC;
  --as-ink-inverse-muted: rgba(242, 241, 236, 0.68);
  --as-signal: #FE3B1F;
  --as-signal-press: #DD2C0F;
  --as-on-signal: #F2F1EC;
  --as-line-on-ink: rgba(242, 241, 236, 0.22);

  /* Type */
  --as-font-archivo: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --as-font-ibmplex-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* 4pt grid */
  --as-space-xxs: 4px;
  --as-space-xs: 8px;
  --as-space-sm: 12px;
  --as-space-md: 16px;
  --as-space-lg: 24px;
  --as-space-xl: 32px;
  --as-space-xxl: 48px;
  --as-space-huge: 64px;
  --as-space-colossal: 96px;

  /* Two radii: chrome is nearly sharp, media is soft. */
  --as-radius-control: 4px;
  --as-radius-tile: 8px;
  --as-radius-panel: 20px;
  --as-radius-card: 28px;

  --as-seam: 1px;
  --as-frame-stroke: 0px;
  --as-screen-inset: 24px;
  --as-control-height: 40px;
  --as-control-height-small: 32px;
  --as-hit-min: 44px;
  --as-tab-bar-clearance: 110px;

  /* Tracking, as a fraction of point size. */
  --as-tracking-label: 0.14em;
  --as-tracking-data: 0.02em;
  --as-tracking-display: -0.04em;
  --as-tracking-heading: -0.02em;
  --as-tracking-mono: 0.14em;

  /* Motion — approximations of the SwiftUI springs. */
  --as-motion-glass: 420ms cubic-bezier(0.22, 1, 0.36, 1);
  --as-motion-press: 280ms cubic-bezier(0.34, 1.2, 0.64, 1);
  --as-motion-count: 700ms cubic-bezier(0.2, 0.8, 0.2, 1.0);
}

/* Dark, when the machine asks for it and nothing has overridden it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-as-theme="light"]) {
    --as-paper: #1A1A18;
    --as-paper-sunken: #121211;
    --as-card: #232320;
    --as-ink-panel: #0B0B0A;
    --as-ink-panel-lift: #1A1A18;
    --as-ink1: #F2F1EC;
    --as-ink2: #A6A49C;
    --as-ink3: #6E6C65;
    --as-signal-tint: #40160C;
    --as-ok: #3FA76A;
    --as-warn: #D9A03C;
    --as-danger: #E4553F;
    --as-line: rgba(242, 241, 236, 0.14);
    --as-line-strong: #F2F1EC;
  }
}

/* Dark, chosen explicitly. */
[data-as-theme="dark"] {
  --as-paper: #1A1A18;
  --as-paper-sunken: #121211;
  --as-card: #232320;
  --as-ink-panel: #0B0B0A;
  --as-ink-panel-lift: #1A1A18;
  --as-ink1: #F2F1EC;
  --as-ink2: #A6A49C;
  --as-ink3: #6E6C65;
  --as-signal-tint: #40160C;
  --as-ok: #3FA76A;
  --as-warn: #D9A03C;
  --as-danger: #E4553F;
  --as-line: rgba(242, 241, 236, 0.14);
  --as-line-strong: #F2F1EC;
}

/* Surfaces. A subtree draws on one of these; `ink` is the single full-bleed
   editorial block a view is allowed. These follow the theme on their own,
   because each field points at a palette token rather than a literal. */
:root,
[data-as-surface="page"] {
  --as-bg: var(--as-paper);
  --as-fg: var(--as-ink1);
  --as-muted: var(--as-ink2);
  --as-rule: var(--as-line);
  --as-lift: var(--as-paper-sunken);
}

[data-as-surface="card"] {
  --as-bg: var(--as-card);
  --as-fg: var(--as-ink1);
  --as-muted: var(--as-ink2);
  --as-rule: var(--as-line);
  --as-lift: var(--as-paper-sunken);
}

[data-as-surface="sunken"] {
  --as-bg: var(--as-paper-sunken);
  --as-fg: var(--as-ink1);
  --as-muted: var(--as-ink2);
  --as-rule: var(--as-line);
  --as-lift: var(--as-card);
}

[data-as-surface="ink"] {
  --as-bg: var(--as-ink-panel);
  --as-fg: var(--as-ink-inverse);
  --as-muted: var(--as-ink-inverse-muted);
  --as-rule: var(--as-line-on-ink);
  --as-lift: var(--as-ink-panel-lift);
}

/* Rarity surfaces — flat fields, no metal and no hatch. */
:root {
  --as-rarity-well-fill: var(--as-paper-sunken);
  --as-rarity-well-on: var(--as-ink1);
  --as-rarity-well-edge: var(--as-line);
  --as-rarity-card-fill: var(--as-card);
  --as-rarity-card-on: var(--as-ink1);
  --as-rarity-card-edge: var(--as-line);
  --as-rarity-ruled-fill: var(--as-card);
  --as-rarity-ruled-on: var(--as-ink1);
  --as-rarity-ruled-edge: var(--as-line-strong);
  --as-rarity-ink-fill: var(--as-ink-panel);
  --as-rarity-ink-on: var(--as-ink-inverse);
  --as-rarity-ink-edge: var(--as-ink-panel);
  --as-rarity-signal-fill: var(--as-signal);
  --as-rarity-signal-on: var(--as-on-signal);
  --as-rarity-signal-edge: var(--as-signal);
}

/* AutoSpottr component styles.
   Everything here reads its colour, spacing and type from the custom
   properties above, so a palette change travels without touching this file.

   Two rules the whole system rests on:
     - two radii and no more — chrome is nearly sharp, media is soft;
     - separation comes from hairline rules, flat fields and one ink panel per
       view, never from tinted fills, gradients or glows. */

.as-surface {
  color: var(--as-fg);
}

.as-surface--filled {
  background: var(--as-bg);
}

/* Press feedback for sharp controls: a flat opacity dip. Nothing in this system
   scales under the finger — scale bounce belongs to a softer design language. */
.as-press {
  transition: opacity 80ms linear;
}

.as-press:active {
  opacity: 0.55;
}

.as-press:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------- type */

.as-wordmark,
.as-masthead,
.as-index-slash,
.as-mono-label {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.as-masthead {
  font-family: var(--as-font-ibmplex-mono);
  font-size: 10px;
  font-weight: 600;
  /* A fixed 5px, not the size-proportional mono tracking: standing the letters
     this far apart is the whole device. */
  letter-spacing: 5px;
}

.as-mono-label {
  align-items: baseline;
}

/* ---------------------------------------------------------------- section header */

.as-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--as-space-sm);
  width: 100%;
}

.as-section-header__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.as-section-header__mark {
  width: 7px;
  height: 7px;
  background: var(--as-signal);
  flex: none;
}

/* The visual stays small; the touch target does not. */
.as-section-header__action,
.as-mono-link {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.as-section-header__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  margin: -16px -12px;
}

.as-mono-link {
  display: inline-block;
  padding: 16px 10px;
  margin: -16px -10px;
  text-align: left;
}

/* ---------------------------------------------------------------- strips and chips */

.as-triplet-strip {
  display: flex;
  align-items: flex-start;
  gap: var(--as-space-md);
  width: 100%;
}

.as-triplet-strip__column {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 0;
  min-width: 0;
}

.as-triplet-strip__column > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.as-spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--as-rule);
  white-space: nowrap;
}

.as-spec-chip__dot {
  width: 7px;
  height: 7px;
  flex: none;
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--as-fg) 35%, transparent);
}

/* ---------------------------------------------------------------- buttons */

.as-primary-button {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-block;
  padding: 17px var(--as-space-lg);
  background: var(--as-signal);
  color: var(--as-on-signal);
  text-align: center;
}

.as-primary-button--full {
  display: block;
  width: 100%;
}

.as-circle-button {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: none;
  border: 1px solid;
  border-radius: 50%;
  text-align: center;
  /* The one round shape in a system whose radius is zero — which is exactly
     what makes it read as the secondary action. */
  opacity: 1;
  border-color: currentColor;
}

/* ---------------------------------------------------------------- materials */

.as-rarity-fill {
  width: 100%;
  height: 100%;
}

.as-rarity-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-style: solid;
  isolation: isolate;
  white-space: nowrap;
}

.as-rarity-badge__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.as-rarity-badge__text {
  position: relative;
  z-index: 1;
}

.as-checker {
  display: grid;
  line-height: 0;
}

/* ---------------------------------------------------------------- banners */

.as-banner-art,
.as-car-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.as-car-banner__material {
  position: absolute;
  inset: 0;
}

.as-car-banner__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom-left and deliberately part-cropped: the ghost is a texture, not a
   label, and a fully legible one competes with the real type on the card. */
.as-car-banner__ghost {
  position: absolute;
  left: -4px;
  bottom: -8px;
  opacity: 0.16;
  white-space: nowrap;
  line-height: 1;
}

.as-row-scrim,
.as-trailing-fade {
  position: absolute;
  pointer-events: none;
}

.as-row-scrim {
  inset: 0;
}

.as-trailing-fade {
  top: 0;
  bottom: 0;
  right: 0;
}

/* ---------------------------------------------------------------- spec frame */

.as-spec-frame {
  display: flex;
  gap: var(--as-seam);
  overflow: hidden;
  width: 100%;
}

.as-spec-cell {
  min-width: 0;
}

/* ---------------------------------------------------------------- numerals */

.as-count-up {
  display: inline-block;
  line-height: 1;
}

/* Keyboard focus is stated with the signal, like every other selection in the
   system. Never removed outright — the outline is the only thing a keyboard
   user has to go on. */
.as-button:focus-visible,
.as-primary-button:focus-visible,
.as-circle-button:focus-visible,
.as-field input:focus-visible,
.as-select select:focus-visible,
.as-checkbox input:focus-visible,
.as-radio input:focus-visible,
.as-switch input:focus-visible {
  outline: 2px solid var(--as-signal);
  outline-offset: 2px;
}