/* =============================================================
   GEMINO AI — Colors & Type
   Two coexisting modes:
   • "live"     — matches the deployed gemino-ai.de site (dark navy + cyan)
   • "industrial" — the restrained Mittelstand palette from the brand brief
     (graphite / steel / industrial blue / signal teal / off-white)
   Default is "live" because that is what exists in production today.
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-Italic-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./fonts/IBMPlexMono-SemiBold.ttf') format('truetype');
  font-weight: 600;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./fonts/IBMPlexMono-Bold.ttf') format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('./fonts/IBMPlexMono-Light.ttf') format('truetype');
  font-weight: 300;
}

/* ---------- Font families (tokens) ---------- */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: 'Inter', -apple-system, sans-serif;  /* Inter Black at tight leading = display */
}

/* =============================================================
   LIVE PALETTE — from gemino-ai codebase (dark-first)
   Deep navy page + cyan accent. This is the production look.
   ============================================================= */
:root {
  /* Navy surface ramp — copied from index.html / Home.jsx / Footer.jsx */
  --bg-deepest:   #030911;   /* navbar scrolled + footer */
  --bg-base:      #0a1220;   /* page background */
  --bg-raised:    #0d1829;   /* section alt */
  --bg-card:      #0d1829e6; /* rgba(13,24,41,0.9) card fill */
  --bg-card-hi:   #0f172a;   /* hero bg top stop + floating cards */
  --bg-elev:      #060d1b;   /* deep card / news section */

  /* Foreground ramp — Tailwind slate */
  --fg-1:         #ffffff;
  --fg-2:         #cbd5e1;   /* slate-300 */
  --fg-3:         #94a3b8;   /* slate-400 — body copy */
  --fg-4:         #64748b;   /* slate-500 */
  --fg-5:         #475569;   /* slate-600 — muted */
  --fg-6:         #334155;   /* slate-700 */

  /* Hairlines / borders — heavily relied on at 5–12% white */
  --border-subtle: rgba(255,255,255,0.05);
  --border-soft:   rgba(255,255,255,0.07);
  --border-md:     rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.14);
  --surface-soft:  rgba(255,255,255,0.03);
  --surface-md:    rgba(255,255,255,0.04);
  --surface-hi:    rgba(255,255,255,0.06);

  /* Brand accents — cyan/sky/indigo from the logo + hero gradient */
  --accent-cyan:       #22d3ee;  /* cyan-400 — the CTA color */
  --accent-cyan-hi:    #67e8f9;  /* cyan-300 */
  --accent-sky:        #38bdf8;  /* sky-400 — hero headline gradient start */
  --accent-indigo:     #818cf8;  /* indigo-400 — hero headline gradient end */
  --accent-indigo-deep:#6366f1;  /* indigo-500 */

  /* Semantic accents — used across the site for service tags */
  --accent-emerald:#34d399;      /* success / compliance */
  --accent-amber:  #fbbf24;      /* funding / warn */
  --accent-violet: #c084fc;      /* bioengineering */
  --accent-fuchsia:#f472b6;      /* custom / dev */
  --accent-rose:   #f87171;      /* destructive */

  /* Signature gradient — primary brand CTA + headline */
  --grad-brand:  linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
  --grad-headline: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  --grad-hero-bg:  linear-gradient(160deg, #0f172a 0%, #0c1628 40%, #0a1220 100%);
  --grad-section:  linear-gradient(180deg, #0d1829 0%, #0a1220 100%);
  --grad-hairline: linear-gradient(90deg, transparent, rgba(56,189,248,0.25), transparent);

  /* Radii — Tailwind-style; live site uses `rounded-xl/2xl` heavily */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;   /* rounded-xl — inputs, small cards */
  --radius-xl:  16px;   /* rounded-2xl — primary card */
  --radius-2xl: 24px;   /* rounded-3xl — hero image frame */
  --radius-pill: 9999px;

  /* Shadows — the live site is glow-heavy, not drop-shadow-heavy */
  --shadow-card:   0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-float:  0 20px 40px -12px rgba(0, 0, 0, 0.65);
  --shadow-glow-cyan:  0 0 40px -8px rgba(56, 189, 248, 0.25);
  --shadow-glow-brand: 0 8px 32px -8px rgba(56, 189, 248, 0.20);

  /* Spacing scale — 4px base */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;  /* section padding — py-28 on live site */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
}

/* =============================================================
   INDUSTRIAL PALETTE — from the brand brief (light-first)
   For print decks, investor materials, Mittelstand-facing collateral.
   Activate by wrapping a root in .theme-industrial.
   ============================================================= */
.theme-industrial {
  --bg-deepest:   #1E2327;   /* graphite — near-black */
  --bg-base:      #F5F6F4;   /* off-white — the page */
  --bg-raised:    #ffffff;
  --bg-card:      #ffffff;
  --bg-card-hi:   #FAFBFA;
  --bg-elev:      #1E2327;

  --fg-1: #1E2327;           /* graphite text */
  --fg-2: #2E363D;
  --fg-3: #5F6B76;           /* steel — body copy */
  --fg-4: #7A858F;
  --fg-5: #A1AAB2;
  --fg-6: #C9D0D5;

  --border-subtle: rgba(30,35,39,0.06);
  --border-soft:   rgba(30,35,39,0.08);
  --border-md:     rgba(30,35,39,0.12);
  --border-strong: rgba(30,35,39,0.18);
  --surface-soft:  rgba(30,35,39,0.02);
  --surface-md:    rgba(30,35,39,0.04);
  --surface-hi:    rgba(30,35,39,0.06);

  --accent-cyan:       #2F7C7A;  /* signal teal */
  --accent-cyan-hi:    #3E9996;
  --accent-sky:        #295C7A;  /* industrial blue */
  --accent-indigo:     #295C7A;
  --accent-indigo-deep:#1E4660;

  --grad-brand:   linear-gradient(135deg, #295C7A 0%, #2F7C7A 100%);
  --grad-headline: none;
  --grad-hero-bg:  #F5F6F4;
  --grad-section:  #ffffff;

  --shadow-card:  0 1px 2px rgba(30,35,39,0.04), 0 4px 16px -4px rgba(30,35,39,0.08);
  --shadow-float: 0 4px 8px rgba(30,35,39,0.06), 0 12px 32px -8px rgba(30,35,39,0.14);
  --shadow-glow-cyan:  none;
  --shadow-glow-brand: none;
}

/* =============================================================
   TYPOGRAPHY — semantic tokens
   Scale is operational (not editorial). Inter Black at
   tight leading does the heavy lifting for hero/display.
   ============================================================= */
:root {
  /* Display — hero h1, cover slides */
  --display-font:    var(--font-display);
  --display-weight:  900;         /* Inter Black */
  --display-size:    clamp(48px, 6vw, 96px);
  --display-lh:      0.92;
  --display-tracking: -0.02em;

  /* H1 — page hero */
  --h1-size:    clamp(40px, 5vw, 72px);
  --h1-weight:  900;
  --h1-lh:      1.0;
  --h1-tracking: -0.02em;

  /* H2 — section heading */
  --h2-size:    clamp(32px, 3.6vw, 56px);
  --h2-weight:  900;              /* "font-black" on live site */
  --h2-lh:      1.05;
  --h2-tracking: -0.02em;

  /* H3 — card / subsection */
  --h3-size:    24px;
  --h3-weight:  700;
  --h3-lh:      1.25;
  --h3-tracking: -0.01em;

  /* H4 */
  --h4-size:    18px;
  --h4-weight:  700;
  --h4-lh:      1.35;

  /* H5 — card title */
  --h5-size:    16px;
  --h5-weight:  600;
  --h5-lh:      1.4;

  /* Body */
  --body-size:  16px;
  --body-weight: 400;
  --body-lh:    1.65;

  --body-lg-size: 18px;
  --body-lg-lh:   1.65;

  --body-sm-size: 14px;
  --body-sm-lh:   1.6;

  /* Micro — tag labels, stat captions, form labels */
  --micro-size:    12px;
  --micro-weight:  600;
  --micro-lh:      1.4;
  --micro-tracking: 0.12em;      /* tracking-wider, often uppercase */

  /* Mono — IBM Plex Mono for data, metrics, code, tech labels */
  --mono-size: 13px;
  --mono-weight: 500;

  /* Metric — large stat number */
  --metric-size: clamp(32px, 4vw, 56px);
  --metric-weight: 900;
  --metric-lh: 1.0;
}

/* =============================================================
   SEMANTIC HELPERS — drop these classes on elements to get the look
   ============================================================= */
.gem-display {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  font-size: var(--display-size);
  line-height: var(--display-lh);
  letter-spacing: var(--display-tracking);
  color: var(--fg-1);
}
.gem-h1 { font-family: var(--font-sans); font-weight: var(--h1-weight); font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-tracking); color: var(--fg-1); }
.gem-h2 { font-family: var(--font-sans); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-tracking); color: var(--fg-1); }
.gem-h3 { font-family: var(--font-sans); font-weight: var(--h3-weight); font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-tracking); color: var(--fg-1); }
.gem-h4 { font-family: var(--font-sans); font-weight: var(--h4-weight); font-size: var(--h4-size); line-height: var(--h4-lh); color: var(--fg-1); }
.gem-h5 { font-family: var(--font-sans); font-weight: var(--h5-weight); font-size: var(--h5-size); line-height: var(--h5-lh); color: var(--fg-1); }

.gem-body    { font-family: var(--font-sans); font-size: var(--body-size); line-height: var(--body-lh); color: var(--fg-3); }
.gem-body-lg { font-family: var(--font-sans); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); color: var(--fg-2); }
.gem-body-sm { font-family: var(--font-sans); font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--fg-3); }

.gem-micro {
  font-family: var(--font-sans);
  font-size: var(--micro-size);
  font-weight: var(--micro-weight);
  line-height: var(--micro-lh);
  letter-spacing: var(--micro-tracking);
  text-transform: uppercase;
  color: var(--accent-cyan);
}

.gem-mono {
  font-family: var(--font-mono);
  font-size: var(--mono-size);
  font-weight: var(--mono-weight);
  letter-spacing: 0;
  color: var(--fg-3);
}

.gem-metric {
  font-family: var(--font-sans);
  font-weight: var(--metric-weight);
  font-size: var(--metric-size);
  line-height: var(--metric-lh);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.gem-headline-grad {
  background: var(--grad-headline);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =============================================================
   BODY RESET — optional, page-level default
   ============================================================= */
body.gem-body-root {
  font-family: var(--font-sans);
  color: var(--fg-3);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';  /* Inter stylistic: single-story a, straight l */
}