/*
   Unity DS - tokens.css
   Generated by `bin/udb varsets compile`.
   Do not hand-edit. Update discrete files in `src/lib/css/varsets/` and recompile.
*/
/* ===== varset:reset order:1 source:src/lib/css/varsets/reset.css ===== */
/*
   Unity DS - reset.css
   Root baseline: font size, box model, smoothing, scroll.
   This varset must load first. All rem/em values depend on it.
   (c) Meerkat - Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat
    */

@layer reset {
  :root {
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    tab-size: 4;
  }

  body {
    margin: 0;
    line-height: 1.5;
  }
}
/* ===== varset:space order:10 source:src/lib/css/varsets/space.css ===== */
/*
   Unity DS — space.css
   4px-base spacing scale, radius, layout constraints.
   (c) Jelly — Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat
*/

@layer reset {
  :root {
    /*  spacing scale: 4px base  */
    --u-space-1:  0.25rem;   /*  4px  */
    --u-space-2:  0.5rem;    /*  8px  */
    --u-space-3:  0.75rem;   /* 12px  */
    --u-space-4:  1rem;      /* 16px  */
    --u-space-5:  1.25rem;   /* 20px  */
    --u-space-6:  1.5rem;    /* 24px  */
    --u-space-8:  2rem;      /* 32px  */
    --u-space-10: 2.5rem;    /* 40px  */
    --u-space-12: 3rem;      /* 48px  */
    --u-space-16: 4rem;      /* 64px  */
    --u-space-20: 5rem;      /* 80px  */
    --u-space-24: 6rem;      /* 96px  */

    /*  radius  */
    --u-radius-none: 0;
    --u-radius-sm:   0.125rem;  /*  2px  */
    --u-radius:      0.375rem;  /*  6px — default */
    --u-radius-lg:   0.625rem;  /* 10px  */
    --u-radius-xl:   1rem;      /* 16px  */
    --u-radius-full: 999px;     /* pill  */

    /*  gap aliases — used by u-stack/u-row/u-grid `gap` prop
        Named tier, mapped to raw spacing scale.
        Override these per-product to shift density. */
    --u-gap-xs: var(--u-space-1);  /*  4px  */
    --u-gap-sm: var(--u-space-2);  /*  8px  */
    --u-gap-md: var(--u-space-3);  /* 12px — default */
    --u-gap:    var(--u-gap-md);   /*  bare alias for default  */
    --u-gap-lg: var(--u-space-6);  /* 24px  */
    --u-gap-xl: var(--u-space-8);  /* 32px  */

    /*  layout  */
    --u-max-content: 72rem;     /* 1152px — app/marketing */
    --u-max-doc:     40rem;     /*  640px — readable prose */
  }
}
/* ===== varset:breakpoint order:12 source:src/lib/css/varsets/breakpoint.css ===== */
/*
   Unity DS — breakpoint.css
   Starter responsive breakpoint scale.
   (c) Jelly — Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat

   Used by layout primitives (u-stack, u-row, u-grid) and any
   component that takes a `flip` / `hide` / `show` prop.

   Adjust freely — these are starter values.
*/

@layer unity {
  :root {
    --u-bp-sm: 480px;   /*  large phone        */
    --u-bp-md: 768px;   /*  tablet portrait    */
    --u-bp-lg: 1024px;  /*  tablet landscape / small laptop */
    --u-bp-xl: 1280px;  /*  desktop            */
    --u-bp-2xl: 1536px; /*  wide desktop       */
  }
}
/* ===== varset:depth order:20 source:src/lib/css/varsets/depth.css ===== */
/*
   Unity DS — depth.css
   Grey scale + tinted surface ramp + paired border ramp.
   (c) Jelly — Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat

   Grey:   12-step static neutral ramp. No tint. Never flips.
   Depth:  8-step tinted surface ramp. Flips in dark mode.
           Mix any color into depth for chromatic surfaces.
   Border: 8-step shifted from depth — guaranteed contrast
           against its paired depth step.

   Tint system:
     --tint / --tint-c     = light mode hue + chroma
     --tint-i / --tint-i-c = dark mode hue + chroma
   Override --tint vars in @layer sys to re-skin the surface feel.
*/

