/* Variant B "čistá": calm, photo-led direction with light surfaces.
   Load after tokens.css. Overrides type, shape and the default surface;
   graphite (.surface-dark) stays for product moments such as the exploded view. */

:root {
  --white: #ffffff;
  --mist: #f2f4f6;

  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --stretch-display: 100%;
  --weight-display: 600;
  --weight-heading: 600;
  --tracking-display: -0.03em;
  --tracking-label: 0.01em;
  --leading-tight: 1.05;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
}

:root,
.surface-white {
  --bg: var(--white);
  --bg-raised: var(--mist);
  --bg-sunken: var(--alu-100);
  --fg: #16181b;
  --fg-muted: #5f6670;
  --line: #e4e6ea;
  --line-strong: #cfd3d9;
  --accent: var(--led-600);
  --accent-text: var(--led-700);
  --accent-glow: rgb(26 156 207 / 0.25);
  --brand: var(--red-500);
  --brand-text: var(--red-600);
  --focus: var(--led-600);
  --ok: var(--green-700);
  --warn: var(--amber-700);
  --error: var(--red-600);
  --tier-special: var(--red-600);
  --tier-intro: var(--led-700);
  --tier-sale: var(--graphite-600);
  --shadow-raised: 0 1px 2px rgb(22 24 27 / 0.05), 0 18px 40px -24px rgb(22 24 27 / 0.25);
  --glow-led: 0 0 0 1px var(--accent), 0 0 14px var(--accent-glow);
  color-scheme: light;
}

/* Light grey band; inherits the light roles and only swaps the backgrounds */
.surface-mist {
  --bg: var(--mist);
  --bg-raised: var(--white);
}

.surface-white,
.surface-mist {
  background: var(--bg);
  color: var(--fg);
}