/* Shared base for the new page styles: design tokens (--sk-*) on :root, and the .sk scope class
   with base typography and zero-specificity :where() resets that never beat a page class.
   Usage: class="sk <page>" on the page root (e.g. "sk pdp", "sk fp"); load this file before the page CSS.
   Change shared colors and resets here, not as copies in page files.
   This file is in both whitelabelshop-logitrade-dk (the original) and basket-logitrade-dk (a copy): change the original, then copy it. */

:root {
	--sk-ink: #2b3140;
	--sk-text: #414a5a;
	--sk-muted: #5a6272;
	--sk-accent: #315b6b;
	--sk-accent-dark: #264a58;
	--sk-red: #d6455a;
	--sk-green: #2f9e6b;
	--sk-save: #1e7a52;
	--sk-amber: #e08a00;
	--sk-line: #e8e2d8;
	--sk-line-strong: #d6cdc0;
	--sk-soft: #f2eee8;
	--sk-soft-2: #f8f6f2;
	--sk-radius: 8px;
	--sk-radius-sm: 4px;
}

/* Scope: base typography and color for new page sections. The font (Rubik) is inherited from the site. */
.sk {
	color: var(--sk-text);
	background: #fff;
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* :where() resets have lower specificity than any page class */
.sk *, .sk *::before, .sk *::after { box-sizing: border-box; }
:where(.sk) a { color: var(--sk-accent); text-decoration: none; }
:where(.sk) a:hover { color: var(--sk-accent-dark); text-decoration: underline; }
:where(.sk) img { max-width: 100%; height: auto; display: block; }
:where(.sk) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.sk) fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
:where(.sk) legend { padding: 0; float: left; width: auto; margin: 0; font-size: inherit; line-height: inherit; }
:where(.sk) strong { color: var(--sk-ink); font-weight: 500; }

/* skisport-v2.css sets a { color: ... !important }. Rather than fight it with !important, links that
   aren't accent-colored get an inner <span class="sk-t-*">, which the rule on <a> doesn't reach. */
.sk-t-ink { color: var(--sk-ink); }
.sk-t-text { color: var(--sk-text); }
.sk-t-muted { color: var(--sk-muted); }
:where(.sk) a:hover .sk-t-ink, :where(.sk) a:hover .sk-t-text, :where(.sk) a:hover .sk-t-muted { color: var(--sk-ink); }