/* The AutoSolutions OS design system, from the package.

   It ships its own fonts (Inter / Inter Display), the token tiers, the seven
   themes, the document base and every component's stylesheet. It used to be
   vendored under src/design-system/autosolutions, which is how this app ended
   up on a snapshot nobody could name a version for.

   Imported first because Tailwind's entry expands into real rules, and an
   @import after those rules is invalid CSS. The system's document base is
   unlayered, so it still outranks Tailwind's layered preflight. */
/* design system: loaded from the project styles.css in the preview */




@custom-variant dark (&:is(.dark *));

/*
 * ── Legacy alias layer ────────────────────────────────────────────────────
 *
 * The app was built on its own token names before the system arrived. Rather
 * than rewrite ~250 call sites in one pass, every legacy name is re-pointed at
 * a system token here, so existing markup adopts the new face immediately and
 * gets cleaned up screen by screen.
 *
 * Rules: alias, never fork. No value is invented in this block — the right-hand
 * side is always a system token. Components consume the semantic tier
 * (--color-text, --color-bg-surface, …), never the gray primitives.
 */
:root {
  /* ── Product core ───────────────────────────────────────────────────── */
  --ink: var(--color-text);
  --muted: var(--color-text-secondary);
  --canvas: var(--color-bg);
  --surface: var(--color-bg-surface);
  --surface-solid: var(--color-bg-surface);

  /* Accent = the theme's brand family. `ink` is the default theme, so the
     accent is the achromatic near-black unless a theme is picked. */
  --accent: var(--color-bg-fill-brand);
  --accent-hover: var(--color-bg-fill-brand-hover);
  --accent-wash: var(--theme-accent-soft);
  --accent-edge: var(--color-border-brand);
  --accent-tint: var(--color-bg-surface-secondary);
  --accent-bar: var(--color-bg-fill-brand);
  --accent-glow: var(--theme-accent-soft);
  --accent-secondary: var(--theme-3);
  --text-on-accent: var(--color-text-brand-on-bg-fill);

  /* The page field is one flat canvas — the system has no gradient and no
     blurred blob. */
  --wash: var(--color-bg);
  --ambient: var(--color-bg);
  --accent-blob: transparent;

  /* ── Navigation plane ───────────────────────────────────────────────── */
  --surface-rail: var(--color-nav-bg);
  --rail-veil: transparent;
  --rail-label: var(--color-text-secondary);
  --rail-divider: var(--color-border);
  --rail-hover: var(--color-nav-item-hover);
  --rail-active: var(--color-nav-item-selected);

  /* ── Neutral ramp (was the "paper" scale) ───────────────────────────── */
  --paper-50: var(--color-gray-50);
  --paper-100: var(--color-gray-100);
  --paper-150: var(--color-gray-150);
  --paper-200: var(--color-gray-200);
  --paper-250: var(--color-gray-200);
  --paper-300: var(--color-gray-300);
  --paper-350: var(--color-gray-300);
  --paper-400: var(--color-gray-400);
  --paper-500: var(--color-gray-500);
  --paper-600: var(--color-gray-600);
  --paper-700: var(--color-gray-700);
  --paper-800: var(--color-gray-800);
  --paper-900: var(--color-gray-975);

  /* ── Lines and tints (were alphas) ──────────────────────────────────── */
  /* The system separates surfaces with solid hairlines and surface fills, not
     translucency, so each old alpha step maps to the nearest ramp step. */
  --muted-08: var(--color-bg-surface-secondary);
  --muted-15: var(--color-border-secondary);
  --muted-18: var(--color-border);
  --muted-20: var(--color-border);
  --muted-25: var(--color-border-hover);
  --muted-30: var(--color-gray-500);
  --muted-40: var(--color-gray-600);
  --ink-40: var(--color-gray-700);
  --ink-60: var(--color-text-secondary);
  --ink-70: var(--color-text-secondary);
  --ink-85: var(--color-text);

  /* ── Identity rotation · per-account colours ────────────────────────── */
  /* The system's seven-colour rotation (tokens/colors.css, the avatar
     palette): identity, never state, never themed, assigned positionally.
     The eighth slot wraps to the first. */
  --series-1: var(--color-avatar-one-bg);
  --series-2: var(--color-avatar-two-bg);
  --series-3: var(--color-avatar-three-bg);
  --series-4: var(--color-avatar-four-bg);
  --series-5: var(--color-avatar-five-bg);
  --series-6: var(--color-avatar-six-bg);
  --series-7: var(--color-avatar-seven-bg);

  /* ── On inverse surfaces ────────────────────────────────────────────── */
  --on-dark-divider: var(--color-border-inverse);
  --on-dark-tint: var(--color-bg-fill-transparent-secondary);
  --on-dark-well: var(--color-bg-fill-transparent-secondary);
  --on-dark-line: var(--color-border-inverse);
  --on-dark-bar: var(--color-border-inverse);
  --on-dark-secondary: var(--color-text-inverse-secondary);
  --on-dark-tertiary: var(--color-text-inverse-secondary);
  --on-dark-body: var(--color-text-inverse-secondary);
  --on-dark-strong: var(--color-text-inverse);

  /* ── Overlays ───────────────────────────────────────────────────────── */
  --glass-fill: var(--color-bg-surface);
  --glass-fill-hover: var(--color-bg-surface-hover);
  --glass-edge: var(--color-border);
  --glass-edge-hover: var(--color-border-hover);
  --glass-dialog-fill: var(--color-bg-surface);
  --glass-dialog-edge: var(--color-border);
  --scrim-dialog: var(--color-backdrop-bg);

  /* ── Type roles ─────────────────────────────────────────────────────── */
  --font-body: var(--font-sans);
  /* The label role — uppercase, tracked eyebrows and counts. The system has a
     real monospaced stack, which is what the role asks for. */
  --weight-light: var(--font-weight-regular);
  --weight-regular: var(--font-weight-regular);
  --weight-medium: var(--font-weight-medium);
  --weight-semibold: var(--font-weight-semibold);
  --weight-display: var(--font-weight-semibold);
  --weight-bold: var(--font-weight-bold);

  --tracking-display: var(--font-letter-spacing-denser);
  --tracking-tight: var(--font-letter-spacing-dense);
  --tracking-normal: var(--font-letter-spacing-normal);
  --tracking-label: 0.06em;
  --tracking-label-sm: 0.06em;
  --tracking-label-xs: 0.04em;
  --tracking-status: 0.06em;

  --text-display-lg: var(--font-size-1000);
  --text-display: var(--font-size-900);
  --text-display-sm: var(--font-size-750);
  --text-metric: var(--font-size-800);
  --text-title: var(--font-size-600);
  --text-card-title: var(--font-size-450);
  --text-lead: var(--font-size-450);
  --text-control: var(--font-size-325);
  --text-body: var(--font-size-325);
  --text-caption: var(--font-size-300);
  --text-micro: var(--font-size-275);
  --text-nano: var(--font-size-275);
  --leading-tight: 1;
  --leading-snug: 1.2;
  --leading-normal: 1.5;

  --type-display: var(--font-weight-bold) var(--font-size-900) / var(--font-line-height-1200)
    var(--font-display);
  --type-title: var(--font-weight-bold) var(--font-size-600) / var(--font-line-height-800)
    var(--font-display);
  --type-card-title: var(--font-weight-semibold) var(--font-size-450) / var(--font-line-height-600)
    var(--font-display);
  --type-metric: var(--font-weight-bold) var(--font-size-800) / var(--font-line-height-1000)
    var(--font-display);
  --type-control: var(--font-weight-medium) var(--font-size-325) / var(--font-line-height-500)
    var(--font-sans);
  --type-body: var(--font-weight-regular) var(--font-size-325) / var(--font-line-height-500)
    var(--font-sans);
  --type-caption: var(--font-weight-regular) var(--font-size-300) / var(--font-line-height-400)
    var(--font-sans);
  --type-mono-label: var(--font-weight-medium) var(--font-size-275) / var(--font-line-height-400)
    var(--font-mono);

  /* ── Shape · the two-radius rhythm ──────────────────────────────────── */
  /* 8px for anything you click, 12px for anything that contains things. */
  --radius-hairline: var(--radius-050);
  --radius-glass-card: var(--radius-300);
  --radius-dark-panel: var(--radius-300);
  --radius-inner-panel: var(--radius-200);
  --radius-app-tile: var(--radius-300);
  --radius-business-card: var(--radius-400);
  --radius-dialog: var(--radius-500);
  --radius-avatar-well: var(--radius-200);
  --radius-icon-badge: var(--radius-200);
  --radius-paper-card: var(--radius-200);
  --radius-shell: var(--radius-400);
  --radius-field: var(--radius-200);
  --radius-skeleton: var(--radius-100);
  --radius-pill: var(--radius-full);

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --rail-width: var(--sidenav-width);
  --rail-lockup-h: var(--nav-appname-height);
  --page-max: var(--page-max-width);
  --panel-pad-y: var(--space-400);
  --panel-pad-x: var(--space-400);
  --card-pad: var(--card-padding);
  --card-pad-tight: var(--space-300) var(--space-400);
  --row-pad: var(--space-300) var(--space-400);
  --grid-gap: var(--card-gap);
  --grid-gap-tight: var(--space-100);

  /* ── Spacing aliases onto the 4px base ──────────────────────────────── */
  --space-0: 0;
  --space-05: var(--space-050);
  --space-1: var(--space-100);
  --space-15: var(--space-150);
  --space-2: var(--space-200);
  --space-25: var(--space-250);
  --space-3: var(--space-300);
  --space-35: var(--space-350);
  --space-4: var(--space-400);
  --space-45: var(--space-400);
  --space-5: var(--space-500);
  --space-55: var(--space-500);
  --space-6: var(--space-600);
  --space-65: var(--space-700);
  --space-7: var(--space-700);
  --space-8: var(--space-800);
  --space-9: var(--space-1000);
  --space-11: var(--space-1200);
  --space-13: var(--space-1200);

  /* ── Elevation ──────────────────────────────────────────────────────── */
  /* The system's stack is many near-invisible layers ending in a 1px ring —
     that ring is what separates a white card from the canvas. --shadow-card
     itself is the system's own token and is deliberately not redefined here. */
  --shadow-card-glow: var(--shadow-card);
  --shadow-tile-glow: var(--shadow-100);
  --shadow-tile-glow-hover: var(--shadow-200);
  --shadow-photo: var(--shadow-200);
  --shadow-tile: var(--shadow-100);
  --shadow-tile-hover: var(--shadow-200);
  --shadow-menu: var(--shadow-popover);
  --shadow-business: var(--shadow-300);
  --shadow-dialog: var(--shadow-modal);
  --shadow-paper-press: var(--shadow-inset-100);
  --shadow-logo: none;
  --shadow-logo-sm: none;
  /* Blur is not part of this system: surfaces are opaque and separated by the
     elevation ring, so every blur hook resolves to none. */
  --blur-glass: none;
  --blur-tile: none;
  --blur-business: none;
  --blur-dialog: none;
  --blur-scrim: none;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --dur-instant: var(--duration-50, 100ms);
  --dur-fast: var(--duration-100, 150ms);
  --dur-hover: var(--duration-100, 150ms);
  --dur-base: var(--duration-150, 200ms);
  --dur-swap: var(--duration-200, 250ms);
  --dur-slow: var(--duration-250, 300ms);
  --dur-enter: var(--duration-300, 350ms);
  --dur-fade: var(--duration-300, 350ms);
  --dur-page: var(--duration-400, 400ms);
  --dur-hero: var(--duration-500, 500ms);
  --motion-hover-lift: translateY(-2px);
  --motion-hover-lift-sm: translateY(-1px);
  --motion-hover-grow: scale(1.02);
  --transition-nav: color var(--dur-base) ease;
  --transition-tile: box-shadow var(--dur-base) ease, background-color var(--dur-base) ease;
  --transition-card:
    background-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease,
    border-color var(--dur-hover) ease;

  /* ── Status and skeletons ───────────────────────────────────────────── */
  --skeleton: var(--color-bg-surface-secondary);
  --skeleton-strong: var(--color-bg-surface-tertiary);
  --skeleton-weak: var(--color-bg-surface-secondary);
  --status-ok: var(--color-success-icon);
  --status-idle: var(--color-icon-secondary);
  --status-quiet: var(--color-icon-disabled);
  --destructive: var(--color-critical-fill);
  --destructive-foreground: var(--color-critical-text-on-fill);

  /* ── shadcn semantics, re-pointed at the system ─────────────────────── */
  --radius: var(--radius-container);
  --background: var(--color-bg);
  --foreground: var(--color-text);
  --card: var(--color-bg-surface);
  --card-foreground: var(--color-text);
  --popover: var(--color-bg-surface);
  --popover-foreground: var(--color-text);
  --primary: var(--color-bg-fill-brand);
  --primary-foreground: var(--color-text-brand-on-bg-fill);
  --secondary: var(--color-bg-fill-secondary);
  --secondary-foreground: var(--color-text);
  --muted-foreground: var(--color-text-secondary);
  --accent-foreground: var(--color-text-brand-on-bg-fill);
  --border: var(--color-border);
  --input: var(--color-input-border);
  --ring: var(--color-border-focus);
  --sidebar: var(--color-nav-bg);
  --sidebar-foreground: var(--color-text);
  --sidebar-primary: var(--color-bg-fill-brand);
  --sidebar-primary-foreground: var(--color-text-brand-on-bg-fill);
  --sidebar-accent: var(--color-nav-item-hover);
  --sidebar-accent-foreground: var(--color-text);
  --sidebar-border: var(--color-border);
  --sidebar-ring: var(--color-border-focus);
}

