/* ============================================================
   Studio Trust — Foundations (Kopie aus Bigalexm/studiotrust-ci)
   Quelle: colors_and_type.css · Stand 23.08.2026
   Nicht hier bearbeiten — Änderungen gehören ins CI-Repo und
   werden dann hierher kopiert (SKILL.md: "Always copy what you
   need out of this folder — don't reference paths inside it").
   ============================================================ */

/* -------- FONTS (nur die im Repo liegenden Schnitte) -------- */
@font-face {
  font-family: "BDO Grotesk";
  src: url("../fonts/BDOGrotesk-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BDO Grotesk";
  src: url("../fonts/BDOGrotesk-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BDO Grotesk";
  src: url("../fonts/BDOGrotesk-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BDO Grotesk";
  src: url("../fonts/BDOGrotesk-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BN Helix";
  src: url("../fonts/BNHelixVF.ttf") format("truetype-variations"),
       url("../fonts/BNHelixVF.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* -------- TOKENS -------- */
:root {
  /* ---------- COLORS — Primaries ---------- */
  --gallery:    #EBEBEB;   /* hell / light */
  --woodsmoke:  #121212;   /* dunkel / dark */
  --cinnabar:   #EA4335;   /* accent */
  --white:      #FFFFFF;
  --black:      #000000;

  /* Tonal — sparingly used, derived from woodsmoke at low saturation */
  --ink-90:     #1F1F1F;
  --ink-70:     #3B3B3B;
  --ink-50:     #6E6E6E;
  --ink-30:     #A8A8A8;
  --ink-10:     #D6D6D6;
  --paper-hi:   #F5F5F5;  /* off-white, softer than gallery */
  --paper-lo:   #DFDFDF;  /* below-gallery for layered panels */

  /* Cinnabar tonal — for states only. Never as hero color. */
  --cinnabar-hover:  #D83528;   /* -6% L */
  --cinnabar-press:  #B82A20;
  --cinnabar-tint:   #FCE0DD;   /* for subtle backgrounds */

  /* ---------- Semantic — surfaces & ink ---------- */
  --bg:         var(--gallery);
  --bg-alt:     var(--paper-hi);
  --bg-invert:  var(--woodsmoke);

  --fg:         var(--woodsmoke);
  --fg-muted:   var(--ink-50);
  --fg-subtle:  var(--ink-30);
  --fg-invert:  var(--gallery);

  --accent:     var(--cinnabar);
  --accent-fg:  var(--gallery);

  --border:        var(--woodsmoke);          /* primary — hairline on light */
  --border-subtle: rgba(18,18,18,0.12);
  --border-invert: var(--gallery);

  /* ---------- TYPE — families ---------- */
  --font-sans:    "BDO Grotesk", "Plus Jakarta Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "BDO Grotesk", "Plus Jakarta Sans", -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE — weights ---------- */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;   /* body emphasis */
  --weight-demibold:  600;
  --weight-bold:      700;   /* headlines (default) */
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ---------- TYPE — scale ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  40px;
  --fs-3xl:  56px;
  --fs-4xl:  80px;
  --fs-5xl:  120px;
  --fs-6xl:  180px;

  /* ---------- TYPE — leading & tracking (from Short Design Manual) ---------- */
  --lh-tight:   0.9;   /* @kind other */
  --lh-normal:  1.0;   /* @kind other */
  --lh-body:    1.3;   /* @kind other */
  --lh-loose:   1.5;   /* @kind other */

  --tracking-headline: -0.03em;   /* Headlines: -30pt on ~1000pt */
  --tracking-copy:     -0.02em;   /* Copy: -20pt */
  --tracking-wide:      0.08em;   /* small caps / labels */

  /* ---------- SPACING (8-based) ---------- */
  --sp-0: 0;   /* @kind spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* ---------- RADII — rounded by default; sharp reserved for contrast ---------- */
  --r-sharp: 0;      /* @kind radius */
  --r-1: 6px;        /* small elements: tags, chips */
  --r-2: 10px;       /* inputs, buttons */
  --r-3: 14px;       /* cards, containers — the default */
  --r-4: 20px;       /* large surfaces, hero cards */
  --r-pill: 999px;   /* the "Pille" element from the manual */

  /* ---------- BORDERS ---------- */
  --border-w:    1px;
  --border-w-2:  1.5px;
  --border-w-3:  2px;

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:    120ms;   /* @kind other */
  --dur-base:    200ms;   /* @kind other */
  --dur-slow:    360ms;   /* @kind other */

  /* ---------- ELEVATION — NO drop shadow. Use borders + inset instead ---------- */
  --elev-none:   none;
  --elev-hair:   inset 0 0 0 1px var(--border);

  /* ---------- LAYOUT ---------- */
  --container:    1440px;
  --gutter:       24px;
  --gutter-lg:    48px;
}

/* ---------- SEMANTIC TYPE STYLES ----------
   Use as composable utility classes, or apply directly to tags. */

html, body {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-copy);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headline Big — mega display, headlines that dominate the page */
.t-headline-big, h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(56px, 10vw, 180px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-headline);
  margin: 0;
}

/* Headline Normal — section headers */
.t-headline, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(40px, 5vw, 80px);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-headline);
  margin: 0;
}

.t-headline-sm, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-2xl);
  line-height: 1.05;
  letter-spacing: var(--tracking-headline);
  margin: 0;
}

h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Copy Primär — body at 130% leading, bold weight */
.t-copy-primary {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-copy);
}

/* Copy Sekundär — body at medium weight, the workhorse */
.t-copy, p {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-copy);
  margin: 0;
}

/* Eyebrow / Label — small, tracked-wide, uppercase when needed */
.t-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--fs-xs);
  line-height: 1.2;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.t-small {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-sm);
  line-height: 1.4;
  letter-spacing: var(--tracking-copy);
}

code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* Default selection uses the Cinnabar accent */
::selection {
  background: var(--cinnabar);
  color: var(--gallery);
}

/* Reset */
* { box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; }