/* =========================================================================
matskomarket — Design Tokens
Ukrainian e-commerce. Friendly, trustworthy, slightly playful.
Use these tokens for ALL color, type, spacing, radii and shadow decisions.
========================================================================= */
/* ---------- Fonts ---------------------------------------------------------
Manrope (display) — round-but-geometric, sits next to the wordmark.
Inter (body) — uploaded locally; shipped variable + 18/24/28 optical
sizes for Cyrillic-grade UI text. Use Inter for body,
Manrope for headings/prices. JetBrains Mono for code.
-------------------------------------------------------------------------- */
/* Fonts (Manrope/Inter/JetBrains Mono) are loaded via in the layout
with display=optional. The @import that used to live here was a duplicate
render-blocking fetch with display=swap, which fought with the layout's
non-blocking preload and reintroduced font-swap CLS. Removed. */
:root {
/* =====================================================================
1. COLOR — Brand
===================================================================== */
/* Yolk yellow — the signature brand accent. Used for the wordmark "market"
half, primary CTAs, the cart icon, and tags. Use sparingly so it stays
loud. NEVER use as a body-text color. */
--brand-yolk: #FFD550;
--brand-yolk-soft: #FFE89A; /* hover/disabled tint, badge backgrounds */
--brand-yolk-deep: #E5B82A; /* pressed state, on-yellow icon outline */
/* Ink — the primary type and stroke color. Almost-black, slightly warm so
it sits well against the cream page. Use for body, headings, icon
strokes (1.5–2px), and the wordmark "matsko" half. */
--brand-ink: #1B1A17;
--brand-ink-2: #2C2A26; /* secondary ink — subheads, labels */
--brand-ink-3: #5A574F; /* muted body, captions */
--brand-ink-4: #8E897E; /* placeholders, disabled type */
/* Paper — the base canvas. Slightly warm cream so the yolk doesn't fight
a cold white. Pure white reserved for cards-on-paper. */
--paper: #FAF7F0;
--paper-2: #F2EEE2; /* zebra rows, hovered surface */
--paper-3: #E8E2D1; /* borders, dividers */
--surface: #FFFFFF; /* cards, modals, dropdowns */
/* =====================================================================
2. COLOR — Functional / status
Use these for system feedback only (success, sale, error, info).
Sale/discount red (Tomato) doubles as the "знижка / -%" badge color.
===================================================================== */
--tomato: #E0492B; /* sale price, error, "-25%" pill */
--tomato-soft: #FBE4DD; /* error background, sale chip bg */
--tomato-deep: #B43A21; /* tomato pressed */
--basil: #2F8F4E; /* in-stock, "fresh", success */
--basil-soft: #E0F1E5; /* success bg, in-stock chip */
--basil-deep: #1F6E3A;
--sky: #2A6FDB; /* informational links, Nova Poshta */
--sky-soft: #E2EBF8;
--honey: #C7891D; /* warning, "low stock" */
--honey-soft: #F8EBC8;
/* =====================================================================
3. SEMANTIC ALIASES
Components MUST consume these — never reach for raw brand vars in
component CSS. This is what lets us reskin the whole site by swapping
the alias layer.
===================================================================== */
--color-bg: var(--paper);
--color-bg-raised: var(--surface);
--color-bg-sunken: var(--paper-2);
--color-bg-hover: var(--paper-2);
--color-text: var(--brand-ink);
--color-text-muted: var(--brand-ink-3);
--color-text-subtle: var(--brand-ink-4);
--color-text-on-yolk: var(--brand-ink); /* always ink on yellow */
--color-text-on-tomato: #FFFFFF;
--color-text-inverse: var(--paper);
--color-border: var(--paper-3);
--color-border-strong: var(--brand-ink); /* for the "stamped" chip */
--color-accent: var(--brand-yolk);
--color-accent-hover: var(--brand-yolk-deep);
--color-accent-soft: var(--brand-yolk-soft);
--color-price: var(--brand-ink);
--color-price-sale: var(--tomato);
--color-price-was: var(--brand-ink-4); /* strikethrough was-price */
--color-success: var(--basil);
--color-danger: var(--tomato);
--color-warning: var(--honey);
--color-info: var(--sky);
/* =====================================================================
4. TYPE
Stack: Manrope for display/headings/prices, Inter for body/UI.
Both Cyrillic + Latin. Manrope brings warmth at large sizes; Inter is
the workhorse at small sizes (uploaded locally, opsz-aware).
===================================================================== */
/* "Manrope Fallback" / "Inter Fallback" are metrics-adjusted local Arial
declarations in layouts/app.blade.php — same line-height/ascent as
the target font so the swap (if it happens) shifts pixels by ~0
instead of jolting the page. */
--font-display: "Manrope", "Manrope Fallback", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: "Inter", "Inter Fallback", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Modular scale — 1.200 (minor third). Body = 16px on desktop, 15px mobile.
Display sizes are tight (-0.02em) and should sit on a 1.05 line-height. */
--fs-display-xl: 72px; --lh-display-xl: 1.02; --tk-display-xl: -0.03em;
--fs-display-lg: 56px; --lh-display-lg: 1.04; --tk-display-lg: -0.03em;
--fs-display-md: 44px; --lh-display-md: 1.06; --tk-display-md: -0.025em;
--fs-h1: 36px; --lh-h1: 1.10; --tk-h1: -0.02em;
--fs-h2: 28px; --lh-h2: 1.15; --tk-h2: -0.015em;
--fs-h3: 22px; --lh-h3: 1.25; --tk-h3: -0.01em;
--fs-h4: 18px; --lh-h4: 1.30; --tk-h4: -0.005em;
--fs-body-lg: 18px; --lh-body-lg: 1.55;
--fs-body: 16px; --lh-body: 1.55;
--fs-body-sm: 14px; --lh-body-sm: 1.50;
--fs-caption: 12px; --lh-caption: 1.40; --tk-caption: 0.04em;
--fs-overline: 11px; --lh-overline: 1.20; --tk-overline: 0.12em;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-extrabold: 800;
/* Type roles — components MUST use these tokens. Defines weight + size +
line-height + tracking together so callers can't mix-and-match by
accident. */
--type-display-xl: var(--fw-extrabold) var(--fs-display-xl)/var(--lh-display-xl) var(--font-display);
--type-display-lg: var(--fw-extrabold) var(--fs-display-lg)/var(--lh-display-lg) var(--font-display);
--type-display-md: var(--fw-extrabold) var(--fs-display-md)/var(--lh-display-md) var(--font-display);
--type-h1: var(--fw-extrabold) var(--fs-h1)/var(--lh-h1) var(--font-display);
--type-h2: var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-display);
--type-h3: var(--fw-bold) var(--fs-h3)/var(--lh-h3) var(--font-display);
--type-h4: var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-display);
--type-body-lg: var(--fw-regular) var(--fs-body-lg)/var(--lh-body-lg) var(--font-body);
--type-body: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
--type-body-strong:var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font-body);
--type-body-sm: var(--fw-regular) var(--fs-body-sm)/var(--lh-body-sm) var(--font-body);
--type-caption: var(--fw-medium) var(--fs-caption)/var(--lh-caption) var(--font-body);
--type-overline: var(--fw-bold) var(--fs-overline)/var(--lh-overline) var(--font-body);
--type-price: var(--fw-extrabold) var(--fs-h2)/1 var(--font-display);
--type-price-sm: var(--fw-extrabold) var(--fs-h4)/1 var(--font-display);
--type-mono: var(--fw-regular) var(--fs-body-sm)/1.45 var(--font-mono);
/* =====================================================================
5. SPACING — 4px base
Use the s-* tokens, not raw px, so we can retune density once.
===================================================================== */
--s-0: 0;
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-7: 32px;
--s-8: 40px;
--s-9: 48px;
--s-10: 64px;
--s-11: 80px;
--s-12: 96px;
--s-13: 128px;
/* Layout — mobile-first defaults, scaled up at breakpoints */
--container-max: 1600px; /* wide containers so desktop doesn't waste side margins */
--container-pad: 20px; /* mobile default — more breathing room near screen edges */
--grid-gutter: 16px; /* mobile default */
/* Breakpoints (use as min-width only — never max-width) */
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
/* =====================================================================
6. RADII
Soft but not rounded-blob. Pills for chips/CTAs, 12–16 for cards.
===================================================================== */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px; /* default — buttons, inputs */
--radius-lg: 16px; /* cards */
--radius-xl: 24px; /* hero blocks, modals */
--radius-pill: 999px; /* chips, badges, brand pill CTAs */
/* =====================================================================
7. ELEVATION
Subtle. Cream paper means we can lean on borders + tiny shadows.
===================================================================== */
--shadow-xs: 0 1px 2px rgba(27, 26, 23, 0.04);
--shadow-sm: 0 2px 6px rgba(27, 26, 23, 0.06), 0 1px 2px rgba(27, 26, 23, 0.04);
--shadow-md: 0 8px 20px rgba(27, 26, 23, 0.08), 0 2px 6px rgba(27, 26, 23, 0.05);
--shadow-lg: 0 20px 40px rgba(27, 26, 23, 0.12), 0 4px 12px rgba(27, 26, 23, 0.06);
--shadow-yolk: 0 6px 0 rgba(229, 184, 42, 0.55); /* the "stamped" CTA */
--shadow-ink: 0 4px 0 var(--brand-ink); /* hard-edge variant */
/* =====================================================================
8. MOTION
Snappy, not bouncy. Reach for these durations + easings only.
===================================================================== */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* cart "+1" only */
--dur-fast: 120ms;
--dur-base: 200ms;
--dur-slow: 320ms;
/* =====================================================================
9. Z-INDEX scale
===================================================================== */
--z-base: 1;
--z-sticky: 100;
--z-overlay: 500;
--z-modal: 1000;
--z-toast: 2000;
}
/* ----- Base reset + body type -------------------------------------------- */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font: var(--type-body);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--brand-yolk); color: var(--brand-ink); }
/* ----- Mobile-first breakpoints -----------------------------------------
Always min-width. Mobile is the default state of every component.
Override container padding + gutters as we grow up the scale. */
@media (min-width: 768px) {
:root {
--container-pad: 24px;
--grid-gutter: 20px;
}
}
@media (min-width: 1024px) {
:root {
--container-pad: 32px;
--grid-gutter: 24px;
}
}
/* ----- Dark theme --------------------------------------------------------
Opt-in via [data-theme="dark"] (or prefers-color-scheme). Inverts the
semantic surface/text/border tokens; brand yolk + accents stay the same
so the wordmark and CTA remain unmistakable. */
[data-theme="dark"] {
--paper: #161513;
--paper-2: #1F1D1A;
--paper-3: #2C2A26;
--surface: #1F1D1A;
--color-bg: #161513;
--color-bg-raised: #1F1D1A;
--color-bg-sunken: #121110;
--color-bg-hover: #2C2A26;
--color-text: #F5F1E6;
--color-text-muted: #B8B2A3;
--color-text-subtle: #8A8478;
--color-text-inverse: var(--brand-ink);
--color-border: #2C2A26;
--color-border-strong: var(--brand-yolk);
--tomato-soft: #3A1810;
--basil-soft: #0F2A1A;
--honey-soft: #2E2410;
--sky-soft: #11203A;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 8px 20px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
--shadow-ink: 0 4px 0 #000;
}
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
/* ----- Type utility classes (optional shortcuts) ------------------------- */
.t-display-xl { font: var(--type-display-xl); letter-spacing: var(--tk-display-xl); }
.t-display-lg { font: var(--type-display-lg); letter-spacing: var(--tk-display-lg); }
.t-display-md { font: var(--type-display-md); letter-spacing: var(--tk-display-md); }
.t-h1 { font: var(--type-h1); letter-spacing: var(--tk-h1); }
.t-h2 { font: var(--type-h2); letter-spacing: var(--tk-h2); }
.t-h3 { font: var(--type-h3); letter-spacing: var(--tk-h3); }
.t-h4 { font: var(--type-h4); letter-spacing: var(--tk-h4); }
.t-body-lg { font: var(--type-body-lg); }
.t-body { font: var(--type-body); }
.t-body-sm { font: var(--type-body-sm); }
.t-caption { font: var(--type-caption); letter-spacing: var(--tk-caption); }
.t-overline { font: var(--type-overline); letter-spacing: var(--tk-overline); text-transform: uppercase; color: var(--color-text-muted); }
.t-mono { font: var(--type-mono); }
.t-muted { color: var(--color-text-muted); }
.t-subtle { color: var(--color-text-subtle); }
.t-price { font: var(--type-price); color: var(--color-price); letter-spacing: -0.02em; }
.t-price-sale { font: var(--type-price); color: var(--color-price-sale); letter-spacing: -0.02em; }
.t-price-was { font: var(--type-h4); color: var(--color-price-was); text-decoration: line-through; text-decoration-thickness: 2px; }
/* ----- Badge component ---------------------------------------------------
Use these classes; never inline-style a badge. Stamp on a card or chip-row.
Compose tone via .badge--. All keep 24px min-height for hit area
in interactive contexts. */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: var(--radius-pill);
font: var(--type-caption);
letter-spacing: var(--tk-caption);
text-transform: uppercase;
white-space: nowrap;
border: 1px solid transparent;
line-height: 1.2;
}
.badge svg { width: 12px; height: 12px; flex: none; }
/* Новинка — neutral, ink on paper */
.badge--new { background: var(--color-bg-raised); color: var(--color-text); border-color: var(--color-border-strong); }
/* Акція / Знижка — tomato accent */
.badge--sale { background: var(--tomato); color: #fff; }
/* Топ продажів — yolk */
.badge--top { background: var(--brand-yolk); color: var(--brand-ink); border-color: var(--brand-ink); }
/* Веган — forest green */
.badge--vegan { background: var(--basil-soft); color: var(--basil-deep); border-color: rgba(31, 110, 58, 0.25); }
/* Кето — quiet honey-on-paper, not shouty */
.badge--keto { background: var(--honey-soft); color: var(--honey); border-color: rgba(199, 137, 29, 0.25); }
/* Free-from — outline grey, applies to без глютену / лактози / цукру */
.badge--free-from { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); }
/* Stock state */
.badge--out { background: var(--paper-2); color: var(--color-text-subtle); border-color: var(--color-border); }
.badge--low { background: var(--honey-soft); color: var(--honey); }
.badge--instock { background: var(--basil-soft); color: var(--basil-deep); }