/**
 * Tema Magnetica V2 — design tokens and primitives.
 * The visual language follows the established MAGSY Czech storefront.
 */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../fonts/jost-400.woff2") format("woff2"),
       url("../fonts/jost-400.ttf") format("truetype");
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url("../fonts/jost-600.woff2") format("woff2"),
       url("../fonts/jost-600.ttf") format("truetype");
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("../fonts/jost-700.woff2") format("woff2"),
       url("../fonts/jost-700.ttf") format("truetype");
}

:root {
  --mv2-color-brand-900: #003b65;
  --mv2-color-brand-700: #006fb9;
  --mv2-color-brand-600: #0782cf;
  --mv2-color-brand-100: #edf7ff;
  --mv2-color-nav: #050b12;
  --mv2-color-accent-600: #f51f2c;
  --mv2-color-accent-700: #d91421;
  --mv2-color-ink: #252729;
  --mv2-color-muted: #555658;
  --mv2-color-line: #e6e7e8;
  --mv2-color-soft: #f5f5f5;
  --mv2-color-soft-blue: #eef7ff;
  --mv2-color-white: #fff;
  --mv2-color-success: #42ad2b;
  --mv2-font-sans: "Jost", Arial, sans-serif;
  --mv2-text-xs: .75rem;
  --mv2-text-sm: .875rem;
  --mv2-text-base: 1rem;
  --mv2-text-lg: 1.125rem;
  --mv2-text-xl: clamp(1.35rem, 2vw, 1.75rem);
  --mv2-text-2xl: clamp(1.9rem, 3vw, 2.55rem);
  --mv2-leading-tight: 1.2;
  --mv2-leading-normal: 1.5;
  --mv2-space-1: .25rem;
  --mv2-space-2: .5rem;
  --mv2-space-3: .75rem;
  --mv2-space-4: 1rem;
  --mv2-space-5: 1.5rem;
  --mv2-space-6: 2.5rem;
  --mv2-space-7: 4rem;
  --mv2-radius-sm: .25rem;
  --mv2-radius-md: .375rem;
  --mv2-radius-lg: .625rem;
  --mv2-shadow-sm: 0 2px 8px rgb(15 28 40 / .08);
  --mv2-shadow-md: 0 14px 38px rgb(15 28 40 / .13);
  --mv2-container: 90rem;
  /* Înălțimea antetului lipit. Valoarea este măsurată și rescrisă de
     v2-components.js; aceasta este doar aproximarea pentru prima randare. */
  --mv2-header-offset: 14rem;
  --mv2-focus: 0 0 0 .2rem rgb(0 111 185 / .24);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--mv2-color-white);
  color: var(--mv2-color-muted);
  font-family: var(--mv2-font-sans);
  font-size: var(--mv2-text-base);
  line-height: var(--mv2-leading-normal);
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

a {
  color: var(--mv2-color-brand-700);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

a:hover {
  color: var(--mv2-color-accent-600);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  border-radius: var(--mv2-radius-sm);
  box-shadow: var(--mv2-focus);
  outline: 2px solid transparent;
}

h1,
h2,
h3,
h4 {
  color: var(--mv2-color-ink);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--mv2-leading-tight);
}

h1 { font-size: var(--mv2-text-2xl); }
h2 { font-size: var(--mv2-text-xl); }

.container,
.container-md,
.mv2-container {
  margin-inline: auto;
  max-width: var(--mv2-container);
  padding-inline: .625rem;
  width: 100%;
}

.mv2-grid { display: grid; gap: var(--mv2-space-5); }
.mv2-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mv2-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mv2-stack { display: flex; flex-direction: column; gap: var(--mv2-space-4); }

.mv2-button,
:where(.btn-primary, .add-to-cart) {
  align-items: center;
  background: var(--mv2-color-accent-600);
  border: 1px solid var(--mv2-color-accent-600);
  border-radius: 0;
  color: var(--mv2-color-white);
  cursor: pointer;
  display: inline-flex;
  font-size: .875rem;
  font-weight: 700;
  gap: var(--mv2-space-2);
  justify-content: center;
  min-height: 2.75rem;
  padding: .65rem 1.25rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .16s ease, border-color .16s ease;
}

.mv2-button:hover,
:where(.btn-primary, .add-to-cart):hover {
  background: var(--mv2-color-accent-700);
  border-color: var(--mv2-color-accent-700);
  color: var(--mv2-color-white);
}

.mv2-button--secondary {
  background: var(--mv2-color-white);
  border-color: var(--mv2-color-line);
  color: var(--mv2-color-ink);
}

:where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  background: var(--mv2-color-white);
  border: 1px solid var(--mv2-color-line);
  border-radius: 0;
  min-height: 2.75rem;
  padding: .65rem .75rem;
}

@media (max-width: 61.99rem) {
  .mv2-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 35.99rem) {
  .mv2-grid--2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto; transition-duration: .01ms; }
}