/*
 * Tailwind's stock scales are re-pointed at the system, so a stray `text-sm`,
 * `rounded-lg`, `shadow-md` or `bg-gray-100` cannot silently outrank a token.
 */
@theme inline {
  --color-background: var(--color-bg);
  --color-foreground: var(--color-text);
  --color-card: var(--color-bg-surface);
  --color-card-foreground: var(--color-text);
  --color-popover: var(--color-bg-surface);
  --color-popover-foreground: var(--color-text);
  --color-primary: var(--color-bg-fill-brand);
  --color-primary-foreground: var(--color-text-brand-on-bg-fill);
  --color-secondary: var(--color-bg-fill-secondary);
  --color-secondary-foreground: var(--color-text);
  --color-muted: var(--color-bg-surface-secondary);
  --color-muted-foreground: var(--color-text-secondary);
  --color-accent: var(--color-bg-fill-brand);
  --color-accent-foreground: var(--color-text-brand-on-bg-fill);
  --color-destructive: var(--color-critical-fill);
  --color-destructive-foreground: var(--color-critical-text-on-fill);
  --color-input: var(--color-input-border);
  --color-ring: var(--color-border-focus);
  --color-ring-offset-background: var(--color-bg);
  --color-ink: var(--color-text);
  --color-canvas: var(--color-bg);
  --color-surface: var(--color-bg-surface);
  --color-paper-50: var(--color-gray-50);
  --color-paper-100: var(--color-gray-100);
  --color-paper-150: var(--color-gray-150);
  --color-paper-300: var(--color-gray-300);
  --color-paper-700: var(--color-gray-700);
  --color-paper-800: var(--color-gray-800);
  --color-sidebar: var(--color-nav-bg);
  --color-sidebar-foreground: var(--color-text);
  --color-sidebar-primary: var(--color-bg-fill-brand);
  --color-sidebar-primary-foreground: var(--color-text-brand-on-bg-fill);
  --color-sidebar-accent: var(--color-nav-item-hover);
  --color-sidebar-accent-foreground: var(--color-text);
  --color-sidebar-border: var(--color-border);
  --color-sidebar-ring: var(--color-border-focus);

  --font-sans: var(--font-sans);
  --font-display: var(--font-display);
  --font-mono: var(--font-mono);

  --text-xs: var(--font-size-275);
  --text-sm: var(--font-size-300);
  --text-base: var(--font-size-325);
  --text-lg: var(--font-size-350);
  --text-xl: var(--font-size-450);
  --text-2xl: var(--font-size-600);
  --text-3xl: var(--font-size-750);
  --text-4xl: var(--font-size-900);

  --radius-sm: var(--radius-100);
  --radius-md: var(--radius-150);
  --radius-lg: var(--radius-200);
  --radius-xl: var(--radius-300);
  --radius-2xl: var(--radius-400);
  --radius-3xl: var(--radius-500);
  --radius-4xl: var(--radius-500);

  --shadow-2xs: var(--shadow-100);
  --shadow-xs: var(--shadow-100);
  --shadow-sm: var(--shadow-100);
  --shadow-md: var(--shadow-200);
  --shadow-lg: var(--shadow-300);
  --shadow-xl: var(--shadow-400);
  --shadow-2xl: var(--shadow-500);
}

