/* Wolf Auto Parts - Shared CSS foundations */

@font-face {
  font-family: "Inter";
  src:
    local("Inter Variable"),
    local("Inter"),
    url("inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --wolf-font-family:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --wolf-gold: #f7941d;
  --wolf-gold-hover: #d97e0a;
  --wolf-gold-light: #fef7ed;
  --wolf-gold-bg: #fef0dd;
  --wolf-gold-warm: #fdf0d5;
  --wolf-blue: #1b3a6b;
  --wolf-blue-hover: #132c54;
  --wolf-amber: #d97706;

  --wolf-text: #333;
  --wolf-text-dark: #222;
  --wolf-text-body: #666;
  --wolf-text-muted: #6b7280;
  --wolf-text-faint: #888;
  --wolf-text-inverse: #fff;
  --wolf-link: #1a73e8;
  --wolf-link-hover: #0d47a1;

  --wolf-border: #e5e5e5;
  --wolf-border-light: #ccc;
  --wolf-border-faint: #ddd;
  --wolf-border-strong: #d0d5dd;
  --wolf-border-emphasis: #bbb;
  --wolf-border-selected: #1a73e8;
  --wolf-border-warning: #f0c040;
  --wolf-border-danger: #dc2626;

  --wolf-bg: #fff;
  --wolf-bg-light: #f0f0f0;
  --wolf-bg-subtle: #f5f5f5;
  --wolf-bg-hover: #e0e0e0;
  --wolf-bg-muted: #f0f2f5;
  --wolf-bg-muted-hover: #e4e6ea;
  --wolf-bg-panel: #fafafa;
  --wolf-bg-selection: #f0f7ff;
  --wolf-bg-info: #f0f4fa;
  --wolf-bg-success: #e8f5e9;
  --wolf-bg-success-strong: #dcfce7;
  --wolf-bg-warning: #fff8e1;
  --wolf-bg-warning-soft: #fff3cd;
  --wolf-bg-danger: #fee2e2;
  --wolf-bg-danger-soft: #fef2f2;
  --wolf-bg-accent: #fce4ec;
  --wolf-bg-surface: #f8fafb;
  --wolf-bg-tag: #f8f8f8;

  --wolf-status-success: #16a34a;
  --wolf-status-success-dark: #166534;
  --wolf-status-success-alt: #2e7d32;
  --wolf-status-error: #dc2626;
  --wolf-status-error-dark: #991b1b;
  --wolf-status-warning: #e65100;
  --wolf-status-warning-dark: #7a5a00;
  --wolf-status-info: #2563eb;
  --wolf-status-info-dark: #1565c0;
  --wolf-status-info-strong: #1a73e8;
  --wolf-status-accent: #ad1457;

  --wolf-shadow-focus: 0 0 0 3px rgba(247, 148, 29, 0.2);
  --wolf-shadow-focus-blue: 0 0 0 3px rgba(27, 58, 107, 0.16);
  --wolf-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --wolf-shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2);

  --wolf-z-header: 1000;
  --wolf-z-dropdown: 1001;
  --wolf-z-panel-backdrop: 9000;
  --wolf-z-panel: 9001;
  --wolf-z-chat-window: 9998;
  --wolf-z-chat-bubble: 9999;
  --wolf-z-overlay: 10000;
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--wolf-bg);
  color: var(--wolf-text);
  font-family: var(--wolf-font-family);
  font-size: 1.4rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

:where(
  .wolf-header,
  .wolf-footer,
  .wolf-hero,
  .wolf-makes,
  .wolf-value-props,
  .wolf-cart-page,
  .wolf-panel-overlay,
  .wolf-parts-page,
  .wolf-mp-container,
  .wolf-lightbox,
  .wolf-chat-bubble,
  .wolf-chat-window,
  .wolf-sell-car,
  .header__icons
) :where(
  a[href],
  button,
  [role="button"],
  input,
  select,
  textarea,
  summary,
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid var(--wolf-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .wolf-header,
    .wolf-footer,
    .wolf-hero,
    .wolf-makes,
    .wolf-value-props,
    .wolf-cart-page,
    .wolf-panel-overlay,
    .wolf-parts-page,
    .wolf-mp-container,
    .wolf-lightbox,
    .wolf-chat-bubble,
    .wolf-chat-window,
    .wolf-sell-car,
    .header__icons
  ) *,
  :where(
    .wolf-header,
    .wolf-footer,
    .wolf-hero,
    .wolf-makes,
    .wolf-value-props,
    .wolf-cart-page,
    .wolf-panel-overlay,
    .wolf-parts-page,
    .wolf-mp-container,
    .wolf-lightbox,
    .wolf-chat-bubble,
    .wolf-chat-window,
    .wolf-sell-car,
    .header__icons
  ) *::before,
  :where(
    .wolf-header,
    .wolf-footer,
    .wolf-hero,
    .wolf-makes,
    .wolf-value-props,
    .wolf-cart-page,
    .wolf-panel-overlay,
    .wolf-parts-page,
    .wolf-mp-container,
    .wolf-lightbox,
    .wolf-chat-bubble,
    .wolf-chat-window,
    .wolf-sell-car,
    .header__icons
  ) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}