/* ============================================================
   STARTUP STAGE LIVE 2026 — Basis-Token

   Kopie von ../tokens/*.css, zusammengelegt und OHNE den
   Google-Fonts-@import des geteilten Systems. Zwei Gründe:

   1. Datenschutz — ein Fernaufruf an fonts.googleapis.com
      überträgt die IP des Besuchers an Google. Die Schriften
      dieser Seite liegen stattdessen in fonts/.
   2. Unabhängigkeit — die UBX-Seite teilt sich ../tokens/.
      Eine Änderung dort würde diese Seite sonst mitreißen.

   Die Markenwerte stehen in brand.css und überschreiben, was
   hier steht. Diese Datei nur anfassen, wenn sich die Struktur
   des Design-Systems ändert — nicht für Farben.
   ============================================================ */


/* ---------- übernommen aus colors.css ---------- */
/* ============================================================
   UNITED — Color System
   Core brand: deep wine / bordeaux  #7A1D3C
   Accent: antique gold  ·  Neutrals: warm stone
   ============================================================ */

:root {
  /* ---- Brand · Wine / Bordeaux ---------------------------- */
  --wine-950: #36091B;
  --wine-900: #4B0F25;
  --wine-800: #5F1530;
  --wine-700: #7A1D3C;   /* ← brand core (from logo) */
  --wine-600: #93264A;
  --wine-500: #AD3961;
  --wine-400: #C45F80;
  --wine-300: #D98FA7;
  --wine-200: #EBC0CE;
  --wine-100: #F6E2E9;
  --wine-50:  #FBF1F5;

  /* ---- Accent · Antique Gold ------------------------------ */
  --gold-700: #87651F;
  --gold-600: #A37E2C;
  --gold-500: #BF9A45;   /* ← accent core */
  --gold-400: #D3B468;
  --gold-300: #E3CC93;
  --gold-200: #EFE1BD;
  --gold-100: #F8F1DC;

  /* ---- Neutral · Warm Stone ------------------------------- */
  --stone-950: #120D10;  /* warm near-black, faint wine undertone */
  --stone-900: #1C161A;
  --stone-800: #2C252A;
  --stone-700: #41383E;
  --stone-600: #5C525A;
  --stone-500: #7C7178;
  --stone-400: #A099A0;
  --stone-300: #C7C0C3;
  --stone-200: #E4DDDC;
  --stone-150: #ECE6E2;
  --stone-100: #F3EEEA;
  --stone-50:  #FAF7F3;
  --white:     #FFFFFF;

  /* ---- Semantic states ------------------------------------ */
  --success-600: #3F7A4F;
  --success-500: #4F9A63;
  --success-100: #E4F1E7;
  --warning-600: #B5821F;
  --warning-500: #D8A537;
  --warning-100: #F8EFD6;
  --danger-600:  #B23A3A;
  --danger-500:  #CE5151;
  --danger-100:  #F8E4E4;
  --info-600:    #3B6491;
  --info-500:    #5183B5;
  --info-100:    #E3ECF5;

  /* ============================================================
     Semantic aliases — use these in product code
     ============================================================ */

  /* Surfaces */
  --bg:            var(--stone-50);
  --surface:       var(--white);
  --surface-2:     var(--stone-100);
  --surface-sunken:var(--stone-150);
  --surface-inverse: var(--stone-950);

  /* Text */
  --text:          var(--stone-950);
  --text-muted:    var(--stone-600);
  --text-subtle:   var(--stone-500);
  --text-inverse:  var(--stone-50);
  --text-on-wine:  #FBF1F5;
  --text-on-gold:  #2C2208;

  /* Brand roles */
  --primary:        var(--wine-700);
  --primary-hover:  var(--wine-800);
  --primary-active: var(--wine-900);
  --primary-fg:     var(--text-on-wine);
  --primary-soft:   var(--wine-50);
  --primary-border: var(--wine-200);

  --accent:         var(--gold-500);
  --accent-hover:   var(--gold-600);
  --accent-fg:      var(--text-on-gold);
  --accent-soft:    var(--gold-100);

  /* Lines */
  --border:        var(--stone-200);
  --border-strong: var(--stone-300);
  --border-wine:   var(--wine-200);
  --ring:          color-mix(in srgb, var(--wine-700) 45%, transparent);

  /* Decorative gradients */
  --grad-wine:    linear-gradient(135deg, #7A1D3C 0%, #4B0F25 100%);
  --grad-wine-gold: linear-gradient(120deg, #5F1530 0%, #7A1D3C 55%, #A37E2C 130%);
  --grad-veil:    linear-gradient(180deg, rgba(18,13,16,0) 0%, rgba(18,13,16,0.82) 100%);
}


/* ---------- übernommen aus fonts.css ---------- */
/* ============================================================
   UNITED — Fonts
   Loaded from Google Fonts. The system ships several pairings;
   the default is Marcellus (display serif) + Hanken Grotesk (UI/body).
   Alternative families are loaded so the type specimens & the
   --font tweak can swap them live.
   ============================================================ */

:root {
  /* Default brand families */
  --font-display: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-arabic:  'Amiri', 'Marcellus', serif;  /* for du'a / Arabic phrases */

  /* Alternative pairings (exposed for the type specimens) */
  --font-alt-display-a: 'Fraunces', Georgia, serif;
  --font-alt-display-b: 'Cormorant Garamond', Georgia, serif;
  --font-alt-display-c: 'Spectral', Georgia, serif;
  --font-alt-grotesk:   'Bricolage Grotesque', system-ui, sans-serif;
  --font-alt-body:      'Mulish', system-ui, sans-serif;
}


/* ---------- übernommen aus typography.css ---------- */
/* ============================================================
   UNITED — Typography scale
   Display serif for emotive headlines; grotesk for UI & body.
   ============================================================ */

:root {
  /* Weights */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Fluid type scale (min → max via clamp) */
  --fs-xs:   0.78rem;   /* 12.5px  labels, eyebrows */
  --fs-sm:   0.875rem;  /* 14px    captions, meta */
  --fs-base: 1rem;      /* 16px    body */
  --fs-md:   1.125rem;  /* 18px    lead body */
  --fs-lg:   1.375rem;  /* 22px    card titles */
  --fs-xl:   1.75rem;   /* 28px    section sub-heads */
  --fs-2xl:  clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
  --fs-3xl:  clamp(2.5rem, 1.6rem + 4vw, 3.75rem);
  --fs-4xl:  clamp(3rem, 1.6rem + 6vw, 5.25rem);
  --fs-display: clamp(3.5rem, 1.4rem + 9vw, 7rem);

  /* Line heights */
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-heading: 1.12;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tightest: -0.03em;
  --ls-tight: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-eyebrow: 0.22em;   /* uppercase eyebrows / kickers */

  /* ---- Semantic roles ------------------------------------- */
  --text-display:  var(--fw-normal) var(--fs-display)/var(--lh-tight) var(--font-display);
  --text-h1:       var(--fw-normal) var(--fs-3xl)/var(--lh-tight) var(--font-display);
  --text-h2:       var(--fw-normal) var(--fs-2xl)/var(--lh-snug) var(--font-display);
  --text-eyebrow-size: var(--fs-sm);
}

/* ---- Optional helper classes (handy in specimens & kits) -- */
.u-display { font: var(--text-display); letter-spacing: var(--ls-tight); color: var(--text); }
.u-h1 { font: var(--text-h1); letter-spacing: var(--ls-tight); color: var(--text); }
.u-h2 { font: var(--text-h2); color: var(--text); }
.u-h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-xl); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); color: var(--text); }
.u-h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--text); }
.u-lead { font-family: var(--font-body); font-weight: var(--fw-normal); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--text-muted); }
.u-body { font-family: var(--font-body); font-weight: var(--fw-normal); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text); }
.u-small { font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.u-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--wine-700);
}
.u-arabic { font-family: var(--font-arabic); font-weight: var(--fw-normal); }


/* ---------- übernommen aus spacing.css ---------- */
/* ============================================================
   UNITED — Spacing, radii, shadows, layout
   Base unit: 4px. Generous, editorial rhythm.
   ============================================================ */

:root {
  /* Spacing scale */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */
  --space-16: 10rem;    /* 160 */

  /* Section rhythm */
  --section-y: clamp(4rem, 2rem + 8vw, 8rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* Radii — soft but architectural */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-2xl: 36px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* Shadows — warm, low, premium (never blue/gray) */
  --shadow-xs: 0 1px 2px rgba(54, 9, 27, 0.06);
  --shadow-sm: 0 2px 8px rgba(54, 9, 27, 0.07);
  --shadow-md: 0 8px 24px -8px rgba(54, 9, 27, 0.14);
  --shadow-lg: 0 22px 48px -16px rgba(54, 9, 27, 0.22);
  --shadow-xl: 0 40px 80px -28px rgba(54, 9, 27, 0.30);
  --shadow-wine: 0 18px 40px -14px rgba(122, 29, 60, 0.45);
  --shadow-gold: 0 14px 34px -12px rgba(163, 126, 44, 0.42);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Layout widths */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;
  --container-text: 640px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;
}