/* ============================================================
   Deal Circle · Brand Foundation
   Geladen VOR den inline page-styles. Stellt die geteilten
   Design-Tokens und Button-Basistypen bereit, die von allen
   Seiten referenziert werden.
   ============================================================ */

:root {
  /* Hairlines — feine Trennlinien auf Onyx */
  --hairline:        rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.22);

  /* Brand-Tokens (canonical, doppelt gespiegelt für robustness) */
  --dc-onyx:      #050608;
  --dc-platinum:  #C8CDD3;
  --dc-silver:    #E8EBEE;
  --dc-steel:     #5A6068;
  --dc-paper:     #F2EFE8;
  --dc-ink:       #0A0B0D;
  --dc-gold:      #B8A978;   /* gold-trace, sehr sparsam */

  /* Bewegung */
  --dc-ease:      cubic-bezier(.7,0,.2,1);
  --dc-dur-fast:  .25s;
  --dc-dur-base:  .4s;
  --dc-dur-slow:  1.2s;
}

/* ============================================================
   Buttons
   `dc-btn` ist die Basisform. Inline-styles in index.html
   überschreiben die Farben (weiß auf Onyx, ghost, etc.).
   ============================================================ */

.dc-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  font-family: 'Cabinet Grotesk', 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  /* Lesbarer Default (heller Button auf dunkler Site).
     Inline-styles in index.html können beliebig überschreiben. */
  background: #FFFFFF;
  color: #0A0B0D;
  border: 1px solid #FFFFFF;
  transition:
    background var(--dc-dur-base) var(--dc-ease),
    color var(--dc-dur-base) var(--dc-ease),
    border-color var(--dc-dur-base) var(--dc-ease),
    transform var(--dc-dur-base) var(--dc-ease);
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}

/* Ghost-Variante — transparent, weißer Border + Text. */
.dc-btn--ghost {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
}
.dc-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #FFFFFF;
}

.dc-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.dc-arrow {
  display: inline-block;
  font-family: 'JetBrains Mono', 'Menlo', monospace;
  font-size: 14px;
  letter-spacing: 0;
  transition: transform var(--dc-dur-base) var(--dc-ease);
}
.dc-btn:hover .dc-arrow { transform: translateX(4px); }

/* ============================================================
   Forms — minimale Reset für Inputs
   ============================================================ */

input, textarea, button, select {
  font-family: inherit;
  color: inherit;
}
button { cursor: none; }
@media (max-width: 900px) { button { cursor: pointer; } }

/* Selection im Onyx-Theme weiß; im Light-Theme inline überschrieben */
::selection { background: #FFFFFF; color: var(--dc-onyx); }