/* Desktop overrides — Tabakgelb (Gold) palette + Klassisch typography
   These override the base tokens.css values for the desktop artboards. */

:root, .dc-card {
  /* Gold / Tabakgelb */
  --primary:      #C28428;
  --primary-deep: #9A6618;
  --primary-soft: #FAF1DD;
  --primary-ink:  #5C3F0E;

  /* Klassisch type stack */
  --font-sans:    'Manrope', system-ui, sans-serif;
  --font-display: 'Newsreader', 'Manrope', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Slightly cooler-warm desktop background — more sober than mobile */
  --bg:           #F7F3EA;
  --bg-deep:      #EFE9DB;
  --surface:      #FFFFFF;
  --surface-2:    #F2ECDD;
  --border:       #E8DFCD;
  --border-strong:#D4C7AB;
}

/* Reset bg for desktop canvas (mobile uses dark page bg) */
.desktop-root, .desktop-root body { background: var(--bg); }

/* Desktop type rhythm */
.desktop-root {
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.desktop-root .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Custom scrollbar for desktop panes */
.desktop-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.desktop-scroll::-webkit-scrollbar-track { background: transparent; }
.desktop-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); }
.desktop-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* Pretty selection */
.desktop-root ::selection { background: var(--primary-soft); color: var(--primary-ink); }

/* Subtle dotted hairline used as section dividers on desktop */
.hairline {
  background-image: linear-gradient(to right, var(--border-strong) 50%, transparent 50%);
  background-size: 6px 1px;
  background-repeat: repeat-x;
  height: 1px;
}