/* =========================================================================
   CUVIR® Creative — Foundations
   Color + Type tokens. Import everywhere.
   ========================================================================= */

/* ---- Webfonts ----------------------------------------------------------
   The cuvir.de site uses a tight, modern grotesque (very close to
   Helvetica / Aeonik / Söhne). We substitute with Geist (Google Fonts) as
   the closest free match. Mono is Geist Mono. Flag this to the user if a
   licensed alternative is available.
   ----------------------------------------------------------------------- */
/* Self-hosted since 14.09.2026 (SIL Open Font License, see /fonts/LICENSE.txt).
   Google Fonts via @import meant a render-blocking chain (HTML → styles.css →
   this file → fonts.googleapis.com → fonts.gstatic.com) and sent visitor IPs to Google. */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Color palette ----------
     CUVIR runs on a near-monochrome system: a warm off-white page,
     deep ink-black, and a small set of neutral greys. Color appears
     only through photography (warm, editorial). */

  /* Surface */
  --cuvir-paper:        #F1EFEC;   /* primary page background — warm off-white */
  --cuvir-paper-2:      #E8E5E0;   /* secondary surface, hover wells */
  --cuvir-paper-tint:   #FAF9F7;   /* lifted surface (cards, modals) */
  --cuvir-ink:          #0B0B0B;   /* ink black — body + display */
  --cuvir-ink-2:        #1A1A1A;   /* footer / inverted surface */
  --cuvir-ink-3:        #2B2B2B;   /* secondary on inverted */

  /* Neutrals */
  --cuvir-grey-900:     #2B2B2B;
  --cuvir-grey-700:     #4A4A4A;
  --cuvir-grey-500:     #8A8A8A;   /* meta / labels */
  --cuvir-grey-400:     #ADADAD;
  --cuvir-grey-300:     #C9C7C3;
  --cuvir-grey-200:     #DEDBD5;
  --cuvir-grey-100:     #E8E5E0;

  /* Functional accents — used sparingly, never dominant */
  --cuvir-accent:       #0B0B0B;   /* buttons / active are simply ink */
  --cuvir-success:      #1F7A4D;
  --cuvir-error:        #B22A2A;
  --cuvir-focus:        #0B0B0B;

  /* Semantic foreground / background */
  --fg-1:               var(--cuvir-ink);
  --fg-2:               var(--cuvir-grey-700);
  --fg-3:               var(--cuvir-grey-500);
  --fg-on-dark:         #F1EFEC;
  --fg-on-dark-2:       #ADADAD;

  --bg-1:               var(--cuvir-paper);
  --bg-2:               var(--cuvir-paper-2);
  --bg-card:            var(--cuvir-paper-tint);
  --bg-inverted:        var(--cuvir-ink-2);

  --line:               rgba(11, 11, 11, 0.10);
  --line-strong:        rgba(11, 11, 11, 0.22);
  --line-on-dark:       rgba(241, 239, 236, 0.14);

  /* ---------- Type ---------- */
  --font-display:       "Geist", "Aeonik", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans:          "Geist", "Aeonik", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:          "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Weights — display set runs HEAVY, body is regular */
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;
  --weight-black:       900;   /* the giant "Cuvir®" / "Creative." titles */

  /* Type scale (fluid where useful) */
  --fs-mega:            clamp(72px, 14vw, 240px);   /* hero wordmark */
  --fs-display-1:       clamp(56px, 9vw, 144px);    /* page titles ("Projects.") */
  --fs-display-2:       clamp(40px, 6vw, 96px);
  --fs-h1:              clamp(34px, 4vw, 56px);
  --fs-h2:              28px;
  --fs-h3:              22px;
  --fs-h4:              18px;
  --fs-body:            16px;
  --fs-body-sm:         14px;
  --fs-meta:            12px;
  --fs-tiny:            11px;

  /* Line heights */
  --lh-display:         0.95;     /* tight, headline-stacked */
  --lh-tight:           1.10;
  --lh-snug:            1.30;
  --lh-body:            1.55;
  --lh-relaxed:         1.7;

  /* Tracking */
  --tracking-tight:     -0.04em;  /* display titles */
  --tracking-normal:    -0.01em;
  --tracking-wide:      0.02em;
  --tracking-meta:      0.04em;   /* uppercase meta labels */

  /* ---------- Spacing (8-pt with 4-pt half-step) ---------- */
  --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: 160px;

  /* Layout */
  --container:          1440px;
  --gutter:             24px;
  --gutter-lg:          48px;
  --header-h:           56px;

  /* ---------- Radii ----------
     Cuvir's UI is mostly hard-edged. Pills are full-radius; cards/images
     use a small, almost-imperceptible curve. */
  --radius-0:    0px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;        /* image cards */
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- Shadow / elevation ---------- */
  --shadow-0:  none;
  --shadow-1:  0 1px 2px rgba(11,11,11,0.05);
  --shadow-2:  0 6px 18px rgba(11,11,11,0.08);
  --shadow-3:  0 18px 48px rgba(11,11,11,0.12);
  --shadow-pop: 0 24px 60px rgba(11,11,11,0.18);
  --shadow-inner: inset 0 0 0 1px var(--line);

  /* ---------- Motion ---------- */
  --ease-standard:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:        cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:       120ms;
  --dur-base:       240ms;
  --dur-slow:       480ms;
  --dur-cinematic:  900ms;
}

/* =========================================================================
   Semantic element styles — drop into any page that imports this file.
   ========================================================================= */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display titles — the "Creative." / "Projects." / "Get in touch." treatment.
   Always heavy, always tracked tight, always with a trailing period. */
.display, h1.display, .display-1 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}

.display-2 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.mega {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-mega);
  line-height: 0.85;
  letter-spacing: -0.05em;
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
}

h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-normal);
  margin: 0 0 var(--space-4);
}

h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}

h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
  max-width: 60ch;
}

p.lead {
  font-size: var(--fs-h4);
  line-height: 1.5;
  color: var(--fg-1);
  max-width: 36ch;
}

small, .meta {
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  color: var(--fg-3);
}

/* The signature meta label — "(2018-25©)", "/2023", "Last updated 14.06.2025" */
.meta-tag {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--fg-3);
  font-weight: var(--weight-regular);
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
a:hover { opacity: 0.6; }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection { background: var(--cuvir-ink); color: var(--cuvir-paper); }