97 lines
3.0 KiB
CSS
97 lines
3.0 KiB
CSS
/**
|
|
* 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);
|
|
}
|
|
}
|