/*
  N Car Garage — Design Tokens
  Paleta derivada diretamente da logo real do cliente (preto + vermelho + cromado).
  Ver README.md > "Onde alterar a identidade visual" para instruções de troca.
*/

:root {
  /* ===== Cor — base (preto profundo, não puro, com leve tom azulado neutro) ===== */
  --nc-bg: #0a0a0c;
  --nc-bg-soft: #111114;
  --nc-surface: #17171b;
  --nc-surface-2: #1e1f24;
  --nc-surface-3: #26272d;
  --nc-border: rgba(255, 255, 255, 0.08);
  --nc-border-strong: rgba(255, 255, 255, 0.16);
  --nc-border-red: rgba(228, 27, 44, 0.35);

  /* ===== Cor — vermelho de marca (extraído do "N" da logo) ===== */
  --nc-red: #e21b2c;
  --nc-red-dark: #a3101d;
  --nc-red-deep: #6e0a14;
  --nc-red-light: #ff4d5e;
  --nc-red-tint: rgba(226, 27, 44, 0.12);

  /* ===== Cor — cromado / prata (extraído do "CAR GARAGE" da logo) ===== */
  --nc-chrome: #c9cdd4;
  --nc-chrome-light: #eef0f3;
  --nc-chrome-dark: #8b8f97;

  /* ===== Cor — texto ===== */
  --nc-text-primary: #f6f6f8;
  --nc-text-secondary: #a8a9b1;
  --nc-text-tertiary: #6f707a;
  --nc-text-on-red: #ffffff;

  /* ===== Cor — estados semânticos (status operacional) ===== */
  --nc-status-disponivel: #2fb96a;
  --nc-status-reservado: #e8a33d;
  --nc-status-vendido: #6f707a;
  --nc-status-oculto: #4a4b52;

  /* ===== Tipografia ===== */
  --nc-font-display: "Oswald", "Arial Narrow", sans-serif;
  --nc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ===== Espaçamento ===== */
  --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;
  --nc-space-9: 96px;
  --nc-space-10: 128px;

  /* ===== Raio e sombra (uso controlado — nada de "tudo arredondado") ===== */
  --nc-radius-sm: 4px;
  --nc-radius-md: 8px;
  --nc-radius-lg: 14px;
  --nc-shadow-card: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  --nc-shadow-red: 0 12px 32px -12px rgba(226, 27, 44, 0.45);

  /* ===== Transições ===== */
  --nc-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nc-fast: 160ms;
  --nc-medium: 320ms;
  --nc-slow: 560ms;

  /* ===== Container ===== */
  --nc-max-width: 1360px;
  --nc-gutter: clamp(20px, 5vw, 64px);
}

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

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nc-bg);
  color: var(--nc-text-primary);
  font-family: var(--nc-font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

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

button {
  font-family: inherit;
}

.nc-container {
  max-width: var(--nc-max-width);
  margin: 0 auto;
  padding-inline: var(--nc-gutter);
}

.nc-eyebrow {
  font-family: var(--nc-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nc-red);
}

.nc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

::selection {
  background: var(--nc-red);
  color: #fff;
}

/* Scrollbar discreta (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--nc-bg); }
::-webkit-scrollbar-thumb { background: var(--nc-surface-3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--nc-chrome-dark); }