/* GENERATED by tools/sync-ui-catalog.mjs from @elements/ui/style/ui-tokens.css,
   every selector confined to .ui-root. Do not edit. */
@layer tokens {
  .ui-root {

    --font-body:      var(--font-sans);
    --font-heading:   var(--font-sans);
    --font-ui:        var(--font-sans);

    --weight-body:      var(--weight-regular);
    --weight-heading:   var(--weight-semibold);
    --weight-ui:        var(--weight-medium);
    --weight-strong:    var(--weight-semibold);
    --tracking-heading: var(--tracking-tight);
    --tracking-ui:      var(--tracking-normal);
    --leading-heading:  var(--leading-tight);
    --case-ui:          none;

    --text-display:   var(--text-5xl);
    --text-h1:        var(--text-4xl);
    --text-h2:        var(--text-3xl);
    --text-h3:        var(--text-2xl);
    --text-h4:        var(--text-xl);
    --text-title:     var(--text-lg);
    --text-body:      var(--text-base);
    --text-ui:        var(--text-sm);
    --text-ui-sm:     var(--text-xs);
    --text-ui-lg:     var(--text-base);
    --text-caption:   var(--text-xs);
    --text-label:     var(--text-sm);

    --control-height:        2.5rem;
    --control-height-sm:     2rem;
    --control-height-lg:     3rem;
    --control-padding-x:     1rem;
    --control-padding-x-sm:  0.75rem;
    --control-padding-x-lg:  1.25rem;
    --control-gap:           var(--space-2);
    --control-border-width:  1px;
    --control-border:        var(--rule);
    --control-bg:            var(--bg);
    --control-shadow:        none;

    --item-height:       2rem;
    --item-padding-x:    var(--space-2);
    --item-gap:          var(--space-2);
    --radius-item:       var(--radius-sm);
    --item-highlight:    var(--bg-muted);
    --item-highlight-ink: var(--ink);
    --item-selected:     var(--accent-soft);
    --item-selected-ink: var(--ink);

    --surface-bg:            var(--bg);
    --surface-border-width:  1px;
    --surface-border:        var(--rule);
    --surface-shadow:        var(--shadow-xs);
    --surface-padding:       var(--space-6);
    --surface-padding-sm:    var(--space-4);
    --surface-gap:           var(--space-4);

    --overlay-bg:            var(--bg-elevated);
    --overlay-ink:           var(--ink);
    --overlay-border-width:  1px;
    --overlay-border:        var(--rule);
    --overlay-shadow:        var(--shadow-lg);
    --overlay-padding:       var(--space-1);
    --overlay-padding-lg:    var(--space-4);
    --tooltip-bg:            var(--bg-inverse);
    --tooltip-ink:           var(--ink-inverse);

    --dialog-bg:             var(--bg-elevated);
    --dialog-border-width:   1px;
    --dialog-border:         var(--rule);
    --dialog-shadow:         var(--shadow-2xl);
    --dialog-padding:        var(--space-6);
    --dialog-gap:            var(--space-4);
    --dialog-width:          32rem;
    --backdrop:              rgb(8 12 20 / 0.5);
    --backdrop-blur:         0px;

    --tag-height:     1.375rem;
    --tag-padding-x:  var(--space-2);
    --tag-font-size:  var(--text-xs);
    --tag-weight:     var(--weight-medium);

    --radius-check:   var(--radius-xs);

    --icon-size:      1rem;
    --icon-size-sm:   0.875rem;
    --icon-size-lg:   1.25rem;
    --icon-stroke:    2;

    --secondary:      var(--bg-muted);
    --secondary-ink:  var(--ink);
    --secondary-hover: var(--rule);
    --link:           var(--ink);

    --focus-ring-width:   3px;
    --focus-ring-offset:  0px;
    --focus-ring-inner:   var(--bg);
    --focus-ring-color:   color-mix(in oklab, var(--focus) 45%, transparent);

    --duration-enter:   var(--duration-normal);
    --duration-exit:    var(--duration-fast);
    --ease-enter:       var(--ease-out);
    --ease-exit:        var(--ease-in);
    --enter-scale:      0.96;
    --enter-distance:   0.5rem;
    --duration-loop:    var(--duration-slower);
    --caret-blink:      1120ms;

    --check-size:            1rem;
    --control-outline:       color-mix(in oklab, var(--ink-faint), var(--ink) 30%);
    --switch-thumb:          var(--white);
    --switch-thumb-checked:  var(--accent-ink);
    --indicator-width:       2px;
    --link-underline-offset: 0.2em;
    --avatar-size:           var(--control-height);
    --avatar-size-sm:        var(--control-height-sm);
    --avatar-size-lg:        var(--control-height-lg);
    --progress-height:       var(--space-2);
    --progress-height-sm:    var(--space-1);
    --progress-height-lg:    var(--space-3);
    --slider-thumb:          1rem;
    --slider-thickness:      0.375rem;
    --table-row-padding-y:   var(--space-2);
    --measure-narrow:        24rem;
    --toast-width:           var(--container-sm);
    --scrollbar-size:        var(--space-2-5);
    --carousel-gap:          var(--space-4);
    --drawer-canvas:         var(--bg-canvas);
    --drawer-handle-width:   var(--space-24);
    --drawer-handle-height:  var(--space-1-5);
    --drawer-wrapper-inset:  var(--space-3);
    --sidebar-bg:            var(--bg-soft);
    --sidebar-ink:           var(--ink);
    --sidebar-accent:        var(--item-highlight);
    --sidebar-accent-ink:    var(--item-highlight-ink);
    --sidebar-border:        var(--rule);

    --syntax-keyword:     var(--danger-ink);
    --syntax-string:      var(--info-ink);
    --syntax-number:      var(--warning-ink);
    --syntax-function:    var(--success-ink);
    --syntax-type:        var(--success-ink);
    --syntax-property:    var(--link);
    --syntax-comment:     var(--ink-dim);
    --syntax-variable:    var(--ink);
    --syntax-punctuation: var(--ink-soft);
    --code-selection:     color-mix(in oklab, var(--accent) 22%, transparent);
    --code-font-size:     calc(var(--text-ui) * 0.9375);

    --chart-1: light-dark(
      oklch(from var(--info-500) calc(l - 0.045) calc(c - 0.037) calc(h + 0.5)),
      oklch(from var(--info-500) calc(l + 0.002) calc(c - 0.039) calc(h + 0.1)));
    --chart-2: light-dark(
      oklch(from var(--info-500) calc(l + 0.051) calc(c - 0.025) calc(h + 145.6)),
      oklch(from var(--info-500) calc(l + 0.002) calc(c - 0.027) calc(h + 145.1)));
    --chart-3: light-dark(
      oklch(from var(--info-500) calc(l + 0.049) calc(c - 0.059) calc(h + 267.1)),
      oklch(from var(--info-500) calc(l + 0.001) calc(c - 0.072) calc(h + 268.1)));
    --chart-4: light-dark(
      oklch(from var(--info-500) calc(l + 0.144) calc(c - 0.039) calc(h + 180.1)),
      oklch(from var(--info-500) calc(l + 0.05) calc(c - 0.057) calc(h + 178.2)));
    --chart-5: light-dark(
      oklch(from var(--info-500) calc(l + 0.096) calc(c - 0.059) calc(h + 102.4)),
      oklch(from var(--info-500) calc(l + 0.002) calc(c - 0.029) calc(h + 105.8)));
    --chart-6: light-dark(
      oklch(from var(--info-500) calc(l - 0.091) calc(c - 0.02) calc(h + 247.5)),
      oklch(from var(--info-500) calc(l - 0.091) calc(c - 0.02) calc(h + 247.5)));
    --chart-7: light-dark(
      oklch(from var(--info-500) calc(l - 0.093) calc(c - 0.003) calc(h + 28.4)),
      oklch(from var(--info-500) calc(l + 0.05) calc(c - 0.055) calc(h + 31.8)));
    --chart-8: light-dark(
      oklch(from var(--info-500) calc(l + 0.003) calc(c - 0.009) calc(h + 129.9)),
      oklch(from var(--info-500) calc(l + 0.049) calc(c - 0.041) calc(h + 127.3)));
    --chart-radius: var(--radius-item);

    --button-height:       var(--control-height);
    --button-height-sm:    var(--control-height-sm);
    --button-height-lg:    var(--control-height-lg);
    --button-padding-x:    var(--control-padding-x);
    --button-padding-x-sm: var(--control-padding-x-sm);
    --button-padding-x-lg: var(--control-padding-x-lg);
    --button-font-size:    var(--text-ui);
    --button-font-size-lg: var(--text-ui-lg);
    --button-font-weight:  var(--weight-ui);
    --input-height:        var(--control-height);
    --input-height-sm:     var(--control-height-sm);
    --input-height-lg:     var(--control-height-lg);
    --input-font-size:     var(--text-ui);
    --input-bg:            var(--control-bg);
    --input-border:        var(--control-border);

    --focus-ring: 0 0 0 var(--focus-ring-offset) var(--focus-ring-inner),
                  0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
    --focus-ring-danger: 0 0 0 var(--focus-ring-offset) var(--focus-ring-inner),
                  0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--danger);
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-root {
      --duration-enter: 0s;
      --duration-exit:  0s;
      --duration-slow:  0s;
    }
  }
}

@layer base {
  .ui-root,

  .ui-root {
    font-family: var(--font-body);
    font-weight: var(--weight-body);
  }

  .ui-root h1,

  .ui-root h2,

  .ui-root h3,

  .ui-root h4,

  .ui-root h5,

  .ui-root h6 {
    font-family:    var(--font-heading);
    font-weight:    var(--weight-heading);
    letter-spacing: var(--tracking-heading);
    line-height:    var(--leading-heading);
  }

  .ui-root h1 { font-size: var(--text-h1); }
  .ui-root h2 { font-size: var(--text-h2); }
  .ui-root h3 { font-size: var(--text-h3); }
  .ui-root h4 { font-size: var(--text-h4); }
}

@layer components {
  .ui-root :where(button, .button, input, select, textarea, .tab,
         input[type="submit"], input[type="reset"], input[type="button"]) {
    font-family:    var(--font-ui);
    letter-spacing: var(--tracking-ui);
  }

  .ui-root .card {
    background:    var(--surface-bg);
    border:        var(--surface-border-width) solid var(--surface-border);
    box-shadow:    var(--surface-shadow);
  }
}