/* ── PRIMARY BUTTON ─────────────────────────────────────────────── */
.btn-primary {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: var(--yellow);
    color: var(--black);
    border: none;
    border-radius: 999px;
    padding: 13px 24px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
  }
  .btn-primary:hover { background: #c8d900; }
  .btn-primary .material-icons { 
    background: var(--black);
    color: var(--yellow);
    border-radius: 50%;
    padding: 6px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px; 
  }
  

  /* ── SECONDARY BUTTON ─────────────────────────────────────────────── */
  .btn-secondary {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 999px;
    padding: 13px 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
  }
  .btn-secondary:hover { border-color: var(--yellow); color: var(--yellow); }
  .btn-secondary .material-icons {
    background: var(--black);
    color: var(--white);
    border-radius: 50%;
    padding: 6px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px; 
    transition: background 0.2s;
  }
  .btn-secondary:hover .material-icons {
    background: var(--yellow);
    color: var(--black);
  }

  /* ── SECONDARY BUTTON — DARK (voor light/off-white secties) ──────── */
  .btn-secondary--dark {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--black);
    border: 1px solid var(--gray-60);
    border-radius: 999px;
    padding: 13px 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
  }
  
  .btn-secondary--dark .material-icons {
    background: var(--black);
    color: var(--white);
    border-radius: 50%;
    padding: 6px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px; 
    transition: background 0.2s;
  }