/* =========================================================================
   hackable – Design Tokens
   Drei Richtungen zum Vergleich: [data-dir="a"|"b"|"c"]
   Hell/Dunkel: [data-theme="light"|"dark"], sonst prefers-color-scheme
   ========================================================================= */

/* ---------- Schriften (selbst gehostet, SIL OFL) ---------- */
@font-face { font-family: "Space Grotesk"; src: url(../fonts/spacegrotesk.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url(../fonts/inter.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url(../fonts/bricolage.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(../fonts/plexsans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/plexmono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/plexmono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(../fonts/fraunces.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(../fonts/instrument.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }

/* ---------- Gemeinsame Basis ---------- */
:root {
  /* Fluid Type Scale (Ratio ~1.25 → ~1.33) */
  --step--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.78rem);
  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.40vw, 1.38rem);
  --step-2:  clamp(1.42rem, 1.26rem + 0.80vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.45rem + 1.50vw, 2.65rem);
  --step-4:  clamp(2.15rem, 1.60rem + 2.70vw, 3.75rem);
  --step-5:  clamp(2.6rem, 1.70rem + 4.40vw, 5.4rem);

  /* Spacing (4er-Raster) */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem;

  --measure: 64ch;
  --page: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;

  /* Offenheitsstufen & Status: Rohfarben pro Richtung, Mischungen hier zentral */
  --lv-open-bg:      color-mix(in oklab, var(--lv-open) 14%, var(--surface));
  --lv-sdk-bg:       color-mix(in oklab, var(--lv-sdk) 14%, var(--surface));
  --lv-community-bg: color-mix(in oklab, var(--lv-community) 14%, var(--surface));
  --lv-hardware-bg:  color-mix(in oklab, var(--lv-hardware) 16%, var(--surface));
  --lv-open-fg:      color-mix(in oklab, var(--lv-open) 72%, var(--ink));
  --lv-sdk-fg:       color-mix(in oklab, var(--lv-sdk) 72%, var(--ink));
  --lv-community-fg: color-mix(in oklab, var(--lv-community) 72%, var(--ink));
  --lv-hardware-fg:  color-mix(in oklab, var(--lv-hardware) 68%, var(--ink));

  --accent-soft: color-mix(in oklab, var(--accent) 14%, var(--surface));
  --line-strong: color-mix(in oklab, var(--ink) 22%, var(--bg));
}

/* =========================================================================
   A · SCHALTPLAN — technisch-präzise, warmes Papier, Signal-Orange
   ========================================================================= */
[data-dir="a"] {
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display-weight: 600; --display-tracking: -0.035em; --display-leading: 1.02;
  --heading-weight: 600; --heading-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
  --radius-s: 4px; --radius-m: 8px; --radius-l: 14px; --radius-pill: 999px;
  --icon-stroke: 1.6;
  --card-shadow: 0 1px 0 rgb(0 0 0 / .04);
  --card-shadow-hover: 0 10px 30px -12px rgb(20 20 20 / .22);
}
[data-dir="a"], [data-dir="a"][data-theme="light"] {
  --bg: #F4F3EE; --surface: #FFFFFF; --surface-2: #ECEAE3;
  --ink: #121316; --ink-2: #4E525A; --ink-3: #80848B; --line: #DEDBD2;
  --accent: #FF4F00; --accent-ink: #FFFFFF; --accent-text: #D13F00;
  --lv-open: #13945A; --lv-sdk: #2A64F6; --lv-community: #8447F5; --lv-hardware: #C88500;
  --st-rumor: #80848B; --st-announced: #C88500; --st-released: #13945A; --st-discontinued: #B23A3A;
  --bg-pattern: radial-gradient(circle at 1px 1px, rgb(0 0 0 / .07) 1px, transparent 0) 0 0 / 22px 22px;
}
@media (prefers-color-scheme: dark) { :root[data-dir="a"]:not([data-theme="light"]) {
  --bg: #0F1012; --surface: #17191C; --surface-2: #202328;
  --ink: #F2F1EC; --ink-2: #B4B6BA; --ink-3: #82858B; --line: #2A2D33;
  --accent: #FF6424; --accent-ink: #120700; --accent-text: #FF8650;
  --lv-open: #3DD68C; --lv-sdk: #6E98FF; --lv-community: #AE87FF; --lv-hardware: #F2B636;
  --st-rumor: #8A8E95; --st-announced: #F2B636; --st-released: #3DD68C; --st-discontinued: #F07272;
  --bg-pattern: radial-gradient(circle at 1px 1px, rgb(255 255 255 / .06) 1px, transparent 0) 0 0 / 22px 22px;
  --card-shadow-hover: 0 12px 34px -12px rgb(0 0 0 / .7);
}}
[data-dir="a"][data-theme="dark"] {
  --bg: #0F1012; --surface: #17191C; --surface-2: #202328;
  --ink: #F2F1EC; --ink-2: #B4B6BA; --ink-3: #82858B; --line: #2A2D33;
  --accent: #FF6424; --accent-ink: #120700; --accent-text: #FF8650;
  --lv-open: #3DD68C; --lv-sdk: #6E98FF; --lv-community: #AE87FF; --lv-hardware: #F2B636;
  --st-rumor: #8A8E95; --st-announced: #F2B636; --st-released: #3DD68C; --st-discontinued: #F07272;
  --bg-pattern: radial-gradient(circle at 1px 1px, rgb(255 255 255 / .06) 1px, transparent 0) 0 0 / 22px 22px;
  --card-shadow-hover: 0 12px 34px -12px rgb(0 0 0 / .7);
}

/* =========================================================================
   B · PATCHKABEL — expressiv, kräftige Grotesk, Kabelfarben, Lime-Akzent
   ========================================================================= */
[data-dir="b"] {
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-text: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --display-weight: 780; --display-tracking: -0.04em; --display-leading: 0.98;
  --heading-weight: 700; --heading-tracking: -0.025em;
  --eyebrow-tracking: 0.04em;
  --radius-s: 8px; --radius-m: 16px; --radius-l: 26px; --radius-pill: 999px;
  --icon-stroke: 1.9;
  --card-shadow: none;
  --card-shadow-hover: 0 18px 40px -18px rgb(0 0 0 / .35);
}
[data-dir="b"], [data-dir="b"][data-theme="light"] {
  --bg: #FAFAF6; --surface: #FFFFFF; --surface-2: #F0F0EA;
  --ink: #0D0D12; --ink-2: #4A4B55; --ink-3: #7E7F88; --line: #E4E4DD;
  --accent: #C6F031; --accent-ink: #0D0D12; --accent-text: #4E7300;
  --lv-open: #10B473; --lv-sdk: #1E8FFF; --lv-community: #F0448E; --lv-hardware: #F29A00;
  --st-rumor: #7E7F88; --st-announced: #F29A00; --st-released: #10B473; --st-discontinued: #E5484D;
  --bg-pattern: none;
}
@media (prefers-color-scheme: dark) { :root[data-dir="b"]:not([data-theme="light"]) {
  --bg: #0B0C0F; --surface: #15171C; --surface-2: #1E2128;
  --ink: #F4F4EF; --ink-2: #B3B5BD; --ink-3: #7F828C; --line: #262932;
  --accent: #C6F031; --accent-ink: #0D0D12; --accent-text: #D3F55E;
  --lv-open: #2EE59D; --lv-sdk: #4DA8FF; --lv-community: #FF6BAA; --lv-hardware: #FFB338;
  --st-rumor: #8B8E98; --st-announced: #FFB338; --st-released: #2EE59D; --st-discontinued: #FF6B70;
  --card-shadow-hover: 0 18px 44px -16px rgb(0 0 0 / .8);
}}
[data-dir="b"][data-theme="dark"] {
  --bg: #0B0C0F; --surface: #15171C; --surface-2: #1E2128;
  --ink: #F4F4EF; --ink-2: #B3B5BD; --ink-3: #7F828C; --line: #262932;
  --accent: #C6F031; --accent-ink: #0D0D12; --accent-text: #D3F55E;
  --lv-open: #2EE59D; --lv-sdk: #4DA8FF; --lv-community: #FF6BAA; --lv-hardware: #FFB338;
  --st-rumor: #8B8E98; --st-announced: #FFB338; --st-released: #2EE59D; --st-discontinued: #FF6B70;
  --card-shadow-hover: 0 18px 44px -16px rgb(0 0 0 / .8);
}

/* =========================================================================
   C · DATENBLATT — editorial, Serif-Display, Cremepapier, Ultramarin
   ========================================================================= */
[data-dir="c"] {
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-text: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --display-weight: 560; --display-tracking: -0.025em; --display-leading: 1.04;
  --heading-weight: 560; --heading-tracking: -0.015em;
  --eyebrow-tracking: 0.12em;
  --radius-s: 2px; --radius-m: 3px; --radius-l: 4px; --radius-pill: 999px;
  --icon-stroke: 1.35;
  --card-shadow: none;
  --card-shadow-hover: 0 0 0 1px var(--ink);
}
[data-dir="c"], [data-dir="c"][data-theme="light"] {
  --bg: #F2EEE4; --surface: #FAF8F2; --surface-2: #E9E3D6;
  --ink: #1A1814; --ink-2: #5B564C; --ink-3: #8A8476; --line: #D9D1C1;
  --accent: #2B45F5; --accent-ink: #FFFFFF; --accent-text: #2238D6;
  --lv-open: #237A3B; --lv-sdk: #0B6FA8; --lv-community: #8F3A9E; --lv-hardware: #A86400;
  --st-rumor: #8A8476; --st-announced: #A86400; --st-released: #237A3B; --st-discontinued: #A8322D;
  --bg-pattern: none;
}
@media (prefers-color-scheme: dark) { :root[data-dir="c"]:not([data-theme="light"]) {
  --bg: #13120F; --surface: #1B1A16; --surface-2: #25231E;
  --ink: #EEE9DE; --ink-2: #B5AE9F; --ink-3: #888172; --line: #322F28;
  --accent: #8592FF; --accent-ink: #0B0E2A; --accent-text: #A2ACFF;
  --lv-open: #6BC77F; --lv-sdk: #5DB4E6; --lv-community: #CF84DC; --lv-hardware: #E3A44A;
  --st-rumor: #8F897B; --st-announced: #E3A44A; --st-released: #6BC77F; --st-discontinued: #E57D77;
}}
[data-dir="c"][data-theme="dark"] {
  --bg: #13120F; --surface: #1B1A16; --surface-2: #25231E;
  --ink: #EEE9DE; --ink-2: #B5AE9F; --ink-3: #888172; --line: #322F28;
  --accent: #8592FF; --accent-ink: #0B0E2A; --accent-text: #A2ACFF;
  --lv-open: #6BC77F; --lv-sdk: #5DB4E6; --lv-community: #CF84DC; --lv-hardware: #E3A44A;
  --st-rumor: #8F897B; --st-announced: #E3A44A; --st-released: #6BC77F; --st-discontinued: #E57D77;
}