/* ============================================================ ARTNEST — DESIGN TOKENS (single source of truth) Kreativní stavebnice · neon & 3D obrazy · dekorace · dárky Strategie barev: povýšená růžová DNA → vytříbený KORÁL + hluboký INKOUST + krémový PODKLAD. NAČÍTAT JAKO PRVNÍ v — před všemi ostatními custom CSS. ============================================================ */ /* ---- FONTY (display=swap) — Bricolage Grotesque + Inter ---- */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Inter:wght@400;500;600;700&display=swap'); :root { /* ---- BARVY: jádro ---- */ --color-bg: #FBF8F3; --color-surface: #FFFFFF; --color-surface-2: #F4EEE5; --color-ink: #1E1B19; --color-ink-2: #5E574E; --color-ink-3: #938A7E; /* ---- BARVY: akcenty ---- */ --color-coral: #ED4D6E; --color-coral-press: #D43658; --color-coral-soft: #FCE4E9; --color-cobalt: #2E6BFF; --color-cobalt-soft: #E4ECFF; --color-amber: #E8973A; --color-amber-soft: #FBEBD9; /* ---- BARVY: sémantické ---- */ --color-line: #ECE4D8; --color-line-strong: #DDD2C2; --color-success: #1F8A5B; --color-success-soft: #E0F2E9; --color-sale: #ED4D6E; --color-sale-soft: #FCE4E9; /* ---- TYPOGRAFIE ---- */ --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --fs-h1: 3.5rem; --fs-h2: 2.25rem; --fs-h3: 1.5rem; --fs-lg: 1.25rem; --fs-body: 1rem; --fs-sm: 0.8125rem; --fs-xs: 0.6875rem; --lh-tight: 1.04; --lh-snug: 1.18; --lh-base: 1.6; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; /* ---- SPACING (8px grid) ---- */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-24:6rem; /* ---- RADIUS ---- */ --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px; /* ---- STÍNY ---- */ --shadow-xs:0 1px 2px rgba(30,27,25,.05); --shadow-sm:0 2px 8px rgba(30,27,25,.06); --shadow-md:0 8px 24px rgba(30,27,25,.08); --shadow-lg:0 18px 48px rgba(30,27,25,.12); /* ---- LAYOUT / MOTION ---- */ --container:1200px; --header-h:72px; --ease:cubic-bezier(.2,.7,.3,1); --dur-fast:120ms; --dur:200ms; --dur-slow:380ms; } @media (max-width:720px){ :root{ --fs-h1:2.125rem; --fs-h2:1.625rem; --fs-h3:1.25rem; --fs-lg:1.125rem; } } /* ---- KOMPONENTOVÉ PRIMITIVY ---- */ .btn{font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--fs-body); border-radius:var(--radius-pill);padding:.875rem 1.6rem;border:1px solid transparent;cursor:pointer; display:inline-flex;align-items:center;justify-content:center;gap:.5rem; transition:transform var(--dur-fast) var(--ease),background var(--dur) var(--ease)} .btn:active{transform:translateY(1px)} .btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-coral-soft)} .btn--primary{background:var(--color-coral);color:#fff} .btn--primary:hover{background:var(--color-coral-press)} .btn--secondary{background:transparent;color:var(--color-ink);border-color:var(--color-line-strong)} .btn--secondary:hover{background:var(--color-surface-2)} .btn--dark{background:var(--color-ink);color:#fff} .btn--block{width:100%} .card{background:var(--color-surface);border:1px solid var(--color-line); border-radius:var(--radius-md);box-shadow:var(--shadow-xs)} .badge{font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase; letter-spacing:.04em;padding:4px 10px;border-radius:var(--radius-pill);display:inline-block} .badge--bestseller{background:var(--color-amber-soft);color:var(--color-amber)} .badge--new{background:var(--color-cobalt-soft);color:var(--color-cobalt)} .badge--sale{background:var(--color-sale-soft);color:var(--color-sale)} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} }