/* ============================================================
   FlowSpace — Component-level tokens
   Specific sizing/styling tokens for reusable components.
   ============================================================ */

:root {

  /* ── Button ───────────────────────────────────── */
  --btn-height-sm:   32px;
  --btn-height-md:   40px;
  --btn-height-lg:   48px;
  --btn-height-xl:   56px;
  --btn-padding-sm:  0 var(--space-3);
  --btn-padding-md:  0 var(--space-4);
  --btn-padding-lg:  0 var(--space-5);
  --btn-padding-xl:  0 var(--space-6);
  --btn-font-sm:     var(--font-size-sm);
  --btn-font-md:     var(--font-size-sm);
  --btn-font-lg:     var(--font-size-md);
  --btn-font-xl:     var(--font-size-lg);
  --btn-font-weight: var(--font-weight-semibold);  /* @kind font */
  --btn-radius:      var(--radius-lg);
  --btn-transition:  var(--transition-fast);  /* @kind other */

  /* ── Input / Form ─────────────────────────────── */
  --input-height-sm:    32px;
  --input-height-md:    40px;
  --input-height-lg:    48px;
  --input-padding-x:    var(--space-3);
  --input-radius:       var(--radius-lg);
  --input-border:       1px solid var(--color-border-default);  /* @kind other */
  --input-border-focus: 1px solid var(--color-border-focus);    /* @kind other */
  --input-bg:           var(--color-surface-default);  /* @kind color */
  --input-bg-disabled:  var(--color-surface-sunken);   /* @kind color */
  --input-font:         var(--font-size-sm);
  --input-transition:   border-color var(--transition-fast);  /* @kind other */

  /* ── Card ─────────────────────────────────────── */
  --card-padding-sm: var(--space-4);
  --card-padding-md: var(--space-6);
  --card-padding-lg: var(--space-8);
  --card-bg:         var(--color-surface-default);  /* @kind color */
  --card-border:     1px solid var(--color-border-default);  /* @kind other */
  --card-radius:     var(--radius-card);
  --card-shadow:     var(--shadow-card);  /* @kind shadow */

  /* ── Navigation ───────────────────────────────── */
  --nav-height: 64px;
  --nav-bg:     var(--color-surface-default);  /* @kind color */
  --nav-border: 1px solid var(--color-border-default);  /* @kind other */
  --nav-shadow: var(--shadow-xs);  /* @kind shadow */

  /* ── Badge / Tag ──────────────────────────────── */
  --badge-height-sm:   20px;
  --badge-height-md:   24px;
  --badge-padding-sm:  0 var(--space-1-5);
  --badge-padding-md:  0 var(--space-2);
  --badge-font:        var(--font-size-xs);
  --badge-font-weight: var(--font-weight-medium);  /* @kind font */
  --badge-radius:      var(--radius-badge);

  /* ── Calendar (FlowSpace component) ───────────── */
  --calendar-cell-size: 40px;
  --calendar-radius:    var(--radius-xl);
  --calendar-bg:        var(--color-surface-default);  /* @kind color */
  --calendar-shadow:    var(--shadow-lg);  /* @kind shadow */

  /* ── Table ────────────────────────────────────── */
  --table-row-height:    52px;
  --table-row-height-sm: 40px;
  --table-row-height-lg: 64px;
  --table-border:        1px solid var(--color-border-default);  /* @kind other */
  --table-header-bg:     var(--color-bg-subtle);   /* @kind color */
  --table-row-hover-bg:  var(--color-bg-subtle);   /* @kind color */
  --table-stripe-bg:     var(--color-neutral-50);  /* @kind color */
}