/* ============================================================
   RemotePlayer — Design-Tokens
   Palette 1:1 aus dem Konzept (Punkt 5), entspricht Tailwind-Defaults.
   ============================================================ */

/* ── Fonts, self-hosted. Keine Google-Fonts-CDN. ───────────── */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ────────────────────────────────────────────────── */

:root {
  /* Marke */
  --rp-cyan: #22d3ee; /* cyan-400  · Gradient-Start */
  --rp-indigo: #4f46e5; /* indigo-600 · Gradient-Ende, Primaer-CTA */
  --rp-indigo-hover: #4338ca; /* indigo-700 */
  --rp-indigo-soft: #eef2ff; /* indigo-50  · Flaechen */
  --rp-cyan-soft: #ecfeff; /* cyan-50 */

  /* Der Gradient ist das zentrale Markenelement. 135 Grad, sparsam einsetzen. */
  --rp-gradient: linear-gradient(135deg, var(--rp-cyan) 0%, var(--rp-indigo) 100%);
  --rp-gradient-soft: linear-gradient(
    135deg,
    rgba(34, 211, 238, 0.16) 0%,
    rgba(79, 70, 229, 0.16) 100%
  );

  /* Neutrale */
  --rp-slate-900: #0f172a; /* Headlines, dunkle Flaechen */
  --rp-slate-800: #1e293b;
  --rp-slate-700: #334155; /* Fliesstext */
  --rp-slate-500: #64748b; /* Muted */
  --rp-slate-300: #cbd5e1;
  --rp-slate-200: #e2e8f0; /* Linien */
  --rp-slate-100: #f1f5f9;
  --rp-slate-50: #f8fafc; /* Wechselflaechen */
  --rp-white: #ffffff;

  /* Semantische Aliase — Komponenten benutzen diese, nicht die Basiswerte */
  --rp-text: var(--rp-slate-700);
  --rp-heading: var(--rp-slate-900);
  --rp-muted: var(--rp-slate-500);
  --rp-surface: var(--rp-white);
  --rp-surface-alt: var(--rp-slate-50);
  --rp-line: var(--rp-slate-200);
  --rp-accent: var(--rp-indigo);

  /* Typografie */
  --rp-font-head: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --rp-fs-eyebrow: 0.8125rem;
  --rp-fs-sm: 0.875rem;
  --rp-fs-base: 1rem;
  --rp-fs-lg: 1.125rem;
  --rp-fs-xl: clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
  --rp-fs-h3: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --rp-fs-h2: clamp(1.875rem, 2vw + 1.2rem, 2.75rem);
  --rp-fs-h1: clamp(2.25rem, 3.4vw + 1.2rem, 3.75rem);
  --rp-fs-display: clamp(2.5rem, 4vw + 1.2rem, 4.25rem);

  /* Rundungen — der Kit-Look lebt von stark gerundeten Cards */
  --rp-radius-sm: 8px;
  --rp-radius: 12px;
  --rp-radius-card: 24px;
  --rp-radius-xl: 32px;
  --rp-radius-pill: 999px;

  /* Weiche Schatten, nie hart */
  --rp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --rp-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 10px 20px -6px rgba(15, 23, 42, 0.08);
  --rp-shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.1), 0 32px 64px -24px rgba(15, 23, 42, 0.14);
  --rp-shadow-accent: 0 12px 28px -10px rgba(79, 70, 229, 0.45);

  /* Raster */
  --rp-container: 1200px;
  --rp-container-narrow: 760px;
  --rp-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --rp-section-y: clamp(4rem, 7vw, 7rem);

  --rp-header-h: 76px;
}