/* ═══════════════════════════════════════════════════════════
   MK11 Korean Patch: Shared Design System
   Single source of truth for tokens, scrollbar, and buttons.
   All three contexts (landing, installer, manager) reference this.
   ═══════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  /* Canonical color tokens (landing naming convention) */
  --color-bg:             #0a0a0a;
  --color-surface:        #111111;
  --color-surface-raised: #1a1a1a;
  --color-border:         #2a2a2a;
  --color-gold:           #c9a84c;
  --color-gold-bright:    #f0c040;
  --color-gold-dim:       #7a6030;
  --gradient-gold:        linear-gradient(to bottom, #f0dea0 0%, #ceac5e 100%);
  --color-text-primary:   #f0ece0;
  --color-text-secondary: #888880;
  --color-danger:         #cc3333;
  --color-success:        #4a9a5a;
  --color-warning:        #c47a20;
  --color-tag-translation: var(--color-gold);
  --color-tag-security:    #c95a4c;
  --color-tag-platform:    #8a6cc8;

  /* Short aliases for app contexts */
  --bg:             var(--color-bg);
  --surface:        var(--color-surface);
  --surface-raised: var(--color-surface-raised);
  --border:         var(--color-border);
  --gold:           var(--color-gold);
  --gold-bright:    var(--color-gold-bright);
  --gold-dim:       var(--color-gold-dim);
  --text:           var(--color-text-primary);
  --text-muted:     var(--color-text-secondary);
  --danger:         var(--color-danger);
  --success:        var(--color-success);
  --warning:        var(--color-warning);

  /* Font: each context loads @font-face locally */
  --font-ui: 'NanumSquare Neo', 'NanumSquareNeo', 'Malgun Gothic', sans-serif;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-6: 24px;  --space-8: 32px;
  --space-12: 48px; --space-16: 64px;

  /* Border radius */
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;

  /* Typography scale */
  --text-display:    3.5rem;
  --text-heading:    1.75rem;
  --text-subheading: 1.25rem;
  --text-body:       1rem;
  --text-caption:    0.875rem;
  --text-small:      0.75rem;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold-dim); }

/* ── Button base ── */
/* Sizing (padding, font-size, border-radius) is defined locally per context.
   This provides only the shared color behavior and interaction. */
.btn {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .03em;
  transition:
    background-color .2s,
    color .2s,
    border-color .2s,
    transform .2s,
    box-shadow .2s;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* Primary / Gold */
.btn-primary,
.btn-gold {
  background: var(--color-gold);
  color: #0a0a0a;
}
.btn-primary:not(:disabled):hover,
.btn-gold:not(:disabled):hover {
  background: var(--color-gold-bright);
  color: #0a0a0a;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(201, 168, 76, .35);
}

/* Secondary / Outline */
.btn-secondary,
.btn-outline {
  background: transparent;
  color: var(--color-gold);
  border: 1px solid var(--color-gold-dim);
}
.btn-secondary:not(:disabled):hover,
.btn-outline:not(:disabled):hover {
  border-color: var(--color-gold);
  background: rgba(201, 168, 76, .08);
  color: var(--color-gold-bright);
}

/* Ghost (app-only) */
.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.btn-ghost:not(:disabled):hover { border-color: var(--text-muted); }