/* =========================================================================
   Vitaluma Design Tokens
   Import in every artifact:  <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================= */

/* Fonts ------------------------------------------------------------------ */
/* Self-hosted fonts (Inter, Lora) — latin + latin-ext subsets, DSGVO-konform lokal eingebunden */

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lora-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/lora-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/lora-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/lora-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/lora-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/lora-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- Brand colour ------------------------------------------- */
  --vita-green:       #7A9C64;   /* Vitaluma Grün — the single brand hue  */

  --green-50:         #F1F4ED;
  --green-100:        #E0E8D7;
  --green-200:        #C2D2B0;
  --green-300:        #A3BB89;
  --green-400:        #8AA873;
  --green-500:        #7A9C64;   /* same as --vita-green                   */
  --green-600:        #6B8B57;   /* hover state for primary button         */
  --green-700:        #587548;
  --green-800:        #455B39;
  --green-900:        #2F3F26;

  /* ---------- Neutrals ----------------------------------------------- */
  --anthracite:       #25281F;   /* default text colour, soft near-black   */
  --anthracite-80:    rgba(37, 40, 31, 0.80);
  --anthracite-60:    rgba(37, 40, 31, 0.60);
  --anthracite-40:    rgba(37, 40, 31, 0.40);
  --anthracite-20:    rgba(37, 40, 31, 0.20);
  --anthracite-08:    rgba(37, 40, 31, 0.08);
  --anthracite-04:    rgba(37, 40, 31, 0.04);

  --off-white:        #F7F5F0;   /* warm paper background, the site bg     */
  --white:            #FFFFFF;
  --sand:             #E8E1D3;   /* warm divider / accent surface          */
  --sand-light:       #F2EEE5;

  /* ---------- Semantic colours --------------------------------------- */
  --color-success:    var(--green-700);
  --color-warning:    #C68A3C;
  --color-error:      #B0524A;
  --color-info:       #5C7A8C;

  /* ---------- Semantic surfaces / text ------------------------------- */
  --bg:               var(--off-white);
  --bg-elevated:      var(--white);
  --bg-sunken:        var(--sand-light);

  --fg-1:             var(--anthracite);          /* primary text         */
  --fg-2:             var(--anthracite-80);       /* secondary text       */
  --fg-3:             var(--anthracite-60);       /* tertiary / meta      */
  --fg-disabled:      var(--anthracite-40);
  --fg-on-green:      var(--white);

  --border:           var(--anthracite-08);       /* hairline divider     */
  --border-strong:    var(--anthracite-20);
  --border-focus:     var(--vita-green);

  /* ---------- Type families ------------------------------------------ */
  --font-sans:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:     'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:        ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  /* ---------- Type scale (px-based, modular, calm) -------------------
     Use --text-* for sizing.  Headings have matching --leading and --tracking.
  -------------------------------------------------------------------- */
  --text-xs:          12px;   --leading-xs:  1.5;   --tracking-xs: 0.02em;
  --text-sm:          14px;   --leading-sm:  1.55;
  --text-base:        16px;   --leading-base:1.6;
  --text-lg:          18px;   --leading-lg:  1.55;
  --text-xl:          22px;   --leading-xl:  1.45;
  --text-2xl:         28px;   --leading-2xl: 1.35;
  --text-3xl:         36px;   --leading-3xl: 1.25;
  --text-4xl:         48px;   --leading-4xl: 1.15;   --tracking-4xl: -0.01em;
  --text-5xl:         64px;   --leading-5xl: 1.1;    --tracking-5xl: -0.015em;
  --text-6xl:         80px;   --leading-6xl: 1.05;   --tracking-6xl: -0.02em;

  --eyebrow-tracking: 0.12em;

  /* ---------- Spacing scale ------------------------------------------ */
  --space-0:          0;
  --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:        120px;
  --space-11:        160px;

  /* ---------- Radii --------------------------------------------------- */
  --radius-xs:        2px;    /* inputs, badges                          */
  --radius-sm:        8px;    /* buttons, small cards                    */
  --radius-md:       16px;    /* content cards, image frames             */
  --radius-lg:       24px;    /* hero frames, large surfaces             */
  --radius-full:     999px;   /* only for avatars and dot indicators     */

  /* ---------- Shadows (very minimal) --------------------------------- */
  --shadow-sm:        0 1px 2px rgba(37, 40, 31, 0.04);
  --shadow-md:        0 4px 16px rgba(37, 40, 31, 0.06);
  --shadow-lg:        0 16px 48px rgba(37, 40, 31, 0.08);
  --shadow-focus:     0 0 0 2px var(--off-white), 0 0 0 4px var(--vita-green);

  /* ---------- Motion -------------------------------------------------- */
  --ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:         120ms;
  --dur:              200ms;
  --dur-slow:         400ms;

  /* ---------- Layout -------------------------------------------------- */
  --container:       1280px;
  --gutter:           80px;
  --section-y:       120px;
}

/* =========================================================================
   Base elements — semantic styles
   ========================================================================= */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* color-scheme: light fixes the page as light so system dark mode does not
   invert backgrounds or form controls. Explicit hex fallbacks back up the vars. */
html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--fg-1);
  background-color: #F7F5F0;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — display serif, calm weights, sentence case --------------- */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: var(--leading-5xl);
  letter-spacing: var(--tracking-5xl);
  font-weight: 400;
  margin: 0 0 var(--space-5);
  color: var(--fg-1);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-4xl);
  letter-spacing: var(--tracking-4xl);
  font-weight: 400;
  margin: 0 0 var(--space-5);
  color: var(--fg-1);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  font-weight: 400;
  margin: 0 0 var(--space-4);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  font-weight: 500;
  margin: 0 0 var(--space-3);
  color: var(--fg-1);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: 500;
  margin: 0 0 var(--space-3);
  color: var(--fg-1);
}

p {
  margin: 0 0 var(--space-4);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--fg-1);
}

small, .meta {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--vita-green);
  margin: 0 0 var(--space-3);
  display: inline-block;
}

a {
  color: var(--vita-green);
  text-decoration: none;
  transition: text-decoration var(--dur) var(--ease);
}
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible {
  outline: 2px solid var(--vita-green);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

::selection { background: var(--green-100); color: var(--fg-1); }

/* Utility for the green divider used under eyebrows ------------------ */
.eyebrow-rule {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--vita-green);
  vertical-align: middle;
  margin-right: var(--space-3);
}