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

  .ui-root[data-look="playful"] {
    color-scheme: light;

    --font-body:        ui-rounded, "SF Pro Rounded", "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
    --font-heading:     ui-rounded, "SF Pro Rounded", "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
    --font-ui:          ui-rounded, "SF Pro Rounded", "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
    --font-mono:        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --weight-body:      var(--weight-regular);
    --weight-heading:   var(--weight-bold);
    --weight-ui:        var(--weight-semibold);
    --weight-strong:    var(--weight-bold);
    --tracking-heading: var(--tracking-snug);
    --tracking-ui:      var(--tracking-normal);
    --leading-heading:  var(--leading-snug);
    --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:          0.9375rem;
    --text-ui-sm:       var(--text-sm);
    --text-ui-lg:       var(--text-md);
    --text-caption:     var(--text-sm);
    --text-label:       0.9375rem;

    --radius-control:   var(--radius-2xl);
    --radius-surface:   var(--radius-3xl);
    --radius-overlay:   18px;
    --radius-dialog:    var(--radius-4xl);
    --radius-tag:       var(--radius-full);
    --radius-pill:      var(--radius-full);
    --radius-item:      var(--radius-xl);
    --radius-check:     7px;

    --control-height:        2.75rem;
    --control-height-sm:     2.25rem;
    --control-height-lg:     3.25rem;
    --control-padding-x:     1.25rem;
    --control-padding-x-sm:  0.875rem;
    --control-padding-x-lg:  1.625rem;
    --control-gap:           var(--space-2);
    --control-border-width:  2px;
    --control-border:        color-mix(in oklab, var(--rule-strong), var(--ink) 30%);
    --control-bg:            var(--bg-elevated);
    --control-shadow:        0 2px 0 0 light-dark(oklch(0.45 0.16 330 / 0.06), rgb(0 0 0 / 0.25));

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

    --surface-bg:           var(--bg-elevated);
    --surface-border-width: 1px;
    --surface-border:       var(--rule);
    --surface-shadow:       0 1px 2px light-dark(oklch(0.45 0.16 330 / 0.06), rgb(0 0 0 / 0.3)), 0 10px 28px -12px light-dark(oklch(0.45 0.16 330 / 0.22), rgb(0 0 0 / 0.55));
    --surface-padding:      var(--space-7);
    --surface-padding-sm:   var(--space-5);
    --surface-gap:          var(--space-5);

    --overlay-bg:           var(--bg-elevated);
    --overlay-ink:          var(--ink);
    --overlay-border-width: 1px;
    --overlay-border:       var(--rule);
    --overlay-shadow:       0 4px 10px -4px light-dark(oklch(0.45 0.16 330 / 0.14), rgb(0 0 0 / 0.4)), 0 18px 40px -12px light-dark(oklch(0.45 0.16 330 / 0.3), rgb(0 0 0 / 0.6));
    --overlay-padding:      var(--space-1-5);
    --overlay-padding-lg:   var(--space-5);
    --tooltip-bg:           var(--bg-inverse);
    --tooltip-ink:          var(--ink-inverse);

    --dialog-bg:            var(--bg-elevated);
    --dialog-border-width:  0px;
    --dialog-border:        var(--rule);
    --dialog-shadow:        0 8px 20px -8px light-dark(oklch(0.45 0.16 330 / 0.18), rgb(0 0 0 / 0.4)), 0 32px 72px -16px light-dark(oklch(0.45 0.16 330 / 0.4), rgb(0 0 0 / 0.7));
    --dialog-padding:       var(--space-8);
    --dialog-gap:           var(--space-5);
    --dialog-width:         32rem;
    --backdrop:             rgb(52 20 72 / 0.42);
    --backdrop-blur:        4px;

    --tag-height:     1.625rem;
    --tag-padding-x:  var(--space-2-5);
    --tag-font-size:  var(--text-xs);
    --tag-weight:     var(--weight-bold);

    --icon-size:      1.125rem;
    --icon-size-sm:   1rem;
    --icon-size-lg:   1.375rem;
    --icon-stroke:    2.25;

    --secondary:       light-dark(oklch(0.93 0.045 300), oklch(0.34 0.07 300));
    --secondary-ink:   var(--ink);
    --secondary-hover: light-dark(oklch(0.89 0.065 300), oklch(0.39 0.08 300));
    --link:            var(--accent-deep);

    --focus:              var(--accent);
    --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:  340ms;
    --duration-exit:   var(--duration-fast);
    --ease-enter:      cubic-bezier(0.34, 1.45, 0.64, 1);
    --ease-exit:       var(--ease-in);
    --enter-scale:     0.86;
    --enter-distance:  1rem;
    --duration-loop:   var(--duration-slower);
    --caret-blink:     1000ms;

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

    --syntax-keyword:     var(--accent-deep);
    --syntax-string:      var(--success-ink);
    --syntax-number:      var(--warning-ink);
    --syntax-function:    var(--info-ink);
    --syntax-type:        var(--info-ink);
    --syntax-property:    var(--ink-soft);
    --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-sm);

    --bg:           oklch(0.992 0.006 320);
    --bg-soft:      oklch(0.972 0.016 315);
    --bg-muted:     oklch(0.943 0.026 312);
    --bg-panel:     oklch(0.972 0.016 315);
    --bg-elevated:  #ffffff;
    --bg-canvas:    oklch(0.935 0.032 312);
    --bg-inverse:   oklch(0.27 0.075 300);
    --ink:          oklch(0.27 0.075 300);
    --ink-soft:     oklch(0.40 0.075 300);
    --ink-dim:      oklch(0.49 0.065 302);
    --ink-faint:    oklch(0.70 0.05 305);
    --ink-inverse:  oklch(0.985 0.008 320);
    --rule:         oklch(0.91 0.03 312);
    --rule-soft:    oklch(0.95 0.02 315);
    --rule-strong:  oklch(0.83 0.05 310);
    --accent:       oklch(0.56 0.235 355);
    --accent-deep:  oklch(0.49 0.22 355);
    --accent-soft:  oklch(0.95 0.035 355);
    --accent-ink:   #ffffff;
    --accent-edge:  oklch(0.85 0.09 355);
    --success:      var(--success-500);
    --success-fill: var(--success-500);
    --success-soft: var(--success-50);
    --success-ink:  var(--success-600);
    --success-edge: var(--success-200);
    --warning:      var(--warning-500);
    --warning-soft: var(--warning-50);
    --warning-ink:  var(--warning-700);
    --warning-edge: var(--warning-200);
    --danger:       var(--danger-500);
    --danger-fill:  var(--danger-500);
    --danger-soft:  var(--danger-50);
    --danger-ink:   var(--danger-600);
    --danger-edge:  var(--danger-200);
    --info:         var(--info-500);
    --info-fill:    var(--info-500);
    --info-soft:    var(--info-50);
    --info-ink:     var(--info-600);
    --info-edge:    var(--info-200);
    --checkbox-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
    --select-caret:   url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237a5f95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  }

  @media (prefers-color-scheme: dark) {
    .ui-root:not([data-theme="light"]),

    .ui-root[data-look="playful"]:not([data-theme="light"]) {
      color-scheme: dark;
      --bg:           oklch(0.205 0.045 295);
      --bg-soft:      oklch(0.235 0.05 295);
      --bg-muted:     oklch(0.29 0.055 296);
      --bg-panel:     oklch(0.235 0.05 295);
      --bg-elevated:  oklch(0.255 0.055 296);
      --bg-canvas:    oklch(0.16 0.04 295);
      --bg-inverse:   oklch(0.96 0.018 320);
      --ink:          oklch(0.965 0.015 320);
      --ink-soft:     oklch(0.86 0.03 315);
      --ink-dim:      oklch(0.76 0.04 310);
      --ink-faint:    oklch(0.56 0.055 305);
      --ink-inverse:  oklch(0.23 0.05 298);
      --rule:         oklch(0.32 0.055 296);
      --rule-soft:    oklch(0.27 0.05 296);
      --rule-strong:  oklch(0.42 0.065 300);
      --accent:       oklch(0.76 0.16 355);
      --accent-deep:  oklch(0.83 0.12 355);
      --accent-soft:  oklch(0.36 0.1 340);
      --accent-ink:   oklch(0.22 0.06 330);
      --accent-edge:  oklch(0.48 0.13 352);
      --success:      var(--success-400);
      --success-fill: var(--success-600);
      --success-soft: var(--success-950);
      --success-ink:  var(--success-200);
      --success-edge: var(--success-800);
      --warning:      var(--warning-400);
      --warning-soft: var(--warning-950);
      --warning-ink:  var(--warning-200);
      --warning-edge: var(--warning-800);
      --danger:       var(--danger-400);
      --danger-fill:  var(--danger-600);
      --danger-soft:  var(--danger-950);
      --danger-ink:   var(--danger-200);
      --danger-edge:  var(--danger-800);
      --info:         var(--info-400);
      --info-fill:    var(--info-600);
      --info-soft:    var(--info-950);
      --info-ink:     var(--info-200);
      --info-edge:    var(--info-800);
      --backdrop:     rgb(10 4 20 / 0.62);
      --link: var(--accent-deep);
      --focus: var(--accent);
      --focus-ring-inner: var(--bg);
      --focus-ring-color:   color-mix(in oklab, var(--focus) 55%, transparent);
      --control-border: color-mix(in oklab, var(--rule-strong), var(--ink) 25%);

      --item-highlight: oklch(0.355 0.065 298);
      --overlay-border: oklch(0.38 0.065 298);
      --checkbox-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232a1230' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
      --select-caret:   url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23c4b3d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
    }
  }

  .ui-root[data-theme="dark"],

  .ui-root[data-look="playful"][data-theme="dark"] {
    color-scheme: dark;
    --bg:           oklch(0.205 0.045 295);
    --bg-soft:      oklch(0.235 0.05 295);
    --bg-muted:     oklch(0.29 0.055 296);
    --bg-panel:     oklch(0.235 0.05 295);
    --bg-elevated:  oklch(0.255 0.055 296);
    --bg-canvas:    oklch(0.16 0.04 295);
    --bg-inverse:   oklch(0.96 0.018 320);
    --ink:          oklch(0.965 0.015 320);
    --ink-soft:     oklch(0.86 0.03 315);
    --ink-dim:      oklch(0.76 0.04 310);
    --ink-faint:    oklch(0.56 0.055 305);
    --ink-inverse:  oklch(0.23 0.05 298);
    --rule:         oklch(0.32 0.055 296);
    --rule-soft:    oklch(0.27 0.05 296);
    --rule-strong:  oklch(0.42 0.065 300);
    --accent:       oklch(0.76 0.16 355);
    --accent-deep:  oklch(0.83 0.12 355);
    --accent-soft:  oklch(0.36 0.1 340);
    --accent-ink:   oklch(0.22 0.06 330);
    --accent-edge:  oklch(0.48 0.13 352);
    --success:      var(--success-400);
    --success-fill: var(--success-600);
    --success-soft: var(--success-950);
    --success-ink:  var(--success-200);
    --success-edge: var(--success-800);
    --warning:      var(--warning-400);
    --warning-soft: var(--warning-950);
    --warning-ink:  var(--warning-200);
    --warning-edge: var(--warning-800);
    --danger:       var(--danger-400);
    --danger-fill:  var(--danger-600);
    --danger-soft:  var(--danger-950);
    --danger-ink:   var(--danger-200);
    --danger-edge:  var(--danger-800);
    --info:         var(--info-400);
    --info-fill:    var(--info-600);
    --info-soft:    var(--info-950);
    --info-ink:     var(--info-200);
    --info-edge:    var(--info-800);
    --backdrop:     rgb(10 4 20 / 0.62);
    --link: var(--accent-deep);
    --focus: var(--accent);
    --focus-ring-inner: var(--bg);
    --focus-ring-color:   color-mix(in oklab, var(--focus) 55%, transparent);
    --control-border: color-mix(in oklab, var(--rule-strong), var(--ink) 25%);

    --item-highlight: oklch(0.355 0.065 298);
    --overlay-border: oklch(0.38 0.065 298);
    --checkbox-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232a1230' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
    --select-caret:   url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23c4b3d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-root,

    .ui-root[data-look="playful"] {
      --duration-enter: 0s;
      --duration-exit:  0s;
      --duration-slow:  0s;
    }
  }
}