@layer unity {
  :root {
    /*  tint: override in @layer sys to re-skin  */
    --tint:     203;
    --tint-c:   0.003;
    --tint-i:   270;
    --tint-i-c: 0.021;

    /*  grey: 12 steps, static, untinted  */
    --grey-0:  oklch(0.97 0 0);
    --grey-1:  oklch(0.93 0 0);
    --grey-2:  oklch(0.88 0 0);
    --grey-3:  oklch(0.82 0 0);
    --grey-4:  oklch(0.74 0 0);
    --grey-5:  oklch(0.64 0 0);
    --grey-6:  oklch(0.52 0 0);
    --grey-7:  oklch(0.40 0 0);
    --grey-8:  oklch(0.30 0 0);
    --grey-9:  oklch(0.22 0 0);
    --grey-10: oklch(0.13 0 0);
    --grey-11: oklch(0.05 0 0);

    /*  depth: light mode (curve: 1.61)  */
    --depth-0: oklch(0.99   var(--tint-c) var(--tint));
    --depth-1: oklch(0.9808 var(--tint-c) var(--tint));
    --depth-2: oklch(0.9621 var(--tint-c) var(--tint));
    --depth-3: oklch(0.9363 var(--tint-c) var(--tint));
    --depth-4: oklch(0.9047 var(--tint-c) var(--tint));
    --depth-5: oklch(0.8678 var(--tint-c) var(--tint));
    --depth-6: oklch(0.8262 var(--tint-c) var(--tint));
    --depth-7: oklch(0.78   var(--tint-c) var(--tint));

    /*  border: light mode (shift: -0.06)  */
    --border-0: oklch(0.93   var(--tint-c) var(--tint));
    --border-1: oklch(0.9208 var(--tint-c) var(--tint));
    --border-2: oklch(0.9021 var(--tint-c) var(--tint));
    --border-3: oklch(0.8763 var(--tint-c) var(--tint));
    --border-4: oklch(0.8447 var(--tint-c) var(--tint));
    --border-5: oklch(0.8078 var(--tint-c) var(--tint));
    --border-6: oklch(0.7662 var(--tint-c) var(--tint));
    --border-7: oklch(0.72   var(--tint-c) var(--tint));
  }

  [data-theme="dark"] {
    /*  depth: dark mode (curve: 0.58)  */
    --depth-0: oklch(0.10   var(--tint-i-c) var(--tint-i));
    --depth-1: oklch(0.1712 var(--tint-i-c) var(--tint-i));
    --depth-2: oklch(0.2064 var(--tint-i-c) var(--tint-i));
    --depth-3: oklch(0.2346 var(--tint-i-c) var(--tint-i));
    --depth-4: oklch(0.259  var(--tint-i-c) var(--tint-i));
    --depth-5: oklch(0.281  var(--tint-i-c) var(--tint-i));
    --depth-6: oklch(0.3012 var(--tint-i-c) var(--tint-i));
    --depth-7: oklch(0.32   var(--tint-i-c) var(--tint-i));

    /*  border: dark mode (shift: +0.06)  */
    --border-0: oklch(0.16   var(--tint-i-c) var(--tint-i));
    --border-1: oklch(0.2312 var(--tint-i-c) var(--tint-i));
    --border-2: oklch(0.2664 var(--tint-i-c) var(--tint-i));
    --border-3: oklch(0.2946 var(--tint-i-c) var(--tint-i));
    --border-4: oklch(0.319  var(--tint-i-c) var(--tint-i));
    --border-5: oklch(0.341  var(--tint-i-c) var(--tint-i));
    --border-6: oklch(0.3612 var(--tint-i-c) var(--tint-i));
    --border-7: oklch(0.38   var(--tint-i-c) var(--tint-i));
  }
}
/* ===== varset:surface order:30 source:src/lib/css/varsets/surface.css ===== */
/*
   Unity DS — surface.css
   Semantic surface mapping. Bridges depth.css → component tokens.
   (c) Jelly — Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat

   Components consume these (--u-bg / --u-surface / --u-fg / --u-border).
   The depth ramp is the implementation detail; surfaces are the API.

   Depends on: depth.css (depth ramp), color.css (--u-accent for focus ring)
*/

@layer unity {
  :root {
    /*  surfaces: from depth ramp  */
    --u-bg:        var(--depth-0);   /* page background     */
    --u-surface:   var(--depth-1);   /* card, sidebar       */
    --u-surface-2: var(--depth-2);   /* nested card, hover  */
    --u-surface-3: var(--depth-3);   /* deeper nested       */

    /*  borders: from border ramp  */
    --u-border:    var(--border-1);  /* hairline default    */
    --u-border-2:  var(--border-3);  /* emphasis / inputs   */

    /*  text: tinted, opposite end from surfaces  */
    --u-fg:        oklch(0.09 var(--tint-c) var(--tint));   /* body / headings */
    --u-fg-muted:  oklch(0.44 var(--tint-c) var(--tint));   /* captions, labels */
    --u-fg-dim:    oklch(0.65 var(--tint-c) var(--tint));   /* placeholder     */

    /*  focus ring  */
    --u-focus-ring: 0 0 0 2px var(--u-bg), 0 0 0 4px var(--u-accent);
  }

  [data-theme="dark"] {
    /*  text: flipped — light on dark  */
    --u-fg:        oklch(0.93 var(--tint-i-c) var(--tint-i));
    --u-fg-muted:  oklch(0.60 var(--tint-i-c) var(--tint-i));
    --u-fg-dim:    oklch(0.38 var(--tint-i-c) var(--tint-i));
  }
}
/* ===== varset:type order:40 source:src/lib/css/varsets/type.css ===== */
/*
   Unity DS — type.css
   Font stacks (tier 1 + tier 2), type scales, element reset.
   Vars cross shadow DOM. Element selectors are light DOM only.
   (c) Jelly — Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat
*/

