/* =========================================================================
   gearald – Design Tokens v0.4 („Rams“)
   Warme Grautöne, gedeckte Farben, Braun-Orange, Figtree
   Hell/Dunkel: [data-theme="light"|"dark"], sonst prefers-color-scheme
   ========================================================================= */

@font-face { font-family: "Figtree"; src: url(../fonts/figtree.woff2) format("woff2"); font-weight: 300 800; font-display: block; }   /* vorgeladen; block = kein sichtbarer Schrifttausch beim Seitenwechsel */
/* Ersatzschrift auf Figtree-Maße getrimmt -> kein Springen, falls die Schrift später kommt */
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 101%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains.woff2) format("woff2"); font-weight: 400 600; font-display: optional; }   /* nur Code: lieber Ersatzschrift als Wackeln */

:root {
  /* Schrift */
  --font-display: "Figtree", "Figtree Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Figtree", "Figtree Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-label: "Figtree", "Figtree Fallback", 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.06em;

  /* Fluid Type Scale */
  /* Skala v0.3: unten kräftiger, oben flacher (Display max. ~67 px, Labels min. 14 px) */
  --step--2: clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);   /* 14–15 px */
  --step--1: clamp(0.9375rem, 0.92rem + 0.10vw, 1rem);       /* 15–16 px */
  --step-0:  clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);   /* 17–18 px */
  --step-1:  clamp(1.25rem, 1.15rem + 0.40vw, 1.45rem);      /* 20–23 px */
  --step-2:  clamp(1.5rem, 1.30rem + 0.80vw, 1.9rem);        /* 24–30 px */
  --step-3:  clamp(1.8rem, 1.50rem + 1.30vw, 2.5rem);        /* 29–40 px */
  --step-4:  clamp(2.1rem, 1.70rem + 2.00vw, 3.2rem);        /* 34–51 px */
  --step-5:  clamp(2.5rem, 1.90rem + 2.80vw, 4.2rem);        /* 40–67 px */

  /* Semantik Schrift – Komponenten nutzen NUR diese Namen */
  --fs-label: var(--step--2);    /* Badges, Eyebrows, Meta, Daten */
  --fs-small: var(--step--1);    /* Nebentexte, Karten-Beschreibungen */
  --fs-body: var(--step-0);      /* Fließtext, Buttons, Menü */
  --fs-lead: var(--step-1);      /* Einleitungen, h4 */
  --fs-h3: var(--step-2);        /* Karten-Titel, Zwischenüberschriften */
  --fs-h2: var(--step-3);        /* Sektionen */
  --fs-h1: var(--step-4);        /* Seitentitel */
  --fs-display: var(--step-5);   /* Hero */
  --fs-brand: clamp(1.4rem, 1.3rem + .4vw, 1.6rem);
  --lh-tight: 1.05; --lh-heading: 1.1; --lh-body: 1.6;

  /* Raum (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;
  /* Semantik Raum */
  --space-xs: var(--sp-2);       /* Icon ↔ Text, Chips untereinander */
  --space-s: var(--sp-3);        /* innerhalb kleiner Komponenten */
  --space-m: var(--sp-5);        /* Karten-Innenabstand, Grid-Gaps */
  --space-l: var(--sp-7);        /* zwischen Blöcken einer Sektion */
  --space-xl: var(--sp-9);       /* große Zäsuren */
  --space-section: clamp(3.5rem, 2rem + 6vw, 8rem);
  --measure: 62ch; --page: 1160px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* Form */
  --radius-s: 6px; --radius-m: 12px; --radius-l: 18px; --radius-pill: 999px;
  --icon-stroke: 1.6;        /* normal */
  --icon-stroke-bold: 2.2;   /* kleine Icons in Pillen */
  --icon-stroke-fine: .75;   /* große, blasse Platzhalter-Icons */
  --ease: cubic-bezier(.2, .7, .2, 1); --dur: 180ms;
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);   /* leichtes Nachfedern, „einrasten“ */
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Hell */
  --bg: #E7E5E0; --surface: #F4F3EF; --surface-2: #DCD9D2; --bg-alt: #DAD7D0; --surface-2-alt: #CECAC2;
  --ink: #1F1F1D; --ink-2: #5D5B56; --ink-3: #8C8984; --line: #D2CFC8;
  --accent: #2D5240; --accent-ink: #FFFFFF; --accent-text: #2A4D3C; --focus: #1F1F1D; --hl: #3A6A51;
  --mustard: #C99A2E; --mustard-ink: #1F1F1D;   /* nur für Neu-Abzeichen */
  --lv-open: #2F6F73;       /* Petrol */
  --lv-sdk: #75609A;        /* Lila */
  --lv-community: #B9832E;  /* Ocker */
  --lv-hardware: #8A7A4E;   /* Moos-Ocker */
  --st-rumor: #8C8984; --st-announced: #B9832E; --st-released: #2F6F73; --st-discontinued: #B2452F;
  --bg-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .12 0 0 0 0 .08 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow-hover: 0 14px 30px -18px rgb(40 32 20 / .35);
  --code-bg: #3B3E42; --code-fg: #EDEBE6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #161513; --surface: #1F1E1B; --surface-2: #2A2825; --bg-alt: #0F0E0D; --surface-2-alt: #2A2825; --ink: #ECEAE5; --ink-2: #B3B0A8; --ink-3: #86837C; --line: #33312D;
  --accent: #7DAE8C; --accent-ink: #102018; --accent-text: #94C2A2; --focus: #E9ECE7; --hl: #8DBB9B;
  --mustard: #D8B04E; --mustard-ink: #17150F;
  --lv-open: #63A4A8; --lv-sdk: #A590C6; --lv-community: #D9A350; --lv-hardware: #C2AD78;
  --st-rumor: #918F89; --st-announced: #D9A350; --st-released: #63A4A8; --st-discontinued: #E07A64;
  --code-bg: #0F1011; --shadow-hover: 0 16px 34px -16px rgb(0 0 0 / .7);
  color-scheme: dark;
}}
:root[data-theme="dark"] {
  --bg: #161513; --surface: #1F1E1B; --surface-2: #2A2825; --bg-alt: #0F0E0D; --surface-2-alt: #2A2825; --ink: #ECEAE5; --ink-2: #B3B0A8; --ink-3: #86837C; --line: #33312D;
  --accent: #7DAE8C; --accent-ink: #102018; --accent-text: #94C2A2; --focus: #E9ECE7; --hl: #8DBB9B;
  --mustard: #D8B04E; --mustard-ink: #17150F;
  --lv-open: #63A4A8; --lv-sdk: #A590C6; --lv-community: #D9A350; --lv-hardware: #C2AD78;
  --st-rumor: #918F89; --st-announced: #D9A350; --st-released: #63A4A8; --st-discontinued: #E07A64;
  --code-bg: #0F1011; --shadow-hover: 0 16px 34px -16px rgb(0 0 0 / .7);
  color-scheme: dark;
}

/* Abgeleitete Töne (Tönungen für Badges & Kacheln) */
:root, :root[data-theme] {
  --lv-open-bg:      color-mix(in oklab, var(--lv-open) 16%, var(--surface));
  --lv-sdk-bg:       color-mix(in oklab, var(--lv-sdk) 15%, 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) 17%, var(--surface));
  --lv-open-fg:      color-mix(in oklab, var(--lv-open) 62%, var(--ink));
  --lv-sdk-fg:       color-mix(in oklab, var(--lv-sdk) 70%, 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) 60%, var(--ink));
  --accent-soft: color-mix(in oklab, var(--accent) 22%, var(--surface));
  --line-strong: color-mix(in oklab, var(--ink) 22%, var(--bg));
}