/* ==========================================================================
   Cultivar Context — Colors & Type
   --------------------------------------------------------------------------
   Single source of truth for the design system. Import this file before any
   other stylesheet. Defines T-Star Pro font faces, the six-colour palette,
   and a small semantic type scale modelled on the Context website layout
   (1920px reference).
   ========================================================================== */

/* ---------- Fonts: T-Star Pro ----------------------------------------- */
@font-face {
  font-family: "T-Star Pro";
  src: url("./fonts/TStarProLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "T-Star Pro";
  src: url("./fonts/TStarProLightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "T-Star Pro";
  src: url("./fonts/TStarProRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "T-Star Pro";
  src: url("./fonts/TStarProRegularItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "T-Star Pro";
  src: url("./fonts/TStarProMedium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "T-Star Pro";
  src: url("./fonts/TStarProMediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "T-Star Pro";
  src: url("./fonts/TStarProBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "T-Star Pro";
  src: url("./fonts/TStarProBoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "T-Star Pro";
  src: url("./fonts/TStarProHeavy.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "T-Star Pro";
  src: url("./fonts/TStarProHeavyItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (Farbpalette_context) -------------------- */
  --ctx-preussischblau: #004465;   /* deep navy   — primary backgrounds, body */
  --ctx-logoblau:       #2b7dac;   /* mid blue    — accents, links, charts   */
  --ctx-rot:            #d65e47;   /* terracotta  — emphasis, CTA accents     */
  --ctx-blaugruen:      #80c2c2;   /* teal        — soft accents              */
  --ctx-olivgelb:       #d4c438;   /* olive yellow — highlights               */
  --ctx-logograu:       #6d6d6d;   /* mid grey    — secondary text            */

  /* Surface tones — kept off-pure white so photography sits warm */
  --ctx-white:          #ffffff;
  --ctx-paper:          #f5f3ee;   /* warm off-white background               */
  --ctx-ink:            #1a1a1a;   /* near-black for body on light surface    */
  --ctx-rule:           #d8d4cb;   /* hairlines (1px)                         */
  --ctx-rule-dark:      rgba(255, 255, 255, 0.22);

  /* ---------- Semantic foreground/background ------------------------ */
  --fg-1:        var(--ctx-ink);              /* default body                  */
  --fg-2:        var(--ctx-logograu);         /* muted / meta                  */
  --fg-on-dark: var(--ctx-white);
  --fg-accent:   var(--ctx-rot);
  --fg-link:     var(--ctx-logoblau);

  --bg-1:        var(--ctx-paper);            /* default page                  */
  --bg-2:        var(--ctx-white);            /* cards / panels                */
  --bg-dark:     var(--ctx-preussischblau);   /* hero / dark sections          */

  --rule:        var(--ctx-rule);
  --rule-dark:   var(--ctx-rule-dark);

  /* ---------- Type families ----------------------------------------- */
  --font-sans:   "T-Star Pro", "Helvetica Neue", Arial, sans-serif;
  --font-mono:   ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---------- Type scale (1920px reference) ------------------------- */
  /* Numbers reflect the Context website layout. Use rem in product;   */
  /* px values shown here for direct reference.                         */
  --fs-eyebrow:  0.75rem;   /* 12px — uppercase section markers        */
  --fs-meta:     0.875rem;  /* 14px — footer, captions                  */
  --fs-body:     1rem;      /* 16px — running text                      */
  --fs-body-lg:  1.125rem;  /* 18px — lead paragraphs                   */
  --fs-h4:       1.25rem;   /* 20px — small headings                    */
  --fs-h3:       1.5rem;    /* 24px — section subheads                  */
  --fs-h2:       2.25rem;   /* 36px — section titles                    */
  --fs-h1:       3.25rem;   /* 52px — hero statements                   */
  --fs-display:  4.5rem;    /* 72px — splash / quote                    */

  /* Tracking — Context loves wide letter-spacing on uppercase */
  --tracking-wide:    0.18em;   /* nav, eyebrows, CTAs                   */
  --tracking-wider:   0.32em;   /* section markers like "W O W I R …"   */
  --tracking-normal:  0;
  --tracking-tight:  -0.01em;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  /* Weights — T-Star Pro has Light/Regular/Medium/Bold/Heavy */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-heavy:    900;

  /* ---------- Spacing scale (4-pt soft) ----------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* Container widths from the 1920px layout */
  --container-narrow: 880px;
  --container:        1280px;
  --container-wide:   1600px;
  --gutter:           clamp(24px, 4vw, 80px);

  /* ---------- Edges, borders, motion -------------------------------- */
  --radius-0:    0px;      /* default — Context is rectangular           */
  --radius-sm:   2px;      /* sparing use only                           */
  --border-hair: 1px;

  --shadow-image: 0 24px 60px -28px rgba(0, 68, 101, 0.35);
  --shadow-card:  0 1px 0 var(--rule);

  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    480ms;
}

/* ---------- Base element styles ------------------------------------- */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type tokens ------------------------------------ */
.ctx-eyebrow,
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-2);
}

.ctx-nav-link {
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ctx-h1,
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.ctx-h2,
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.ctx-h3,
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin: 0;
}

.ctx-h4,
h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin: 0;
}

.ctx-quote {
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  font-style: italic;
  letter-spacing: var(--tracking-tight);
}

.ctx-body,
p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  margin: 0;
}

.ctx-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  font-weight: var(--fw-regular);
}

.ctx-meta,
small {
  font-size: var(--fs-meta);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}

.ctx-section-marker {
  /* "W O W I R   A N S E T Z E N" — wide tracked uppercase */
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Links — quiet by default, accent on hover */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-accent); }

/* Horizontal rule — single hairline */
hr {
  border: 0;
  border-top: var(--border-hair) solid var(--rule);
  margin: var(--space-7) 0;
}

/* CTA button — rectangle, never pill (per brand note) */
.ctx-cta {
  display: inline-block;
  padding: 16px 28px;
  background: transparent;
  border: 1px solid currentColor;
  color: currentColor;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.ctx-cta:hover {
  background: currentColor;
}
.ctx-cta:hover > * { color: var(--ctx-preussischblau); }

.ctx-cta--solid {
  background: var(--ctx-preussischblau);
  color: var(--ctx-white);
  border-color: var(--ctx-preussischblau);
}
.ctx-cta--solid:hover {
  background: var(--ctx-rot);
  border-color: var(--ctx-rot);
  color: var(--ctx-white);
}