@layer reset {
  :root {
    /*  tier 1 stacks: system, always available  */
    --u-font-sans:  Roboto, 'Helvetica Neue', Helvetica, system-ui, Arial, sans-serif;
    --u-font-serif: Charter, 'Bitstream Charter', 'Iowan Old Style', Georgia, serif;
    --u-font-mono:  Menlo, Consolas, 'Cascadia Code', ui-monospace, monospace;

    /*  active stacks: override to swap voice  */
    --u-font-body:    var(--u-font-sans);
    --u-font-heading: var(--u-font-sans);
    --u-font-code:    var(--u-font-mono);

    /*  layout  */
    --u-type-measure: 65ch;

    /*  reset heading scale: app-sized (12px base)  */
    --u-reset-h1: 700 1.25rem/1.2 var(--u-font-heading);
    --u-reset-h2: 700 1.0625rem/1.25 var(--u-font-heading);
    --u-reset-h3: 600 0.9375rem/1.3 var(--u-font-heading);
    --u-reset-h4: 600 0.8125rem/1.35 var(--u-font-heading);
    --u-reset-h5: 600 0.75rem/1.4 var(--u-font-body);
    --u-reset-h6: 500 0.5625rem/1 var(--u-font-code);

    /*  doc scale: reading scope  */
    --u-doc-display: 900 2.625rem/1.1 var(--u-font-heading);
    --u-doc-h1:      700 2rem/1.2 var(--u-font-heading);
    --u-doc-h2:      700 1.5rem/1.25 var(--u-font-heading);
    --u-doc-h3:      700 1.1875rem/1.35 var(--u-font-heading);
    --u-doc-body:    400 1rem/1.55 var(--u-font-body);
    --u-doc-body-sm: 400 0.9375rem/1.5 var(--u-font-body);
    --u-doc-caption: 400 0.8125rem/1.4 var(--u-font-body);

    /*  ui scale  */
    --u-ui-h3:      600 1.0625rem/1.3 var(--u-font-body);
    --u-ui-h4:      600 0.875rem/1.35 var(--u-font-body);
    --u-ui-body:    400 0.75rem/1.5 var(--u-font-body);
    --u-ui-caption: 500 0.6875rem/1.4 var(--u-font-body);

    /*  chrome / mono scale  */
    --u-ui-stat:  600 1.375rem/1.1 var(--u-font-code);
    --u-ui-code:  400 0.75rem/1.5 var(--u-font-code);
    --u-ui-tiny:  500 0.625rem/1.3 var(--u-font-code);
    --u-ui-pill:  500 0.625rem/1 var(--u-font-code);
    --u-ui-label: 500 0.5625rem/1 var(--u-font-code);

    /*  display / hero  */
    --u-txt-jumbo: 900 4rem/1.05 var(--u-font-heading);
    --u-txt-hero:  800 3rem/1.08 var(--u-font-heading);
  }

  /*  base: 12px, app-tight  */
  body { font: var(--u-ui-body); }

  /*  zero margins — components own spacing  */
  h1, h2, h3, h4, h5, h6,
  p, ul, ol, blockquote, pre, table, details, figure, hr {
    margin: 0;
  }

  /*  headings  */
  h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; }
  h1 { font: var(--u-reset-h1); }
  h2 { font: var(--u-reset-h2); }
  h3 { font: var(--u-reset-h3); }
  h4 { font: var(--u-reset-h4); }
  h5 { font: var(--u-reset-h5); }
  h6 { font: var(--u-reset-h6); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }

  /*  links  */
  a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

  /*  inline code  */
  code, kbd, samp { font-family: var(--u-font-code); font-size: 0.875em; }
  kbd { font-size: 0.8em; }

  /*  code blocks  */
  pre { font: var(--u-ui-code); line-height: 1.55; overflow-x: auto; white-space: pre; tab-size: 2; }
  pre code { font-size: inherit; }

  /*  blockquote  */
  blockquote { padding-left: 0.5em; border-left: 2px solid currentColor; opacity: 0.8; font-style: italic; }
  blockquote cite { display: block; font-style: normal; font: var(--u-ui-caption); opacity: 0.6; }

  /*  lists  */
  ul, ol { padding-left: 1.2em; }

  /*  tables  */
  table { width: 100%; font: var(--u-ui-body); font-variant-numeric: tabular-nums; }
  th { font: var(--u-ui-label); text-align: left; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.25em 0.4em; border-bottom: 1px solid; }
  td { padding: 0.2em 0.4em; border-bottom: 1px solid; }

  /*  details  */
  summary { cursor: pointer; font: var(--u-reset-h4); }

  /*  small / figcaption  */
  small { font: var(--u-ui-caption); }
  figcaption { font: var(--u-ui-caption); font-style: italic; opacity: 0.6; }

  /*  mark  */
  mark { padding: 0.02em 0.15em; border-radius: 2px; }

  /*  abbr  */
  abbr[title] { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }

  /*  hr  */
  hr { border: none; height: 1px; background: currentColor; opacity: 0.15; }
}

