/* ============================================================
   HOUSE OF CHICORY — COMPONENT TOKENS
   ------------------------------------------------------------
   Higher-level tokens composed from the foundations, so every
   Button / Input / Card across the site is identical by default.
   ============================================================ */

:root {
  /* ---------- BUTTONS ---------- */
  --btn-font:           var(--ui-font);
  --btn-weight:         var(--fw-semibold);
  --btn-tracking:       0.005em;
  --btn-radius:         var(--radius-button);
  --btn-height-sm:      36px;
  --btn-height-md:      46px;
  --btn-height-lg:      56px;
  --btn-pad-x-sm:       var(--space-4);
  --btn-pad-x-md:       var(--space-6);
  --btn-pad-x-lg:       var(--space-8);
  --btn-gap:            var(--space-2);
  --btn-transition:     var(--transition-colors), box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out);

  /* primary (filled green) */
  --btn-primary-bg:        var(--green-700);
  --btn-primary-bg-hover:  var(--green-800);
  --btn-primary-bg-active: var(--green-900);
  --btn-primary-fg:        var(--stone-50);

  /* secondary (filled amber) */
  --btn-secondary-bg:        var(--amber-400);
  --btn-secondary-bg-hover:  var(--amber-500);
  --btn-secondary-fg:        var(--stone-50);

  /* outline */
  --btn-outline-border:      var(--border-strong);
  --btn-outline-fg:          var(--text-strong);
  --btn-outline-bg-hover:    var(--hover-tint);

  /* ghost */
  --btn-ghost-fg:            var(--green-700);
  --btn-ghost-bg-hover:      var(--green-50);

  /* ---------- INPUTS ---------- */
  --input-font:        var(--ui-font);
  --input-size:        var(--text-base);
  --input-height:      48px;
  --input-pad-x:       var(--space-4);
  --input-radius:      var(--radius-input);
  --input-bg:          var(--surface-raised);
  --input-bg-disabled: var(--stone-150);
  --input-border:      var(--border-default);
  --input-border-hover:var(--border-strong);
  --input-border-focus:var(--blue-400);
  --input-fg:          var(--text-body);
  --input-placeholder: var(--text-subtle);
  --input-label-font:  var(--ui-font);
  --input-label-size:  var(--text-sm);
  --input-label-weight:var(--fw-medium);
  --input-shadow-focus:var(--shadow-focus);

  /* ---------- CARDS ---------- */
  --card-bg:           var(--surface-card);
  --card-radius:       var(--radius-card);
  --card-pad:          var(--pad-card);
  --card-border:       var(--border-subtle);
  --card-shadow:       var(--elevation-card);
  --card-shadow-hover: var(--elevation-card-hover);
  --card-lift:         -4px;   /* translateY on hover */

  /* ---------- TAGS / BADGES ---------- */
  --tag-radius:    var(--radius-pill);
  --tag-font:      var(--ui-font);
  --tag-size:      var(--text-xs);
  --tag-pad:       var(--space-1) var(--space-3);

  --badge-font:    var(--data-font);
  --badge-tracking:var(--tracking-wide);
}