/* ============================================================
   OliverDeck — TIER 3 · COMPONENT TOKENS
   Per-component variables. These reference ONLY Tier-2 semantic
   tokens, never Tier-1 primitives. Override them on a wrapper to
   re-skin a single component without touching the global theme.
   ============================================================ */

:root {
  /* ---------- BUTTON ---------- */
  --od-btn-radius:        var(--r-md);
  --od-btn-font-weight:   var(--fw-semi);
  --od-btn-pad-y:         12px;
  --od-btn-pad-x:         20px;
  --od-btn-gap:           8px;
  --od-btn-primary-bg:    var(--od-color-brand);
  --od-btn-primary-bg-hover: var(--od-color-brand-hover);
  --od-btn-primary-fg:    var(--od-color-brand-contrast);
  --od-btn-dark-bg:       var(--wood-900);
  --od-btn-dark-bg-hover: var(--wood-800);
  --od-btn-dark-fg:       var(--neutral-50);

  /* ---------- INPUT / SELECT / FIELD ---------- */
  --od-input-radius:      10px;
  --od-input-bg:          var(--od-color-surface);
  --od-input-border:      var(--od-color-border-strong);
  --od-input-border-focus: var(--od-color-brand);
  --od-input-text:        var(--od-color-text-primary);
  --od-input-placeholder: var(--od-color-text-faint);
  --od-input-pad-y:       12px;
  --od-input-pad-x:       14px;
  --od-control-accent:    var(--olive-500);  /* checkbox / radio / range accent-color */

  /* ---------- CARD ---------- */
  --od-card-bg:        var(--od-color-surface);
  --od-card-border:    var(--od-color-border);
  --od-card-radius:    var(--r-lg);
  --od-card-pad:       var(--s-6);
  --od-card-shadow:    var(--shadow-xs);
  --od-card-shadow-hover: var(--shadow-md);

  /* ---------- BADGE / CHIP / TAG ---------- */
  --od-badge-radius:   2px 10px 10px 2px;   /* signature left-clip stripe */
  --od-badge-font:     var(--fw-black);
  --od-chip-bg:        var(--neutral-100);
  --od-chip-border:    var(--od-color-border);
  --od-chip-radius:    var(--r-pill);
  --od-tag-radius:     var(--r-pill);
  --od-tag-active-bg:  var(--wood-900);

  /* ---------- FEEDBACK ---------- */
  --od-toast-bg:       var(--wood-900);
  --od-toast-fg:       var(--neutral-50);
  --od-overlay-bg:     rgba(24, 16, 9, 0.55);
  --od-drawer-width:   420px;

  /* ---------- TABLE ---------- */
  --od-table-head-bg:    var(--od-color-bg-subtle);
  --od-table-head-rule:  var(--wood-900);
  --od-table-row-rule:   var(--od-color-border);
}