/* ============================================================
   potenzial.at · Design Tokens (Showcase-Variante)
   ============================================================
   Original: _design_handoff/handoff/colors_and_type.css
   Anpassung für Showcase: Font-Pfad auf /fonts/inter/ + Inter-Variable
   für alle Gewichte (Site hat kein Inter-Medium 500 lokal).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter/Inter-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


:root {

  /* ─── Brand ─── */
  --pot-primary:        #333399;
  --pot-primary-hover:  #262673;
  --pot-primary-active: #1F1F66;
  --pot-primary-tint:   rgba(51, 51, 153, 0.08);
  --pot-primary-soft:   rgba(51, 51, 153, 0.12);

  --pot-accent:         #A21CAF;
  --pot-accent-hover:   #86198F;
  --pot-accent-active:  #701A75;
  --pot-accent-tint:    rgba(162, 28, 175, 0.10);


  /* ─── Neutrals ─── */
  --pot-ink:        #0F172A;
  --pot-body:       #1F2937;
  --pot-muted:      #5B6478;
  --pot-soft:       #94A3B8;

  --pot-line:       #E5E7EB;
  --pot-line-soft:  #EEF0F4;

  --pot-bg:         #FFFFFF;
  --pot-bg-soft:    #F7F8FB;
  --pot-bg-tint:    #F4F4FB;


  /* ─── Status ─── */
  --pot-success:       #10B981;
  --pot-success-ink:   #047857;
  --pot-success-soft:  #ECFDF5;
  --pot-danger:        #DC2626;
  --pot-danger-soft:   #FEF2F2;
  --pot-warning:       #F59E0B;
  --pot-warning-soft:  #FFFBEB;
  --pot-info:          #0284C7;


  /* ─── Schrift-Stacks ─── */
  --pot-font-ui:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pot-font-display:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pot-font-mono:     ui-monospace, 'SF Mono', 'Menlo', 'Cascadia Mono', monospace;


  /* ─── Type-Scale ─── */
  --fs-display:  3.5rem;
  --fs-h1:       2.625rem;
  --fs-h2:       2rem;
  --fs-h3:       1.5rem;
  --fs-h4:       1.25rem;
  --fs-h5:       1.0625rem;
  --fs-lead:     1.1875rem;
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-caption:  0.75rem;
  --fs-micro:    0.6875rem;

  --lh-tight:    1.05;
  --lh-snug:     1.15;
  --lh-base:     1.4;
  --lh-normal:   1.55;
  --lh-relaxed:  1.7;

  --tracking-display:  -0.025em;
  --tracking-tight:    -0.02em;
  --tracking-snug:     -0.01em;
  --tracking-normal:   0;
  --tracking-caption:  0.06em;
  --tracking-eyebrow:  0.10em;
  --tracking-caps:     0.14em;


  /* ─── Spacing ─── */
  --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: 128px;
  --space-11: 160px;

  --section-y:     96px;
  --section-y-sm:  64px;
  --section-y-lg:  128px;


  /* ─── Radius ─── */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --radius-pill:  999px;


  /* ─── Schatten ─── */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06),
                0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08),
                0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.10),
                0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-primary:  0 8px 24px rgba(51, 51, 153, 0.18);
  --shadow-accent:   0 8px 24px rgba(162, 28, 175, 0.22);


  /* ─── Motion ─── */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  280ms;
  --dur-page:  420ms;


  /* ─── Focus ─── */
  --focus-ring:        0 0 0 3px rgba(51, 51, 153, 0.35);
  --focus-ring-accent: 0 0 0 3px rgba(162, 28, 175, 0.40);
  --focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.30);


  /* ─── Layout ─── */
  --container-max:    1200px;
  --container-narrow: 880px;
  --container-text:   65ch;
  --gutter:           24px;
}


@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-page: 0ms;
  }
}


/* ─────────────────────────────────────────────────────────────
   Base Type-Defaults
   ───────────────────────────────────────────────────────────── */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--pot-font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--pot-body);
  background: var(--pot-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pot-font-display);
  color: var(--pot-ink);
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 700; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-base); letter-spacing: var(--tracking-snug); font-weight: 600; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-base); letter-spacing: var(--tracking-snug); font-weight: 600; }
h5 { font-size: var(--fs-h5); line-height: var(--lh-base); font-weight: 600; }

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
  max-width: var(--container-text);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--pot-body);
  font-weight: 400;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pot-primary);
  margin-bottom: var(--space-3);
}

small,
.caption {
  font-size: var(--fs-small);
  color: var(--pot-muted);
}

code,
kbd,
pre {
  font-family: var(--pot-font-mono);
}

.tabular { font-variant-numeric: tabular-nums; }


/* ─── Focus Management ─── */
*:focus { outline: none; }
*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}