@import 'tailwindcss';

/*
 * Design tokens. Palette comes from the showroom floor:
 *   ink    - deep forest-black for the sidebar
 *   plate  - the yellow of a Kenyan rear number plate (used once: the branch chip)
 *   ground - cool grey work surface so tables and forms stay readable all day
 */
@theme {
    --font-sans: 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --color-ink: #10231d;
    --color-ink-soft: #1a342b;
    --color-ink-line: #2b4a3f;
    --color-ground: #f1f4f3;
    --color-panel: #ffffff;
    --color-line: #d8dfdc;
    --color-text: #17211e;
    --color-muted: #5b6b66;
    --color-plate: #f2c500;
    --color-go: #1b7f57;
    --color-stop: #b3261e;
}

@layer base {
    html { font-family: var(--font-sans); color: var(--color-text); background: var(--color-ground); }
    body { font-variant-numeric: tabular-nums; }          /* prices and VINs line up in columns */
    :focus-visible { outline: 3px solid var(--color-plate); outline-offset: 2px; }
}

@layer components {
    .field   { @apply block w-full rounded-md border border-line bg-white px-3 py-2 text-sm text-text shadow-sm focus:border-ink focus:ring-0; }
    .btn     { @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-semibold transition-colors; }
    .btn-primary { @apply btn bg-ink text-white hover:bg-ink-soft; }
    .btn-quiet   { @apply btn border border-line bg-white text-text hover:bg-ground; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}