/*  tier 2: unity premium fonts (override tier 1)  */
@layer unity {
  :root {
    --u-font-sans:  'Inter', Roboto, 'Helvetica Neue', Helvetica, sans-serif;
    --u-font-serif: 'Lora', Charter, Georgia, serif;
    --u-font-mono:  'JetBrains Mono', Menlo, Consolas, monospace;
  }
}
/* ===== varset:elevation order:50 source:src/lib/css/varsets/elevation.css ===== */
/*
   Unity DS — elevation.css
   Shadow scale: 4 steps from card-edge to overlay-detached.
   Dark mode adds a subtle 1px hairline (white @ 6-7%) on lg/xl since
   pure shadow disappears against a dark surface.
   (c) Jelly — Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat
*/

@layer unity {
  :root {
    --u-shadow-sm: 0 1px 3px  color-mix(in srgb, #000  8%, transparent),
                   0 1px 2px  color-mix(in srgb, #000  5%, transparent);
    --u-shadow:    0 4px 12px color-mix(in srgb, #000 10%, transparent),
                   0 2px 4px  color-mix(in srgb, #000  6%, transparent);
    --u-shadow-lg: 0 8px 20px color-mix(in srgb, #000 11%, transparent),
                   0 3px 8px  color-mix(in srgb, #000  7%, transparent);
    --u-shadow-xl: 0 16px 32px color-mix(in srgb, #000 14%, transparent),
                   0 6px 12px  color-mix(in srgb, #000  8%, transparent);
  }

  [data-theme="dark"] {
    --u-shadow-sm: 0 1px 3px  color-mix(in srgb, #000 20%, transparent),
                   0 1px 2px  color-mix(in srgb, #000 12%, transparent);
    --u-shadow:    0 4px 12px color-mix(in srgb, #000 28%, transparent),
                   0 2px 4px  color-mix(in srgb, #000 16%, transparent);
    --u-shadow-lg: 0 8px 20px color-mix(in srgb, #000 30%, transparent),
                   0 3px 8px  color-mix(in srgb, #000 18%, transparent),
                   0 0 0 1px  color-mix(in srgb, #fff  6%, transparent);
    --u-shadow-xl: 0 16px 32px color-mix(in srgb, #000 38%, transparent),
                   0 6px 12px  color-mix(in srgb, #000 22%, transparent),
                   0 0 0 1px   color-mix(in srgb, #fff  7%, transparent);
  }
}
/* ===== varset:glass order:55 source:src/lib/css/varsets/glass.css ===== */
/*
   Unity DS — glass.css
   Frosted/translucent surface variants (referenced by brand-glass.html).
   This is a placeholder reconstruction — the original was not provided
   alongside the varsets. Visuals are illustrative; tune to taste.
*/

@layer unity {
  .u-glass {
    position: relative;
    border-radius: var(--u-radius-lg);
    background: color-mix(in srgb, var(--u-surface) 70%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid color-mix(in srgb, var(--u-fg) 8%, transparent);
    box-shadow: var(--u-shadow-sm);
  }

  /* Tinted variants — pick a hue to wash through the glass */
  .u-glass-red    { background: color-mix(in srgb, var(--u-red-tint)    55%, transparent); }
  .u-glass-orange { background: color-mix(in srgb, var(--u-orange-tint) 55%, transparent); }
  .u-glass-yellow { background: color-mix(in srgb, var(--u-yellow-tint) 55%, transparent); }
  .u-glass-green  { background: color-mix(in srgb, var(--u-green-tint)  55%, transparent); }
  .u-glass-teal   { background: color-mix(in srgb, var(--u-teal-tint)   55%, transparent); }
  .u-glass-aqua   { background: color-mix(in srgb, var(--u-aqua-tint)   55%, transparent); }
  .u-glass-blue   { background: color-mix(in srgb, var(--u-blue-tint)   55%, transparent); }
  .u-glass-indigo { background: color-mix(in srgb, var(--u-indigo-tint) 55%, transparent); }
  .u-glass-purple { background: color-mix(in srgb, var(--u-purple-tint) 55%, transparent); }
  .u-glass-pink   { background: color-mix(in srgb, var(--u-pink-tint)   55%, transparent); }
  .u-glass-salmon { background: color-mix(in srgb, var(--u-salmon-tint) 55%, transparent); }

  /* glow: soft outer halo using current tint */
  .u-glass-glow {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--u-fg) 6%, transparent),
      0 8px 28px color-mix(in srgb, var(--u-accent) 18%, transparent),
      inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent);
  }

  /* matte: low-blur, opaque-leaning, no specular */
  .u-glass-matte {
    background: color-mix(in srgb, var(--u-surface-2) 92%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: var(--u-shadow-sm);
  }

  /* vivid: punchier tint + crisper edge */
  .u-glass-vivid {
    border: 1px solid color-mix(in srgb, var(--u-fg) 14%, transparent);
    box-shadow:
      var(--u-shadow),
      inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent);
  }
  .u-glass-vivid.u-glass-red    { background: color-mix(in srgb, var(--u-red-light)    45%, transparent); }
  .u-glass-vivid.u-glass-pink   { background: color-mix(in srgb, var(--u-pink-light)   45%, transparent); }
  .u-glass-vivid.u-glass-blue   { background: color-mix(in srgb, var(--u-blue-light)   45%, transparent); }
  .u-glass-vivid.u-glass-indigo { background: color-mix(in srgb, var(--u-indigo-light) 45%, transparent); }
  .u-glass-vivid.u-glass-teal   { background: color-mix(in srgb, var(--u-teal-light)   45%, transparent); }
  .u-glass-vivid.u-glass-purple { background: color-mix(in srgb, var(--u-purple-light) 45%, transparent); }
}
/* ===== varset:motion order:60 source:src/lib/css/varsets/motion.css ===== */
/*
   Unity DS — motion.css
   Hybrid motion system: personality curves (A) + role aliases (B).
   (c) Jelly — Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat

   STRUCTURE
   ─────────
   1. Durations         — clean doubling scale + named beats
   2. Personality curves — silk, apple, snap, smooth, spring (A's full set)
   3. Role aliases       — standard, enter, exit (B's discipline, mapped onto A)
   4. Presets            — duration + curve baked together; the things components actually use
   5. Reduced motion     — kill all durations to 0ms

   NAMING CHEATSHEET
   ─────────────────
     --u-curve-ease       === --u-curve-standard    (.4, 0, .2, 1)
     --u-curve-out        === --u-curve-enter       (0, 0, .2, 1)
     --u-curve-spring     === --u-curve-bounce      (.34, 1.56, .64, 1)
     --u-curve-exit                                  (.4, 0, 1, 1)         B-only, kept
     --u-curve-snap                                  (.55, .055, .675, .19) A-only, kept
     --u-curve-smooth, -silk, -apple, -linear        kept

   When in doubt: reach for --u-ease (default), --u-ease-fast (hover),
   --u-ease-enter (in), --u-ease-exit (out), --u-ease-spring (pop).
*/

@layer unity {
  :root {
    /* ── 1. DURATIONS ──────────────────────────────────────
       Clean doubling scale (100/200/400) from A, plus
       B's instant (75ms) for tap-feedback flash and
       A's modal (350ms) for sheet/dialog choreography.    */
    --u-dur-instant: 75ms;
    --u-dur-fast:    100ms;
    --u-dur-base:    200ms;
    --u-dur-modal:   350ms;
    --u-dur-slow:    400ms;

    /* timed beats (not durations — wall-clock) */
    --u-toast-dur:   3s;

    /* ── 2. CURVES ─────────────────────────────────────────
       Same bézier, multiple names. Pick whichever
       reads better in context.                              */

    /* role-named (B vocabulary) */
    --u-curve-standard: cubic-bezier(0.4, 0, 0.2, 1);     /* general move */
    --u-curve-enter:    cubic-bezier(0, 0, 0.2, 1);       /* decelerate-in */
    --u-curve-exit:     cubic-bezier(0.4, 0, 1, 1);       /* accelerate-out */
    --u-curve-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);/* overshoot */
    --u-curve-linear:   linear;                           /* progress / scrub */

    /* personality-named (A vocabulary) — aliases for the same curves + extras */
    --u-curve-ease:     var(--u-curve-standard);
    --u-curve-out:      var(--u-curve-enter);
    --u-curve-spring:   var(--u-curve-bounce);
    --u-curve-smooth:   cubic-bezier(0.25, 0.1, 0.25, 1);  /* gentle ease-in-out */
    --u-curve-silk:     cubic-bezier(0.4, 0, 0, 1);        /* long, butter slide */
    --u-curve-apple:    cubic-bezier(0.175, 0.885, 0.32, 1.275); /* iOS settle */
    --u-curve-snap:     cubic-bezier(0.55, 0.055, 0.675, 0.19); /* sharp ease-in */

    /* ── 3. PRESETS ────────────────────────────────────────
       Duration + curve baked into a single shorthand.
       This is what components consume 95% of the time.     */

    /* role presets — workhorse */
    --u-ease:         var(--u-dur-base)    var(--u-curve-standard);   /* 200ms · default UI */
    --u-ease-fast:    var(--u-dur-fast)    var(--u-curve-standard);   /* 100ms · hover/focus */
    --u-ease-enter:   var(--u-dur-slow)    var(--u-curve-enter);      /* 400ms · element in */
    --u-ease-exit:    var(--u-dur-fast)    var(--u-curve-exit);       /* 100ms · element out */
    --u-ease-spring:  var(--u-dur-modal)   var(--u-curve-bounce);     /* 350ms · pop/confirm */

    /* personality presets — hero moments */
    --u-ease-out:     var(--u-dur-base)    var(--u-curve-out);        /* alias of -enter, base dur */
    --u-ease-smooth:  250ms                var(--u-curve-smooth);     /* long, gentle */
    --u-ease-silk:    var(--u-dur-modal)   var(--u-curve-silk);       /* 350ms · sheet/drawer */
    --u-ease-apple:   500ms                var(--u-curve-apple);      /* iOS-style settle */
    --u-ease-snap:    var(--u-dur-base)    var(--u-curve-snap);       /* 200ms · accelerate */
  }

  /* ── 4. REDUCED MOTION ──────────────────────────────────
     Kill durations to 0ms but preserve curves so any
     CSS that reads --u-curve-* still gets valid syntax.   */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --u-dur-instant: 0ms;
      --u-dur-fast:    0ms;
      --u-dur-base:    0ms;
      --u-dur-modal:   0ms;
      --u-dur-slow:    0ms;

      --u-ease:        0ms var(--u-curve-standard);
      --u-ease-fast:   0ms var(--u-curve-standard);
      --u-ease-enter:  0ms var(--u-curve-enter);
      --u-ease-exit:   0ms var(--u-curve-exit);
      --u-ease-spring: 0ms var(--u-curve-bounce);
      --u-ease-out:    0ms var(--u-curve-out);
      --u-ease-smooth: 0ms var(--u-curve-smooth);
      --u-ease-silk:   0ms var(--u-curve-silk);
      --u-ease-apple:  0ms var(--u-curve-apple);
      --u-ease-snap:   0ms var(--u-curve-snap);
    }
  }
}
/* ===== varset:opacity order:70 source:src/lib/css/varsets/opacity.css ===== */
/*
   Unity DS — opacity.css
   10-step opacity scale + semantic aliases.
   Vars (not utility classes) so values cross shadow DOM boundaries.
   (c) Jelly — Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat
*/

@layer unity {
  :root {
    /*  scale: 10% increments  */
    --u-op-0:    0;
    --u-op-10:   0.1;
    --u-op-20:   0.2;
    --u-op-30:   0.3;
    --u-op-40:   0.4;
    --u-op-50:   0.5;
    --u-op-60:   0.6;
    --u-op-70:   0.7;
    --u-op-80:   0.8;
    --u-op-90:   0.9;
    --u-op-100:  1;

    /*  semantic aliases  */
    --u-op-ghost:    var(--u-op-10);
    --u-op-faint:    var(--u-op-30);
    --u-op-dim:      var(--u-op-50);
    --u-op-muted:    var(--u-op-70);
    --u-op-disabled: var(--u-op-40);
    --u-op-hover:    var(--u-op-70);
  }
}
/* ===== varset:color order:80 source:src/lib/css/varsets/color.css ===== */
/*
   Unity DS — color.css
   Rebalanced rainbow palette: 11 hues × 5 registers + phase.
   (c) Jelly — Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat

   Registers
   ─────────
     tint   = opaque pastels (barely there, decorative)
     light  = airy, lifted (UI-friendly text/accents)
     canon  = THE color. hero. identity. fixed — never phases.
     dark   = deep, moody (recalibrated from canon)
     wash   = canon @ 25% into transparent (tinted bg layer)

   Phase (--u-ph-*)
   ────────────────
     Mode-aware colors that flip automatically.
       Light mode → light register
       Dark mode  → dark register
     Canon never moves — it's the anchor.

   Status (--u-ok / --u-err / etc)
   ───────────────────────────────
     Semantic mappings built on phased — flip for free.

   Spectral order
   ──────────────
     red → orange → yellow → green → teal → aqua →
     blue → indigo → purple → pink → salmon
*/

@layer unity {
  :root {
    /*  tint: opaque pastels  */
    --u-red-tint:     #FFB4B4;
    --u-orange-tint:  #FFD0A0;
    --u-yellow-tint:  #FFEF99;
    --u-green-tint:   #D2FFC7;
    --u-teal-tint:    #A0EBEB;
    --u-aqua-tint:    #afe0ff;
    --u-blue-tint:    #B6DAFF;
    --u-indigo-tint:  #c0c0ff;
    --u-purple-tint:  #cfaaff;
    --u-pink-tint:    #ffb8db;
    --u-salmon-tint:  #FFDBD3;

    /*  light: airy, lifted  */
    --u-red-light:    #FB6460;
    --u-orange-light: #ffa64d;
    --u-yellow-light: #ffe65e;
    --u-green-light:  #46C850;
    --u-teal-light:   #3ee0d0;
    --u-aqua-light:   #7dd8ff;
    --u-blue-light:   #468CFA;
    --u-indigo-light: #7a7af2;
    --u-purple-light: #a570df;
    --u-pink-light:   #ff8cc8;
    --u-salmon-light: #EFA798;

    /*  canon: the color. fixed. never phases.  */
    --u-red:          #f5342f;
    --u-orange:       #ff8811;
    --u-yellow:       #fede2e;
    --u-green:        #2ab434;
    --u-teal:         #14cab8;
    --u-aqua:         #49c5ff;
    --u-blue:         #196ef4;
    --u-indigo:       #4646ed;
    --u-purple:       #8345cf;
    --u-pink:         #ff59af;
    --u-salmon:       #e97056;

    /*  dark: deep, moody  */
    --u-red-dark:     #b00804;
    --u-orange-dark:  #a85400;
    --u-yellow-dark:  #b49c18;
    --u-green-dark:   #17711e;
    --u-teal-dark:    #098074;
    --u-aqua-dark:    #1a7faa;
    --u-blue-dark:    #0341a2;
    --u-indigo-dark:  #1616b0;
    --u-purple-dark:  #50208a;
    --u-pink-dark:    #b3186e;
    --u-salmon-dark:  #b22f12;

    /*  wash: canon @ 25% transparent  */
    --u-red-wash:     color-mix(in srgb, var(--u-red)    25%, transparent);
    --u-orange-wash:  color-mix(in srgb, var(--u-orange) 25%, transparent);
    --u-yellow-wash:  color-mix(in srgb, var(--u-yellow) 25%, transparent);
    --u-green-wash:   color-mix(in srgb, var(--u-green)  25%, transparent);
    --u-teal-wash:    color-mix(in srgb, var(--u-teal)   25%, transparent);
    --u-aqua-wash:    color-mix(in srgb, var(--u-aqua)   25%, transparent);
    --u-blue-wash:    color-mix(in srgb, var(--u-blue)   25%, transparent);
    --u-indigo-wash:  color-mix(in srgb, var(--u-indigo) 25%, transparent);
    --u-purple-wash:  color-mix(in srgb, var(--u-purple) 25%, transparent);
    --u-pink-wash:    color-mix(in srgb, var(--u-pink)   25%, transparent);
    --u-salmon-wash:  color-mix(in srgb, var(--u-salmon) 25%, transparent);

    /*  phased: light mode → light register  */
    --u-ph-red:       var(--u-red-light);
    --u-ph-orange:    var(--u-orange-light);
    --u-ph-yellow:    var(--u-yellow-light);
    --u-ph-green:     var(--u-green-light);
    --u-ph-teal:      var(--u-teal-light);
    --u-ph-aqua:      var(--u-aqua-light);
    --u-ph-blue:      var(--u-blue-light);
    --u-ph-indigo:    var(--u-indigo-light);
    --u-ph-purple:    var(--u-purple-light);
    --u-ph-pink:      var(--u-pink-light);
    --u-ph-salmon:    var(--u-salmon-light);

    /*  accent  */
    --u-accent:       oklch(0.55 0.22 250);
    --u-accent-fg:    #ffffff;

    /*  status: built on phased — flip for free  */
    --u-ok:           var(--u-ph-green);
    --u-warn:         var(--u-ph-orange);
    --u-err:          var(--u-ph-red);
    --u-info:         var(--u-ph-blue);

    /*  status surfaces: wash register  */
    --u-ok-surface:   var(--u-green-wash);
    --u-warn-surface: var(--u-orange-wash);
    --u-err-surface:  var(--u-red-wash);
    --u-info-surface: var(--u-blue-wash);

    /*  status fg aliases (semantic text colors)  */
    --u-ok-fg:        var(--u-ok);
    --u-warn-fg:      var(--u-warn);
    --u-err-fg:       var(--u-err);
    --u-info-fg:      var(--u-info);

    /*  absolutes: never themed  */
    --pure-white: #fff;
    --pure-black: #000;
  }

  /*  dark mode: phase flips to dark register  */
  [data-theme="dark"] {
    --u-ph-red:       var(--u-red-dark);
    --u-ph-orange:    var(--u-orange-dark);
    --u-ph-yellow:    var(--u-yellow-dark);
    --u-ph-green:     var(--u-green-dark);
    --u-ph-teal:      var(--u-teal-dark);
    --u-ph-aqua:      var(--u-aqua-dark);
    --u-ph-blue:      var(--u-blue-dark);
    --u-ph-indigo:    var(--u-indigo-dark);
    --u-ph-purple:    var(--u-purple-dark);
    --u-ph-pink:      var(--u-pink-dark);
    --u-ph-salmon:    var(--u-salmon-dark);

    /*  accent: lifted for dark  */
    --u-accent:       oklch(0.66 0.20 250);
  }
}
/* ===== varset:states order:90 source:src/lib/css/varsets/states.css ===== */
/*
   Unity DS — states.css
   Interactive state tokens: hover, active, focus, disabled, selected,
   selection/highlight, placeholder. Standardizes the interactive layer
   so components stop inventing their own hover bg / press scale / etc.

   Pairs with opacity.css (--u-op-disabled feeds --u-disabled-op) and
   surfaces.css (--u-focus-ring lives there since it references --u-bg).

   (c) Jelly — Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat
*/

@layer unity {
  :root {
    /*  hover  */
    --u-hover-bg:     var(--u-surface-2);
    --u-hover-border: var(--u-border-2);
    --u-hover-lift:   -2px;

    /*  active / press  */
    --u-active-scale: 0.97;

    /*  disabled  */
    --u-disabled-op:  var(--u-op-disabled);

    /*  selected  */
    --u-selected-ring:   0 0 0 1px var(--u-accent);
    --u-selected-border: var(--u-accent);

    /*  focus (focus-ring itself defined in surfaces.css; status variants here)  */
    --u-focus-ring-ok:    0 0 0 2px var(--u-bg), 0 0 0 4px var(--u-ok);
    --u-focus-ring-warn:  0 0 0 2px var(--u-bg), 0 0 0 4px var(--u-warn);
    --u-focus-ring-err:   0 0 0 2px var(--u-bg), 0 0 0 4px var(--u-err);
    --u-focus-ring-inset: inset 0 0 0 2px var(--u-accent);
    --u-focus-within-ring: var(--u-focus-ring);

    /*  selection / highlight  */
    --u-select-bg:   color-mix(in srgb, var(--u-accent) 25%, transparent);
    --u-select-fg:   var(--u-fg);
    --u-highlight:   color-mix(in srgb, var(--u-accent) 8%, transparent);
    --u-placeholder: var(--u-fg-dim);
  }

  /*  global ::selection  */
  ::selection {
    background: var(--u-select-bg);
    color: var(--u-select-fg);
  }

  /*  placeholder styling  */
  ::placeholder {
    color: var(--u-placeholder);
    opacity: 1;
  }

  /*  forced-colors fallback  */
  @media (forced-colors: active) {
    :root { --u-focus-ring: 0 0 0 2px Canvas, 0 0 0 4px LinkText; }
  }
}
/* ===== varset:z-index order:92 source:src/lib/css/varsets/z-index.css ===== */
/*
   Unity DS — z-index.css
   Stacking scale for layered chrome. 100-unit increments leave
   headroom for plugin layers between named tiers.
   (c) Jelly — Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat
*/

@layer unity {
  :root {
    --u-z-dropdown: 100;
    --u-z-sticky:   200;
    --u-z-overlay:  300;
    --u-z-modal:    400;
    --u-z-toast:    500;
    --u-z-tooltip:  600;
  }
}
/* ===== varset:icon order:95 source:src/lib/css/varsets/icon.css ===== */
/*
   Unity DS — icon.css
   Icon size scale. Two ranges:
     • UI scale  (rem)  — scales with type, for inline & chrome use
     • Jumbo scale (px) — fixed display sizes for hero / empty-state /
                          marketing — never want these to scale w/ type

   Icon set: Remix Icon (https://remixicon.com) — load via CDN:
     <link rel="stylesheet"
           href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css">

   (c) Jelly — Proprietary. SPDX-License-Identifier: LicenseRef-Proprietary-Meerkat
*/

@layer unity {
  :root {
    /*  ── UI scale (rem — scales with type) ───────  */
    --u-icon-xs: 0.875rem;  /*  14px — inline w/ caption     */
    --u-icon-sm: 1rem;      /*  16px — inline w/ body        */
    --u-icon:    1.25rem;   /*  20px — default UI            */
    --u-icon-lg: 1.5rem;    /*  24px — toolbar               */
    --u-icon-xl: 2rem;      /*  32px — feature / empty-state */

    /*  ── Jumbo scale (px — fixed) ────────────────
        Hero icons, marketing splashes, onboarding,
        empty-state centerpieces. Px so they don't
        get nuked by user font-size preferences.   */
    --u-icon-jumbo-sm: 64px;   /*  modal hero, card splash       */
    --u-icon-jumbo:    128px;  /*  empty-state, onboarding step  */
    --u-icon-jumbo-lg: 256px;  /*  feature page, marketing       */
    --u-icon-jumbo-xl: 512px;  /*  hero / splash / 404           */
  }
}