@layer base {
  * {
    border-color: var(--color-border);
  }

  html,
  body {
    background: var(--color-bg);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
  }

  /* Counts, timestamps and table columns line up on tabular figures. */
  time,
  td,
  th,
  .as-eyebrow {
    font-variant-numeric: tabular-nums;
  }

  /* One unbreakable string can never drag the document sideways. `clip` rather
     than `hidden` so it creates no scroll container and `sticky` still works. */
  body {
    overflow-x: clip;
  }
}

/*
 * The blur hooks stay as no-op classes: the system's surfaces are opaque and
 * separated by the elevation ring, so nothing in the product carries a
 * backdrop-filter any more. Keeping the classes means the markup that
 * references them needs no change and gains nothing to remove later.
 */
@layer components {
  .as-bb {
    position: relative;
  }
}

/* The eyebrow — the only uppercase and the only letterspacing in the product.
   Sentence case everywhere else. Unlayered on purpose: inside @layer it lost
   to the unlayered Text classes (as-text--body-xs), which silently reset the
   role to 450 on a 12px line box. */
.as-eyebrow {
  font: var(--type-mono-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A Badge in the eyebrow register keeps its tone's PAIRED text colour
   ("each surface ships a paired dark text colour" — guidelines/status
   surfaces); the flat secondary applies only to standalone eyebrows. */
.as-eyebrow:not(.as-badge) {
  color: var(--color-text-secondary);
}

/* The pressed state the package documents but never styles: "Pressed states
   swap the bevel for --shadow-inset-200 so the control visibly depresses"
   (components/actions/Button.prompt.md). Its Button.jsx emits is-pressed with
   no rule behind it, so segmented view-switchers had no visible active
   member. Values mirror the :active declarations in actions.css. */
.as-btn.is-pressed {
  box-shadow: var(--shadow-inset-200);
}

.as-btn--secondary.is-pressed {
  background-color: var(--color-bg-fill-tertiary-active);
}

/* Motion. Declared as keyframes rather than utilities so they exist whether or
   not a utility class references them. */
@keyframes as-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

@keyframes as-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(320%);
  }
}
@keyframes as-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes as-glow {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes as-line-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes as-step-pop {
  0% {
    transform: scale(0.7);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes as-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes as-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes as-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
@keyframes as-halo {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-as-motion] {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Phone rules.
 *
 * iOS Safari silently zooms the page when a text field with a sub-16px face
 * takes focus, and does not zoom back out. The product runs at a 13px base, so
 * fields are bumped at phone width to keep Safari's hands off.
 */
@media (max-width: 767px) {
  input,
  textarea,
  select {
    font-size: 1rem;
  }

  /* Touch targets: "28px desktop controls become 44px - the contract, not a
     preference" (guidelines/mobile-touch). The system carries the phone values
     in tokens/mobile.css; re-pointing the two consumed tokens here grows every
     button and field in one move, instead of per-call-site min-height utilities
     (which the system's own unlayered min-height silently outranks anyway). */
  :root {
    --control-height: var(--m-control-height);
    --field-min-height: var(--m-field-height);
  }
}

@layer base {
  /*
   * Every control answers back: a hover shade, a visible press, and a keyboard
   * focus ring — the system's focus ring, not a bespoke one. Opted out with
   * `data-no-press` for surfaces that are technically buttons but visually a
   * row, card or menu item with their own treatment.
   */
  button:not(:disabled):not([data-no-press]),
  [role="button"]:not([aria-disabled="true"]):not([data-no-press]) {
    cursor: pointer;
    transition:
      background-color var(--dur-fast) ease,
      border-color var(--dur-fast) ease,
      box-shadow var(--dur-fast) ease,
      filter var(--dur-fast) ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  button:not(:disabled):not([data-no-press]):hover,
  [role="button"]:not([aria-disabled="true"]):not([data-no-press]):hover {
    filter: brightness(0.97);
  }

  button:not(:disabled):not([data-no-press]):active,
  [role="button"]:not([aria-disabled="true"]):not([data-no-press]):active {
    filter: brightness(0.94);
  }

  button:not(:disabled):not([data-no-press]):focus-visible,
  [role="button"]:not([aria-disabled="true"]):not([data-no-press]):focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  button:disabled {
    cursor: not-allowed;
  }
}

/* Buttons that pass an inline icon alongside their label (Lucide glyphs from
   pre-system screens) need the system's icon gap and 16px icon size, otherwise
   the glyph sits flush against the first letter. */
.as-btn__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-150);
}

.as-btn__label > svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* The block that follows a card's title strip keeps its own side padding, but
   its top padding halves: the title strip already pads that seam, and the two
   full pads together read as an empty band under every card title. */
.as-card__header + div,
.as-card__header + form {
  padding-top: calc(var(--card-padding) / 2);
}