/* 12shoes global UI contract. Import this file before every future page stylesheet. */
:root {
  --color-primary: #f26322;
  --color-ink: #172129;
  --color-information: #0f5063;
  --color-muted: #68767d;
  --color-surface: #f7f8f6;
  --color-white: #ffffff;
  --color-divider: #cbd4d6;
  --font-display: "Onest", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Onest", "Helvetica Neue", Arial, sans-serif;
  --type-label: .75rem;
  --type-ui: .875rem;
  --type-body: 1rem;
  --type-title: 1.5rem;
  --type-section: clamp(2.25rem, 4vw, 3.75rem);
  --type-display: clamp(3.5rem, 6vw, 6rem);
  --leading-body: 1.55;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 72px;
  --radius-none: 0px;
  --radius-control: 10px;
  --radius-media: 14px;
  --duration-state: 180ms;
  --ease-state: cubic-bezier(.22, 1, .36, 1);
  --z-nav: 10;
  --z-dropdown: 20;
  --z-modal: 30;

  /* Legacy aliases: page styles must resolve through these global tokens. */
  --ink: var(--color-ink);
  --teal: var(--color-information);
  --grey: var(--color-muted);
  --line: var(--color-divider);
  --paper: var(--color-surface);
  --white: var(--color-white);
  --orange: var(--color-primary);
  --shell: min(1400px, calc(100vw - 80px));
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-surface); color: var(--color-ink); font-family: var(--font-body); font-size: var(--type-body); font-kerning: normal; font-optical-sizing: auto; line-height: var(--leading-body); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border-radius: var(--radius-control); }
a { color: inherit; }
img { display: block; max-width: 100%; border-radius: var(--radius-media); }
h1, h2, h3 { text-wrap: balance; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.ds-label { color: var(--color-information); font-family: var(--font-display); font-size: var(--type-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ds-button-primary, .ds-button-secondary { min-height: 48px; padding: 13px 18px; border-radius: var(--radius-control); font-family: var(--font-display); font-size: var(--type-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background var(--duration-state) var(--ease-state), border-color var(--duration-state) var(--ease-state), color var(--duration-state) var(--ease-state), transform var(--duration-state) var(--ease-state); }
.ds-button-primary { border: 1px solid var(--color-primary); background: var(--color-primary); color: var(--color-white); }
.ds-button-primary:hover { border-color: var(--color-ink); background: var(--color-ink); }
.ds-button-secondary { border: 1px solid var(--color-ink); background: transparent; color: var(--color-ink); }
.ds-button-secondary:hover { background: var(--color-ink); color: var(--color-white); }
.ds-button-primary:active, .ds-button-secondary:active { transform: translateY(1px); }
.size-matrix, .cart-table, .overview-grid { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 1100px) {
  :root { --shell: min(100% - 48px, 1000px); }
}

@media (max-width: 760px) {
  :root { --shell: calc(100vw - 32px); }
}