/**
 * Sport Store — shared design tokens (Tailwind CSS v4, CSS-first configuration).
 *
 * This file is the SINGLE source of truth for the visual language of both the
 * storefront and the admin dashboard. Apps import it after `@import "tailwindcss"`.
 *
 * Direction: modern, premium, minimal, sport-oriented (Nike / Gymshark spirit).
 * High-contrast neutrals, one energetic accent, generous whitespace, tight type.
 */

@theme {
  /* ---- Brand ------------------------------------------------------------ */
  /* Near-black ink, not pure black: prints and photographs better. */
  --color-ink-50: oklch(0.98 0.002 260);
  --color-ink-100: oklch(0.95 0.003 260);
  --color-ink-200: oklch(0.89 0.004 260);
  --color-ink-300: oklch(0.78 0.005 260);
  --color-ink-400: oklch(0.63 0.006 260);
  --color-ink-500: oklch(0.51 0.007 260);
  --color-ink-600: oklch(0.41 0.008 260);
  --color-ink-700: oklch(0.32 0.009 260);
  --color-ink-800: oklch(0.23 0.01 260);
  --color-ink-900: oklch(0.16 0.011 260);
  --color-ink-950: oklch(0.11 0.012 260);

  /* Energetic accent — "volt". Used sparingly: CTAs, price, sale badges. */
  --color-volt-50: oklch(0.97 0.06 125);
  --color-volt-100: oklch(0.94 0.11 125);
  --color-volt-200: oklch(0.9 0.16 125);
  --color-volt-300: oklch(0.86 0.2 125);
  --color-volt-400: oklch(0.82 0.23 125);
  --color-volt-500: oklch(0.76 0.24 125);
  --color-volt-600: oklch(0.66 0.21 125);
  --color-volt-700: oklch(0.54 0.17 125);
  --color-volt-800: oklch(0.43 0.13 125);
  --color-volt-900: oklch(0.35 0.1 125);

  /* Semantic */
  --color-sale: oklch(0.58 0.21 27);
  --color-success: oklch(0.65 0.16 155);
  --color-warning: oklch(0.78 0.15 80);
  --color-danger: oklch(0.58 0.22 27);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: var(--font-display), var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --tracking-display: -0.03em;

  /* ---- Layout ----------------------------------------------------------- */
  --spacing-gutter: 1.25rem;
  --container-page: 90rem;

  --radius-card: 0.25rem;
  --radius-pill: 999px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --animate-rise: rise 0.5s var(--ease-out-quint) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@layer base {
  :root {
    color-scheme: light;
  }

  html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Sport/streetwear headings: tight, uppercase-capable, no letterspacing drift. */
  h1,
  h2,
  h3 {
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }

  ::selection {
    background-color: var(--color-volt-300);
    color: var(--color-ink-950);
  }
}