/* @drop-in/graffiti/minimal */
/* Minimal bundle - core + utilities */

  /* Non-inheriting custom properties */
  @property --layout-gap {
    syntax: "*";
    inherits: false;
    initial-value: 1rem;
  }

  /* --gap is the per-component spacing knob (stack, cluster, card, etc.).
     Inheritance leaks a parent stack's --gap into nested children that also
     read var(--gap, …), producing surprising spacing. Reset at each box so
     each component falls back to its own designed default. */
  @property --gap {
    syntax: "*";
    inherits: false;
    initial-value: 1rem;
  }

  /* Reduced-motion opt-in: components set this to a reduced-variant
     animation; default `none` disables the animation entirely under
     `prefers-reduced-motion: reduce`. See docs/adr/0001. */
  @property --animation-reduced {
    syntax: "*";
    inherits: false;
    initial-value: none;
  }

  /* Typography */
  :root {
    /* =====================================================================
     * Tier 1: Literal tokens — concrete primitives
     * Colors, lengths, durations, raw scales. These are what consumers
     * override at the root to retheme.
     * ===================================================================== */

    /* Typography primitives */
    --font-sans:
      -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica,
      Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    --min-vw: 360;
    --max-vw: 800;

    /* Fluid Type */
    --font-size-min: 16;
    --font-size-max: 18;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.25;
    --font-width-min: 320;
    --font-width-max: 1500;

    /* Vertical Spacing */
    --vs-xs: 0.25rem;
    --vs-s: 0.5rem;
    --vs-base: 1rem;
    --vs-m: 1.5rem;
    --vs-l: 2rem;
    --vs-xl: 4rem;
    --vs-xxl: 6rem;
    --vs-xxxl: 8rem;

    /* Padding */
    --pad-xs: 0.25rem;
    --pad-s: 0.5rem;
    --pad-m: 0.75rem;
    --pad-l: 1rem;
    --pad-xl: 1.5rem;
    --pad-xxl: 2rem;
    --pad-xxxl: 4rem;

    /* Border Radius */
    --br-xs: 2px;
    --br-s: 4px;
    --br-m: 8px;
    --br-l: 16px;
    --br-xl: 24px;
    --br-xxl: 32px;

    /* Line Height */
    --lh-xs: 1;
    --lh-s: 1.2;
    --lh: 1.5;
    --lh-l: 1.8;
    --lh-xl: 2;

    /* Font Weight */
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Heading Letter Spacing */
    --ls-h1: -0.02em;
    --ls-h2: -0.015em;
    --ls-h3: -0.01em;

    /* Color System - OKLCH with 1-9 scales */
    /* Base colors (scale 5) */
    --yellow: oklch(0.88 0.15 95);
    --amber: oklch(0.78 0.16 80);
    --orange: oklch(0.75 0.18 65);
    --red: oklch(0.62 0.22 35);
    --pink: oklch(0.62 0.25 350);
    --purple: oklch(0.65 0.24 310);
    --indigo: oklch(0.55 0.25 275);
    --blue: oklch(0.5 0.28 270);
    --teal: oklch(0.82 0.08 185);
    --green: oklch(0.72 0.18 165);
    --lime: oklch(0.8 0.16 130);
    --highlighter: oklch(0.88 0.22 115);
    --brown: oklch(0.55 0.12 60);

    /* Yellow scale */
    --yellow-1: oklch(from var(--yellow) l c h / 0.1);
    --yellow-2: oklch(from var(--yellow) l c h / 0.2);
    --yellow-3: oklch(from var(--yellow) l c h / 0.3);
    --yellow-4: oklch(from var(--yellow) l c h / 0.4);
    --yellow-5: oklch(from var(--yellow) l c h / 0.5);
    --yellow-6: oklch(from var(--yellow) l c h / 0.6);
    --yellow-7: oklch(from var(--yellow) l c h / 0.75);
    --yellow-8: oklch(from var(--yellow) l c h / 0.9);
    --yellow-9: var(--yellow);

    /* Yellow opaque scale */
    /* derive:source */
    --yellow-opaque-1: color-mix(in oklab, var(--yellow), var(--bg) 90%);
    --yellow-opaque-2: color-mix(in oklab, var(--yellow), var(--bg) 80%);
    --yellow-opaque-3: color-mix(in oklab, var(--yellow), var(--bg) 65%);
    --yellow-opaque-4: color-mix(in oklab, var(--yellow), var(--bg) 40%);
    --yellow-opaque-5: var(--yellow);
    --yellow-opaque-6: color-mix(in oklab, var(--yellow), var(--fg) 30%);
    --yellow-opaque-7: color-mix(in oklab, var(--yellow), var(--fg) 50%);
    --yellow-opaque-8: color-mix(in oklab, var(--yellow), var(--fg) 70%);
    --yellow-opaque-9: color-mix(in oklab, var(--yellow), var(--fg) 90%);
    /* /derive:source */

    /* Amber scale */
    --amber-1: oklch(from var(--amber) l c h / 0.1);
    --amber-2: oklch(from var(--amber) l c h / 0.2);
    --amber-3: oklch(from var(--amber) l c h / 0.3);
    --amber-4: oklch(from var(--amber) l c h / 0.4);
    --amber-5: oklch(from var(--amber) l c h / 0.5);
    --amber-6: oklch(from var(--amber) l c h / 0.6);
    --amber-7: oklch(from var(--amber) l c h / 0.75);
    --amber-8: oklch(from var(--amber) l c h / 0.9);
    --amber-9: var(--amber);

    /* Amber opaque scale */
    /* derive:source */
    --amber-opaque-1: color-mix(in oklab, var(--amber), var(--bg) 90%);
    --amber-opaque-2: color-mix(in oklab, var(--amber), var(--bg) 80%);
    --amber-opaque-3: color-mix(in oklab, var(--amber), var(--bg) 65%);
    --amber-opaque-4: color-mix(in oklab, var(--amber), var(--bg) 40%);
    --amber-opaque-5: var(--amber);
    --amber-opaque-6: color-mix(in oklab, var(--amber), var(--fg) 30%);
    --amber-opaque-7: color-mix(in oklab, var(--amber), var(--fg) 50%);
    --amber-opaque-8: color-mix(in oklab, var(--amber), var(--fg) 70%);
    --amber-opaque-9: color-mix(in oklab, var(--amber), var(--fg) 90%);
    /* /derive:source */

    /* Orange scale */
    --orange-1: oklch(from var(--orange) l c h / 0.1);
    --orange-2: oklch(from var(--orange) l c h / 0.2);
    --orange-3: oklch(from var(--orange) l c h / 0.3);
    --orange-4: oklch(from var(--orange) l c h / 0.4);
    --orange-5: oklch(from var(--orange) l c h / 0.5);
    --orange-6: oklch(from var(--orange) l c h / 0.6);
    --orange-7: oklch(from var(--orange) l c h / 0.75);
    --orange-8: oklch(from var(--orange) l c h / 0.9);
    --orange-9: var(--orange);

    /* Orange opaque scale */
    /* derive:source */
    --orange-opaque-1: color-mix(in oklab, var(--orange), var(--bg) 90%);
    --orange-opaque-2: color-mix(in oklab, var(--orange), var(--bg) 80%);
    --orange-opaque-3: color-mix(in oklab, var(--orange), var(--bg) 65%);
    --orange-opaque-4: color-mix(in oklab, var(--orange), var(--bg) 40%);
    --orange-opaque-5: var(--orange);
    --orange-opaque-6: color-mix(in oklab, var(--orange), var(--fg) 30%);
    --orange-opaque-7: color-mix(in oklab, var(--orange), var(--fg) 50%);
    --orange-opaque-8: color-mix(in oklab, var(--orange), var(--fg) 70%);
    --orange-opaque-9: color-mix(in oklab, var(--orange), var(--fg) 90%);
    /* /derive:source */

    /* Red scale */
    --red-1: oklch(from var(--red) l c h / 0.1);
    --red-2: oklch(from var(--red) l c h / 0.2);
    --red-3: oklch(from var(--red) l c h / 0.3);
    --red-4: oklch(from var(--red) l c h / 0.4);
    --red-5: oklch(from var(--red) l c h / 0.5);
    --red-6: oklch(from var(--red) l c h / 0.6);
    --red-7: oklch(from var(--red) l c h / 0.75);
    --red-8: oklch(from var(--red) l c h / 0.9);
    --red-9: var(--red);

    /* Red opaque scale */
    /* derive:source */
    --red-opaque-1: color-mix(in oklab, var(--red), var(--bg) 90%);
    --red-opaque-2: color-mix(in oklab, var(--red), var(--bg) 80%);
    --red-opaque-3: color-mix(in oklab, var(--red), var(--bg) 65%);
    --red-opaque-4: color-mix(in oklab, var(--red), var(--bg) 40%);
    --red-opaque-5: var(--red);
    --red-opaque-6: color-mix(in oklab, var(--red), var(--fg) 30%);
    --red-opaque-7: color-mix(in oklab, var(--red), var(--fg) 50%);
    --red-opaque-8: color-mix(in oklab, var(--red), var(--fg) 70%);
    --red-opaque-9: color-mix(in oklab, var(--red), var(--fg) 90%);
    /* /derive:source */

    /* Pink scale */
    --pink-1: oklch(from var(--pink) l c h / 0.1);
    --pink-2: oklch(from var(--pink) l c h / 0.2);
    --pink-3: oklch(from var(--pink) l c h / 0.3);
    --pink-4: oklch(from var(--pink) l c h / 0.4);
    --pink-5: oklch(from var(--pink) l c h / 0.5);
    --pink-6: oklch(from var(--pink) l c h / 0.6);
    --pink-7: oklch(from var(--pink) l c h / 0.75);
    --pink-8: oklch(from var(--pink) l c h / 0.9);
    --pink-9: var(--pink);

    /* Pink opaque scale */
    /* derive:source */
    --pink-opaque-1: color-mix(in oklab, var(--pink), var(--bg) 90%);
    --pink-opaque-2: color-mix(in oklab, var(--pink), var(--bg) 80%);
    --pink-opaque-3: color-mix(in oklab, var(--pink), var(--bg) 65%);
    --pink-opaque-4: color-mix(in oklab, var(--pink), var(--bg) 40%);
    --pink-opaque-5: var(--pink);
    --pink-opaque-6: color-mix(in oklab, var(--pink), var(--fg) 30%);
    --pink-opaque-7: color-mix(in oklab, var(--pink), var(--fg) 50%);
    --pink-opaque-8: color-mix(in oklab, var(--pink), var(--fg) 70%);
    --pink-opaque-9: color-mix(in oklab, var(--pink), var(--fg) 90%);
    /* /derive:source */

    /* Purple scale */
    --purple-1: oklch(from var(--purple) l c h / 0.1);
    --purple-2: oklch(from var(--purple) l c h / 0.2);
    --purple-3: oklch(from var(--purple) l c h / 0.3);
    --purple-4: oklch(from var(--purple) l c h / 0.4);
    --purple-5: oklch(from var(--purple) l c h / 0.5);
    --purple-6: oklch(from var(--purple) l c h / 0.6);
    --purple-7: oklch(from var(--purple) l c h / 0.75);
    --purple-8: oklch(from var(--purple) l c h / 0.9);
    --purple-9: var(--purple);

    /* Purple opaque scale */
    /* derive:source */
    --purple-opaque-1: color-mix(in oklab, var(--purple), var(--bg) 90%);
    --purple-opaque-2: color-mix(in oklab, var(--purple), var(--bg) 80%);
    --purple-opaque-3: color-mix(in oklab, var(--purple), var(--bg) 65%);
    --purple-opaque-4: color-mix(in oklab, var(--purple), var(--bg) 40%);
    --purple-opaque-5: var(--purple);
    --purple-opaque-6: color-mix(in oklab, var(--purple), var(--fg) 30%);
    --purple-opaque-7: color-mix(in oklab, var(--purple), var(--fg) 50%);
    --purple-opaque-8: color-mix(in oklab, var(--purple), var(--fg) 70%);
    --purple-opaque-9: color-mix(in oklab, var(--purple), var(--fg) 90%);
    /* /derive:source */

    /* Purple deep scale */
    --purple-deep: #1b1525;
    --purple-deep-1: oklch(from var(--purple-deep) l c h / 0.1);
    --purple-deep-2: oklch(from var(--purple-deep) l c h / 0.2);
    --purple-deep-3: oklch(from var(--purple-deep) l c h / 0.3);
    --purple-deep-4: oklch(from var(--purple-deep) l c h / 0.4);
    --purple-deep-5: oklch(from var(--purple-deep) l c h / 0.5);
    --purple-deep-6: oklch(from var(--purple-deep) l c h / 0.6);
    --purple-deep-7: oklch(from var(--purple-deep) l c h / 0.75);
    --purple-deep-8: oklch(from var(--purple-deep) l c h / 0.9);
    --purple-deep-9: var(--purple-deep);

    /* Purple Deep opaque scale */
    /* derive:source */
    --purple-deep-opaque-1: color-mix(
      in oklab,
      var(--purple-deep),
      var(--bg) 90%
    );
    --purple-deep-opaque-2: color-mix(
      in oklab,
      var(--purple-deep),
      var(--bg) 80%
    );
    --purple-deep-opaque-3: color-mix(
      in oklab,
      var(--purple-deep),
      var(--bg) 65%
    );
    --purple-deep-opaque-4: color-mix(
      in oklab,
      var(--purple-deep),
      var(--bg) 40%
    );
    --purple-deep-opaque-5: var(--purple-deep);
    --purple-deep-opaque-6: color-mix(
      in oklab,
      var(--purple-deep),
      var(--fg) 30%
    );
    --purple-deep-opaque-7: color-mix(
      in oklab,
      var(--purple-deep),
      var(--fg) 50%
    );
    --purple-deep-opaque-8: color-mix(
      in oklab,
      var(--purple-deep),
      var(--fg) 70%
    );
    --purple-deep-opaque-9: color-mix(
      in oklab,
      var(--purple-deep),
      var(--fg) 90%
    );
    /* /derive:source */

    /* Indigo scale */
    --indigo-1: oklch(from var(--indigo) l c h / 0.1);
    --indigo-2: oklch(from var(--indigo) l c h / 0.2);
    --indigo-3: oklch(from var(--indigo) l c h / 0.3);
    --indigo-4: oklch(from var(--indigo) l c h / 0.4);
    --indigo-5: oklch(from var(--indigo) l c h / 0.5);
    --indigo-6: oklch(from var(--indigo) l c h / 0.6);
    --indigo-7: oklch(from var(--indigo) l c h / 0.75);
    --indigo-8: oklch(from var(--indigo) l c h / 0.9);
    --indigo-9: var(--indigo);

    /* Indigo opaque scale */
    /* derive:source */
    --indigo-opaque-1: color-mix(in oklab, var(--indigo), var(--bg) 90%);
    --indigo-opaque-2: color-mix(in oklab, var(--indigo), var(--bg) 80%);
    --indigo-opaque-3: color-mix(in oklab, var(--indigo), var(--bg) 65%);
    --indigo-opaque-4: color-mix(in oklab, var(--indigo), var(--bg) 40%);
    --indigo-opaque-5: var(--indigo);
    --indigo-opaque-6: color-mix(in oklab, var(--indigo), var(--fg) 30%);
    --indigo-opaque-7: color-mix(in oklab, var(--indigo), var(--fg) 50%);
    --indigo-opaque-8: color-mix(in oklab, var(--indigo), var(--fg) 70%);
    --indigo-opaque-9: color-mix(in oklab, var(--indigo), var(--fg) 90%);
    /* /derive:source */

    /* Green scale */
    --green-1: oklch(from var(--green) l c h / 0.1);
    --green-2: oklch(from var(--green) l c h / 0.2);
    --green-3: oklch(from var(--green) l c h / 0.3);
    --green-4: oklch(from var(--green) l c h / 0.4);
    --green-5: oklch(from var(--green) l c h / 0.5);
    --green-6: oklch(from var(--green) l c h / 0.6);
    --green-7: oklch(from var(--green) l c h / 0.75);
    --green-8: oklch(from var(--green) l c h / 0.9);
    --green-9: var(--green);

    /* Green opaque scale */
    /* derive:source */
    --green-opaque-1: color-mix(in oklab, var(--green), var(--bg) 90%);
    --green-opaque-2: color-mix(in oklab, var(--green), var(--bg) 80%);
    --green-opaque-3: color-mix(in oklab, var(--green), var(--bg) 65%);
    --green-opaque-4: color-mix(in oklab, var(--green), var(--bg) 40%);
    --green-opaque-5: var(--green);
    --green-opaque-6: color-mix(in oklab, var(--green), var(--fg) 30%);
    --green-opaque-7: color-mix(in oklab, var(--green), var(--fg) 50%);
    --green-opaque-8: color-mix(in oklab, var(--green), var(--fg) 70%);
    --green-opaque-9: color-mix(in oklab, var(--green), var(--fg) 90%);
    /* /derive:source */

    /* Lime scale */
    --lime-1: oklch(from var(--lime) l c h / 0.1);
    --lime-2: oklch(from var(--lime) l c h / 0.2);
    --lime-3: oklch(from var(--lime) l c h / 0.3);
    --lime-4: oklch(from var(--lime) l c h / 0.4);
    --lime-5: oklch(from var(--lime) l c h / 0.5);
    --lime-6: oklch(from var(--lime) l c h / 0.6);
    --lime-7: oklch(from var(--lime) l c h / 0.75);
    --lime-8: oklch(from var(--lime) l c h / 0.9);
    --lime-9: var(--lime);

    /* Lime opaque scale */
    /* derive:source */
    --lime-opaque-1: color-mix(in oklab, var(--lime), var(--bg) 90%);
    --lime-opaque-2: color-mix(in oklab, var(--lime), var(--bg) 80%);
    --lime-opaque-3: color-mix(in oklab, var(--lime), var(--bg) 65%);
    --lime-opaque-4: color-mix(in oklab, var(--lime), var(--bg) 40%);
    --lime-opaque-5: var(--lime);
    --lime-opaque-6: color-mix(in oklab, var(--lime), var(--fg) 30%);
    --lime-opaque-7: color-mix(in oklab, var(--lime), var(--fg) 50%);
    --lime-opaque-8: color-mix(in oklab, var(--lime), var(--fg) 70%);
    --lime-opaque-9: color-mix(in oklab, var(--lime), var(--fg) 90%);
    /* /derive:source */

    /* Highlighter scale */
    --highlighter-1: oklch(from var(--highlighter) l c h / 0.1);
    --highlighter-2: oklch(from var(--highlighter) l c h / 0.2);
    --highlighter-3: oklch(from var(--highlighter) l c h / 0.3);
    --highlighter-4: oklch(from var(--highlighter) l c h / 0.4);
    --highlighter-5: oklch(from var(--highlighter) l c h / 0.5);
    --highlighter-6: oklch(from var(--highlighter) l c h / 0.6);
    --highlighter-7: oklch(from var(--highlighter) l c h / 0.75);
    --highlighter-8: oklch(from var(--highlighter) l c h / 0.9);
    --highlighter-9: var(--highlighter);

    /* Highlighter opaque scale */
    /* derive:source */
    --highlighter-opaque-1: color-mix(
      in oklab,
      var(--highlighter),
      var(--bg) 90%
    );
    --highlighter-opaque-2: color-mix(
      in oklab,
      var(--highlighter),
      var(--bg) 80%
    );
    --highlighter-opaque-3: color-mix(
      in oklab,
      var(--highlighter),
      var(--bg) 65%
    );
    --highlighter-opaque-4: color-mix(
      in oklab,
      var(--highlighter),
      var(--bg) 40%
    );
    --highlighter-opaque-5: var(--highlighter);
    --highlighter-opaque-6: color-mix(
      in oklab,
      var(--highlighter),
      var(--fg) 30%
    );
    --highlighter-opaque-7: color-mix(
      in oklab,
      var(--highlighter),
      var(--fg) 50%
    );
    --highlighter-opaque-8: color-mix(
      in oklab,
      var(--highlighter),
      var(--fg) 70%
    );
    --highlighter-opaque-9: color-mix(
      in oklab,
      var(--highlighter),
      var(--fg) 90%
    );
    /* /derive:source */

    /* Brown scale */
    --brown-1: oklch(from var(--brown) l c h / 0.1);
    --brown-2: oklch(from var(--brown) l c h / 0.2);
    --brown-3: oklch(from var(--brown) l c h / 0.3);
    --brown-4: oklch(from var(--brown) l c h / 0.4);
    --brown-5: oklch(from var(--brown) l c h / 0.5);
    --brown-6: oklch(from var(--brown) l c h / 0.6);
    --brown-7: oklch(from var(--brown) l c h / 0.75);
    --brown-8: oklch(from var(--brown) l c h / 0.9);
    --brown-9: var(--brown);

    /* Brown opaque scale */
    /* derive:source */
    --brown-opaque-1: color-mix(in oklab, var(--brown), var(--bg) 90%);
    --brown-opaque-2: color-mix(in oklab, var(--brown), var(--bg) 80%);
    --brown-opaque-3: color-mix(in oklab, var(--brown), var(--bg) 65%);
    --brown-opaque-4: color-mix(in oklab, var(--brown), var(--bg) 40%);
    --brown-opaque-5: var(--brown);
    --brown-opaque-6: color-mix(in oklab, var(--brown), var(--fg) 30%);
    --brown-opaque-7: color-mix(in oklab, var(--brown), var(--fg) 50%);
    --brown-opaque-8: color-mix(in oklab, var(--brown), var(--fg) 70%);
    --brown-opaque-9: color-mix(in oklab, var(--brown), var(--fg) 90%);
    /* /derive:source */

    /* Teal scale */
    --teal-1: oklch(from var(--teal) l c h / 0.1);
    --teal-2: oklch(from var(--teal) l c h / 0.2);
    --teal-3: oklch(from var(--teal) l c h / 0.3);
    --teal-4: oklch(from var(--teal) l c h / 0.4);
    --teal-5: oklch(from var(--teal) l c h / 0.5);
    --teal-6: oklch(from var(--teal) l c h / 0.6);
    --teal-7: oklch(from var(--teal) l c h / 0.75);
    --teal-8: oklch(from var(--teal) l c h / 0.9);
    --teal-9: var(--teal);

    /* Teal opaque scale */
    /* derive:source */
    --teal-opaque-1: color-mix(in oklab, var(--teal), var(--bg) 90%);
    --teal-opaque-2: color-mix(in oklab, var(--teal), var(--bg) 80%);
    --teal-opaque-3: color-mix(in oklab, var(--teal), var(--bg) 65%);
    --teal-opaque-4: color-mix(in oklab, var(--teal), var(--bg) 40%);
    --teal-opaque-5: var(--teal);
    --teal-opaque-6: color-mix(in oklab, var(--teal), var(--fg) 30%);
    --teal-opaque-7: color-mix(in oklab, var(--teal), var(--fg) 50%);
    --teal-opaque-8: color-mix(in oklab, var(--teal), var(--fg) 70%);
    --teal-opaque-9: color-mix(in oklab, var(--teal), var(--fg) 90%);
    /* /derive:source */

    /* Blue scale */
    --blue-1: oklch(from var(--blue) l c h / 0.1);
    --blue-2: oklch(from var(--blue) l c h / 0.2);
    --blue-3: oklch(from var(--blue) l c h / 0.3);
    --blue-4: oklch(from var(--blue) l c h / 0.4);
    --blue-5: oklch(from var(--blue) l c h / 0.5);
    --blue-6: oklch(from var(--blue) l c h / 0.6);
    --blue-7: oklch(from var(--blue) l c h / 0.75);
    --blue-8: oklch(from var(--blue) l c h / 0.9);
    --blue-9: var(--blue);

    /* Blue opaque scale */
    /* derive:source */
    --blue-opaque-1: color-mix(in oklab, var(--blue), var(--bg) 90%);
    --blue-opaque-2: color-mix(in oklab, var(--blue), var(--bg) 80%);
    --blue-opaque-3: color-mix(in oklab, var(--blue), var(--bg) 65%);
    --blue-opaque-4: color-mix(in oklab, var(--blue), var(--bg) 40%);
    --blue-opaque-5: var(--blue);
    --blue-opaque-6: color-mix(in oklab, var(--blue), var(--fg) 30%);
    --blue-opaque-7: color-mix(in oklab, var(--blue), var(--fg) 50%);
    --blue-opaque-8: color-mix(in oklab, var(--blue), var(--fg) 70%);
    --blue-opaque-9: color-mix(in oklab, var(--blue), var(--fg) 90%);
    /* /derive:source */

    /* Neutral gray scale */
    --gray: oklch(0.5 0.02 270);
    --slate: oklch(0.52 0.04 255);
    --gray-1: oklch(from var(--gray) l c h / 0.1);
    --gray-2: oklch(from var(--gray) l c h / 0.2);
    --gray-3: oklch(from var(--gray) l c h / 0.3);
    --gray-4: oklch(from var(--gray) l c h / 0.4);
    --gray-5: oklch(from var(--gray) l c h / 0.5);
    --gray-6: oklch(from var(--gray) l c h / 0.6);
    --gray-7: oklch(from var(--gray) l c h / 0.75);
    --gray-8: oklch(from var(--gray) l c h / 0.9);
    --gray-9: var(--gray);

    /* Gray opaque scale */
    /* derive:source */
    --gray-opaque-1: color-mix(in oklab, var(--gray), var(--bg) 90%);
    --gray-opaque-2: color-mix(in oklab, var(--gray), var(--bg) 80%);
    --gray-opaque-3: color-mix(in oklab, var(--gray), var(--bg) 65%);
    --gray-opaque-4: color-mix(in oklab, var(--gray), var(--bg) 40%);
    --gray-opaque-5: var(--gray);
    --gray-opaque-6: color-mix(in oklab, var(--gray), var(--fg) 30%);
    --gray-opaque-7: color-mix(in oklab, var(--gray), var(--fg) 50%);
    --gray-opaque-8: color-mix(in oklab, var(--gray), var(--fg) 70%);
    --gray-opaque-9: color-mix(in oklab, var(--gray), var(--fg) 90%);
    /* /derive:source */

    /* Slate scale */
    --slate-1: oklch(from var(--slate) l c h / 0.1);
    --slate-2: oklch(from var(--slate) l c h / 0.2);
    --slate-3: oklch(from var(--slate) l c h / 0.3);
    --slate-4: oklch(from var(--slate) l c h / 0.4);
    --slate-5: oklch(from var(--slate) l c h / 0.5);
    --slate-6: oklch(from var(--slate) l c h / 0.6);
    --slate-7: oklch(from var(--slate) l c h / 0.75);
    --slate-8: oklch(from var(--slate) l c h / 0.9);
    --slate-9: var(--slate);

    /* Slate opaque scale */
    /* derive:source */
    --slate-opaque-1: color-mix(in oklab, var(--slate), var(--bg) 90%);
    --slate-opaque-2: color-mix(in oklab, var(--slate), var(--bg) 80%);
    --slate-opaque-3: color-mix(in oklab, var(--slate), var(--bg) 65%);
    --slate-opaque-4: color-mix(in oklab, var(--slate), var(--bg) 40%);
    --slate-opaque-5: var(--slate);
    --slate-opaque-6: color-mix(in oklab, var(--slate), var(--fg) 30%);
    --slate-opaque-7: color-mix(in oklab, var(--slate), var(--fg) 50%);
    --slate-opaque-8: color-mix(in oklab, var(--slate), var(--fg) 70%);
    --slate-opaque-9: color-mix(in oklab, var(--slate), var(--fg) 90%);
    /* /derive:source */

    /* White - Static color (does not change with light/dark mode) */
    --white: oklch(1 0 0);
    --white-05: oklch(from var(--white) l c h / 0.05);
    --white-1: oklch(from var(--white) l c h / 0.1);
    --white-2: oklch(from var(--white) l c h / 0.2);
    --white-3: oklch(from var(--white) l c h / 0.3);
    --white-4: oklch(from var(--white) l c h / 0.4);
    --white-5: oklch(from var(--white) l c h / 0.5);
    --white-6: oklch(from var(--white) l c h / 0.6);
    --white-7: oklch(from var(--white) l c h / 0.75);
    --white-8: oklch(from var(--white) l c h / 0.9);
    --white-9: var(--white);

    /* White opaque scale */
    /* derive:source */
    --white-opaque-1: color-mix(in oklab, var(--white), var(--bg) 90%);
    --white-opaque-2: color-mix(in oklab, var(--white), var(--bg) 80%);
    --white-opaque-3: color-mix(in oklab, var(--white), var(--bg) 65%);
    --white-opaque-4: color-mix(in oklab, var(--white), var(--bg) 40%);
    --white-opaque-5: var(--white);
    --white-opaque-6: color-mix(in oklab, var(--white), var(--fg) 30%);
    --white-opaque-7: color-mix(in oklab, var(--white), var(--fg) 50%);
    --white-opaque-8: color-mix(in oklab, var(--white), var(--fg) 70%);
    --white-opaque-9: color-mix(in oklab, var(--white), var(--fg) 90%);
    /* /derive:source */

    /* Black - Static color (does not change with light/dark mode) */
    --black: oklch(0 0 0);
    --black-05: oklch(from var(--black) l c h / 0.05);
    --black-1: oklch(from var(--black) l c h / 0.1);
    --black-2: oklch(from var(--black) l c h / 0.2);
    --black-3: oklch(from var(--black) l c h / 0.3);
    --black-4: oklch(from var(--black) l c h / 0.4);
    --black-5: oklch(from var(--black) l c h / 0.5);
    --black-6: oklch(from var(--black) l c h / 0.6);
    --black-7: oklch(from var(--black) l c h / 0.75);
    --black-8: oklch(from var(--black) l c h / 0.9);
    --black-9: var(--black);

    /* Black opaque scale */
    /* derive:source */
    --black-opaque-1: color-mix(in oklab, var(--black), var(--bg) 90%);
    --black-opaque-2: color-mix(in oklab, var(--black), var(--bg) 80%);
    --black-opaque-3: color-mix(in oklab, var(--black), var(--bg) 65%);
    --black-opaque-4: color-mix(in oklab, var(--black), var(--bg) 40%);
    --black-opaque-5: var(--black);
    --black-opaque-6: color-mix(in oklab, var(--black), var(--fg) 30%);
    --black-opaque-7: color-mix(in oklab, var(--black), var(--fg) 50%);
    --black-opaque-8: color-mix(in oklab, var(--black), var(--fg) 70%);
    --black-opaque-9: color-mix(in oklab, var(--black), var(--fg) 90%);
    /* /derive:source */

    /* Foreground / background literals */
    --fg-light: #050505;
    --fg-dark: #fff;
    --bg-light: #fff;
    --bg-dark: #050505;

    /* Easing Tokens - Using linear() for modern, natural motion */
    --ease-smooth: linear(
      0,
      0.0039,
      0.0157,
      0.0352,
      0.0625 9.09%,
      0.1407,
      0.25,
      0.3908,
      0.5625,
      0.7654,
      1
    );
    --ease-bounce: linear(
      0,
      0.004,
      0.016,
      0.035,
      0.063,
      0.098,
      0.141,
      0.191,
      0.25,
      0.316,
      0.391 36.36%,
      0.563,
      0.766,
      1 54.55%,
      0.946,
      0.908 72.73%,
      0.953,
      1,
      0.994,
      0.998,
      1
    );
    --ease-emphasized: linear(
      0,
      0.0038,
      0.0155,
      0.0352,
      0.0625 9%,
      0.1407,
      0.25 18%,
      0.5625 36%,
      0.7655 45%,
      1
    );

    /* Duration Tokens - Semantic motion scale, see docs/adr/0008 */
    --d-instant: 0.1s;
    --d-fast: 0.15s;
    --d-base: 0.2s;
    --d-slow: 0.3s;
    --d-emphatic: 0.4s;

    /* Z-Index Tokens - Stacking tier vocabulary, see docs/adr/0008 */
    --z-base: 0;
    --z-raised: 1;
    --z-overlay: 10;
    --z-sticky: 100;
    --z-modal: 200;
    --z-toast: 300;

    /* =====================================================================
     * Tier 2: Semantic tokens — purpose-bound, consume tier 1
     * What components should reference. Override these to change UI semantics
     * without touching color literals.
     * ===================================================================== */

    /* Theme-resolved fg/bg */
    --fg: light-dark(var(--fg-light), var(--fg-dark));
    /* derive:source */
    --fg-05: oklch(from var(--fg) l c h / 0.05);
    --fg-1: oklch(from var(--fg) l c h / 0.1);
    --fg-2: oklch(from var(--fg) l c h / 0.2);
    --fg-3: oklch(from var(--fg) l c h / 0.3);
    --fg-4: oklch(from var(--fg) l c h / 0.4);
    --fg-5: oklch(from var(--fg) l c h / 0.5);
    --fg-6: oklch(from var(--fg) l c h / 0.6);
    --fg-7: oklch(from var(--fg) l c h / 0.75);
    --fg-8: oklch(from var(--fg) l c h / 0.9);
    --fg-9: var(--fg);
    /* /derive:source */

    /* Fg opaque scale */
    /* derive:source */
    --fg-opaque-1: color-mix(in oklab, var(--fg), var(--bg) 90%);
    --fg-opaque-2: color-mix(in oklab, var(--fg), var(--bg) 80%);
    --fg-opaque-3: color-mix(in oklab, var(--fg), var(--bg) 65%);
    --fg-opaque-4: color-mix(in oklab, var(--fg), var(--bg) 40%);
    --fg-opaque-5: var(--fg);
    --fg-opaque-6: color-mix(in oklab, var(--fg), var(--fg) 30%);
    --fg-opaque-7: color-mix(in oklab, var(--fg), var(--fg) 50%);
    --fg-opaque-8: color-mix(in oklab, var(--fg), var(--fg) 70%);
    --fg-opaque-9: color-mix(in oklab, var(--fg), var(--fg) 90%);
    /* /derive:source */

    --bg: light-dark(var(--bg-light), var(--bg-dark));
    /* derive:source */
    --bg-05: oklch(from var(--bg) l c h / 0.05);
    --bg-1: oklch(from var(--bg) l c h / 0.1);
    --bg-2: oklch(from var(--bg) l c h / 0.2);
    --bg-3: oklch(from var(--bg) l c h / 0.3);
    --bg-4: oklch(from var(--bg) l c h / 0.4);
    --bg-5: oklch(from var(--bg) l c h / 0.5);
    --bg-6: oklch(from var(--bg) l c h / 0.6);
    --bg-7: oklch(from var(--bg) l c h / 0.75);
    --bg-8: oklch(from var(--bg) l c h / 0.9);
    --bg-9: var(--bg);
    /* /derive:source */

    /* Bg opaque scale */
    /* derive:source */
    --bg-opaque-1: color-mix(in oklab, var(--bg), var(--bg) 90%);
    --bg-opaque-2: color-mix(in oklab, var(--bg), var(--bg) 80%);
    --bg-opaque-3: color-mix(in oklab, var(--bg), var(--bg) 65%);
    --bg-opaque-4: color-mix(in oklab, var(--bg), var(--bg) 40%);
    --bg-opaque-5: var(--bg);
    --bg-opaque-6: color-mix(in oklab, var(--bg), var(--fg) 30%);
    --bg-opaque-7: color-mix(in oklab, var(--bg), var(--fg) 50%);
    --bg-opaque-8: color-mix(in oklab, var(--bg), var(--fg) 70%);
    --bg-opaque-9: color-mix(in oklab, var(--bg), var(--fg) 90%);
    /* /derive:source */

    /* Status colors */
    --primary: var(--blue);
    --accent: var(--primary);
    --error: var(--red);
    --warning: var(--yellow);
    --success: var(--green);

    /* Primary scale */
    /* derive:source */
    --primary-1: oklch(from var(--primary) l c h / 0.1);
    --primary-2: oklch(from var(--primary) l c h / 0.2);
    --primary-3: oklch(from var(--primary) l c h / 0.3);
    --primary-4: oklch(from var(--primary) l c h / 0.4);
    --primary-5: oklch(from var(--primary) l c h / 0.5);
    --primary-6: oklch(from var(--primary) l c h / 0.6);
    --primary-7: oklch(from var(--primary) l c h / 0.75);
    --primary-8: oklch(from var(--primary) l c h / 0.9);
    --primary-9: var(--primary);
    /* /derive:source */

    /* Primary opaque scale */
    /* derive:source */
    --primary-opaque-1: color-mix(in oklab, var(--primary), var(--bg) 90%);
    --primary-opaque-2: color-mix(in oklab, var(--primary), var(--bg) 80%);
    --primary-opaque-3: color-mix(in oklab, var(--primary), var(--bg) 65%);
    --primary-opaque-4: color-mix(in oklab, var(--primary), var(--bg) 40%);
    --primary-opaque-5: var(--primary);
    --primary-opaque-6: color-mix(in oklab, var(--primary), var(--fg) 30%);
    --primary-opaque-7: color-mix(in oklab, var(--primary), var(--fg) 50%);
    --primary-opaque-8: color-mix(in oklab, var(--primary), var(--fg) 70%);
    --primary-opaque-9: color-mix(in oklab, var(--primary), var(--fg) 90%);
    /* /derive:source */

    /* Error scale */
    /* derive:source */
    --error-1: oklch(from var(--error) l c h / 0.1);
    --error-2: oklch(from var(--error) l c h / 0.2);
    --error-3: oklch(from var(--error) l c h / 0.3);
    --error-4: oklch(from var(--error) l c h / 0.4);
    --error-5: oklch(from var(--error) l c h / 0.5);
    --error-6: oklch(from var(--error) l c h / 0.6);
    --error-7: oklch(from var(--error) l c h / 0.75);
    --error-8: oklch(from var(--error) l c h / 0.9);
    --error-9: var(--error);
    /* /derive:source */

    /* Error opaque scale */
    /* derive:source */
    --error-opaque-1: color-mix(in oklab, var(--error), var(--bg) 90%);
    --error-opaque-2: color-mix(in oklab, var(--error), var(--bg) 80%);
    --error-opaque-3: color-mix(in oklab, var(--error), var(--bg) 65%);
    --error-opaque-4: color-mix(in oklab, var(--error), var(--bg) 40%);
    --error-opaque-5: var(--error);
    --error-opaque-6: color-mix(in oklab, var(--error), var(--fg) 30%);
    --error-opaque-7: color-mix(in oklab, var(--error), var(--fg) 50%);
    --error-opaque-8: color-mix(in oklab, var(--error), var(--fg) 70%);
    --error-opaque-9: color-mix(in oklab, var(--error), var(--fg) 90%);
    /* /derive:source */

    /* Warning scale */
    /* derive:source */
    --warning-1: oklch(from var(--warning) l c h / 0.1);
    --warning-2: oklch(from var(--warning) l c h / 0.2);
    --warning-3: oklch(from var(--warning) l c h / 0.3);
    --warning-4: oklch(from var(--warning) l c h / 0.4);
    --warning-5: oklch(from var(--warning) l c h / 0.5);
    --warning-6: oklch(from var(--warning) l c h / 0.6);
    --warning-7: oklch(from var(--warning) l c h / 0.75);
    --warning-8: oklch(from var(--warning) l c h / 0.9);
    --warning-9: var(--warning);
    /* /derive:source */

    /* Warning opaque scale */
    /* derive:source */
    --warning-opaque-1: color-mix(in oklab, var(--warning), var(--bg) 90%);
    --warning-opaque-2: color-mix(in oklab, var(--warning), var(--bg) 80%);
    --warning-opaque-3: color-mix(in oklab, var(--warning), var(--bg) 65%);
    --warning-opaque-4: color-mix(in oklab, var(--warning), var(--bg) 40%);
    --warning-opaque-5: var(--warning);
    --warning-opaque-6: color-mix(in oklab, var(--warning), var(--fg) 30%);
    --warning-opaque-7: color-mix(in oklab, var(--warning), var(--fg) 50%);
    --warning-opaque-8: color-mix(in oklab, var(--warning), var(--fg) 70%);
    --warning-opaque-9: color-mix(in oklab, var(--warning), var(--fg) 90%);
    /* /derive:source */

    /* Success scale */
    /* derive:source */
    --success-1: oklch(from var(--success) l c h / 0.1);
    --success-2: oklch(from var(--success) l c h / 0.2);
    --success-3: oklch(from var(--success) l c h / 0.3);
    --success-4: oklch(from var(--success) l c h / 0.4);
    --success-5: oklch(from var(--success) l c h / 0.5);
    --success-6: oklch(from var(--success) l c h / 0.6);
    --success-7: oklch(from var(--success) l c h / 0.75);
    --success-8: oklch(from var(--success) l c h / 0.9);
    --success-9: var(--success);
    /* /derive:source */

    /* Success opaque scale */
    /* derive:source */
    --success-opaque-1: color-mix(in oklab, var(--success), var(--bg) 90%);
    --success-opaque-2: color-mix(in oklab, var(--success), var(--bg) 80%);
    --success-opaque-3: color-mix(in oklab, var(--success), var(--bg) 65%);
    --success-opaque-4: color-mix(in oklab, var(--success), var(--bg) 40%);
    --success-opaque-5: var(--success);
    --success-opaque-6: color-mix(in oklab, var(--success), var(--fg) 30%);
    --success-opaque-7: color-mix(in oklab, var(--success), var(--fg) 50%);
    --success-opaque-8: color-mix(in oklab, var(--success), var(--fg) 70%);
    --success-opaque-9: color-mix(in oklab, var(--success), var(--fg) 90%);
    /* /derive:source */

    /* UI primitives */
    /* Shadows */
    --shadow-1:
      0 0 1px 0.5px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.5)),
      0 2px 2px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.3));
    --shadow-2:
      0 1px 1px 2px light-dark(rgb(0 0 0 / 0.03), rgb(0 0 0 / 0.6)),
      0 4px 4px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
    --shadow-3:
      0 2px 4px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.65)),
      0 4px 8px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.45));
    --shadow-4:
      0 4px 8px light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.7)),
      0 8px 16px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5));
    --shadow-5:
      0 8px 16px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.75)),
      0 12px 24px light-dark(rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.55));
    --shadow-6:
      0 12px 24px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.8)),
      0 16px 32px light-dark(rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.6)),
      0 24px 48px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.5));

    --box:
      0 1px 2px rgb(0 0 0 / 0.04), inset -1px 1px 2px rgb(255 255 255 / 0.1),
      inset 1px 1px 2px rgb(255 255 255 / 0.1);

    /* Border Tokens */
    --border-05: solid 1px var(--fg-05);
    --border-1: solid 1px var(--fg-2);
    --border-2: solid 2px var(--fg-2);
    --border-3: solid 3px var(--fg-2);
    --border-4: solid 4px var(--fg-2);
    --border-5: solid 5px var(--fg-2);

    /* Focus ring tokens — consumed by base, components, and utilities */
    --focus-ring: 2px solid var(--fg);
    --focus-ring-offset: 2px;
    --focus-ring-offset-inset: -2px;

    /* Automatic contrast helper */
    --l: clamp(0, (l / var(--l-threshold, 0.623) - 1) * -infinity, 1);

    color-scheme: light dark;

    @media (forced-colors: active) {
      --fg: CanvasText;
      --bg: Canvas;
      --primary: LinkText;
      --accent: LinkText;
      --error: Mark;
      --warning: Mark;
      --success: LinkText;
      --focus-ring: 2px solid CanvasText;
      --border-1: solid 1px CanvasText;
      --border-2: solid 2px CanvasText;
      --border-3: solid 3px CanvasText;
      --border-4: solid 4px CanvasText;
      --border-5: solid 5px CanvasText;
      --border-05: solid 1px GrayText;
      /* Shadows can't survive forced-colors anyway (background-image stripped),
         so override to none so components don't rely on them */
      --shadow-1: none;
      --shadow-2: none;
      --shadow-3: none;
      --shadow-4: none;
      --shadow-5: none;
      --shadow-6: none;
      --box: none;
    }
  }

  /* Re-derive alpha scales for theme-scoped containers (ADR-0006).
     `oklch(from var(--X) ...)` resolves where it is declared; without
     restating the derivations here, overriding `--primary` (etc.) on a
     descendant would inherit the stale `:root` scale. Matching `theme-*` as
     a class fragment makes every preset (current or future) implicitly a
     theme scope without an allowlist to keep in sync.
     `:where()` keeps specificity at 0 so consumer overrides still win. */
  :where([class*="theme-"]) {
    --fg: light-dark(var(--fg-light), var(--fg-dark));
    --bg: light-dark(var(--bg-light), var(--bg-dark));
    /* derive:mirror */
    --yellow-opaque-1: color-mix(in oklab, var(--yellow), var(--bg) 90%);
    --yellow-opaque-2: color-mix(in oklab, var(--yellow), var(--bg) 80%);
    --yellow-opaque-3: color-mix(in oklab, var(--yellow), var(--bg) 65%);
    --yellow-opaque-4: color-mix(in oklab, var(--yellow), var(--bg) 40%);
    --yellow-opaque-5: var(--yellow);
    --yellow-opaque-6: color-mix(in oklab, var(--yellow), var(--fg) 30%);
    --yellow-opaque-7: color-mix(in oklab, var(--yellow), var(--fg) 50%);
    --yellow-opaque-8: color-mix(in oklab, var(--yellow), var(--fg) 70%);
    --yellow-opaque-9: color-mix(in oklab, var(--yellow), var(--fg) 90%);

    --amber-opaque-1: color-mix(in oklab, var(--amber), var(--bg) 90%);
    --amber-opaque-2: color-mix(in oklab, var(--amber), var(--bg) 80%);
    --amber-opaque-3: color-mix(in oklab, var(--amber), var(--bg) 65%);
    --amber-opaque-4: color-mix(in oklab, var(--amber), var(--bg) 40%);
    --amber-opaque-5: var(--amber);
    --amber-opaque-6: color-mix(in oklab, var(--amber), var(--fg) 30%);
    --amber-opaque-7: color-mix(in oklab, var(--amber), var(--fg) 50%);
    --amber-opaque-8: color-mix(in oklab, var(--amber), var(--fg) 70%);
    --amber-opaque-9: color-mix(in oklab, var(--amber), var(--fg) 90%);

    --orange-opaque-1: color-mix(in oklab, var(--orange), var(--bg) 90%);
    --orange-opaque-2: color-mix(in oklab, var(--orange), var(--bg) 80%);
    --orange-opaque-3: color-mix(in oklab, var(--orange), var(--bg) 65%);
    --orange-opaque-4: color-mix(in oklab, var(--orange), var(--bg) 40%);
    --orange-opaque-5: var(--orange);
    --orange-opaque-6: color-mix(in oklab, var(--orange), var(--fg) 30%);
    --orange-opaque-7: color-mix(in oklab, var(--orange), var(--fg) 50%);
    --orange-opaque-8: color-mix(in oklab, var(--orange), var(--fg) 70%);
    --orange-opaque-9: color-mix(in oklab, var(--orange), var(--fg) 90%);

    --red-opaque-1: color-mix(in oklab, var(--red), var(--bg) 90%);
    --red-opaque-2: color-mix(in oklab, var(--red), var(--bg) 80%);
    --red-opaque-3: color-mix(in oklab, var(--red), var(--bg) 65%);
    --red-opaque-4: color-mix(in oklab, var(--red), var(--bg) 40%);
    --red-opaque-5: var(--red);
    --red-opaque-6: color-mix(in oklab, var(--red), var(--fg) 30%);
    --red-opaque-7: color-mix(in oklab, var(--red), var(--fg) 50%);
    --red-opaque-8: color-mix(in oklab, var(--red), var(--fg) 70%);
    --red-opaque-9: color-mix(in oklab, var(--red), var(--fg) 90%);

    --pink-opaque-1: color-mix(in oklab, var(--pink), var(--bg) 90%);
    --pink-opaque-2: color-mix(in oklab, var(--pink), var(--bg) 80%);
    --pink-opaque-3: color-mix(in oklab, var(--pink), var(--bg) 65%);
    --pink-opaque-4: color-mix(in oklab, var(--pink), var(--bg) 40%);
    --pink-opaque-5: var(--pink);
    --pink-opaque-6: color-mix(in oklab, var(--pink), var(--fg) 30%);
    --pink-opaque-7: color-mix(in oklab, var(--pink), var(--fg) 50%);
    --pink-opaque-8: color-mix(in oklab, var(--pink), var(--fg) 70%);
    --pink-opaque-9: color-mix(in oklab, var(--pink), var(--fg) 90%);

    --purple-opaque-1: color-mix(in oklab, var(--purple), var(--bg) 90%);
    --purple-opaque-2: color-mix(in oklab, var(--purple), var(--bg) 80%);
    --purple-opaque-3: color-mix(in oklab, var(--purple), var(--bg) 65%);
    --purple-opaque-4: color-mix(in oklab, var(--purple), var(--bg) 40%);
    --purple-opaque-5: var(--purple);
    --purple-opaque-6: color-mix(in oklab, var(--purple), var(--fg) 30%);
    --purple-opaque-7: color-mix(in oklab, var(--purple), var(--fg) 50%);
    --purple-opaque-8: color-mix(in oklab, var(--purple), var(--fg) 70%);
    --purple-opaque-9: color-mix(in oklab, var(--purple), var(--fg) 90%);

    --purple-deep-opaque-1: color-mix(
      in oklab,
      var(--purple-deep),
      var(--bg) 90%
    );
    --purple-deep-opaque-2: color-mix(
      in oklab,
      var(--purple-deep),
      var(--bg) 80%
    );
    --purple-deep-opaque-3: color-mix(
      in oklab,
      var(--purple-deep),
      var(--bg) 65%
    );
    --purple-deep-opaque-4: color-mix(
      in oklab,
      var(--purple-deep),
      var(--bg) 40%
    );
    --purple-deep-opaque-5: var(--purple-deep);
    --purple-deep-opaque-6: color-mix(
      in oklab,
      var(--purple-deep),
      var(--fg) 30%
    );
    --purple-deep-opaque-7: color-mix(
      in oklab,
      var(--purple-deep),
      var(--fg) 50%
    );
    --purple-deep-opaque-8: color-mix(
      in oklab,
      var(--purple-deep),
      var(--fg) 70%
    );
    --purple-deep-opaque-9: color-mix(
      in oklab,
      var(--purple-deep),
      var(--fg) 90%
    );

    --indigo-opaque-1: color-mix(in oklab, var(--indigo), var(--bg) 90%);
    --indigo-opaque-2: color-mix(in oklab, var(--indigo), var(--bg) 80%);
    --indigo-opaque-3: color-mix(in oklab, var(--indigo), var(--bg) 65%);
    --indigo-opaque-4: color-mix(in oklab, var(--indigo), var(--bg) 40%);
    --indigo-opaque-5: var(--indigo);
    --indigo-opaque-6: color-mix(in oklab, var(--indigo), var(--fg) 30%);
    --indigo-opaque-7: color-mix(in oklab, var(--indigo), var(--fg) 50%);
    --indigo-opaque-8: color-mix(in oklab, var(--indigo), var(--fg) 70%);
    --indigo-opaque-9: color-mix(in oklab, var(--indigo), var(--fg) 90%);

    --green-opaque-1: color-mix(in oklab, var(--green), var(--bg) 90%);
    --green-opaque-2: color-mix(in oklab, var(--green), var(--bg) 80%);
    --green-opaque-3: color-mix(in oklab, var(--green), var(--bg) 65%);
    --green-opaque-4: color-mix(in oklab, var(--green), var(--bg) 40%);
    --green-opaque-5: var(--green);
    --green-opaque-6: color-mix(in oklab, var(--green), var(--fg) 30%);
    --green-opaque-7: color-mix(in oklab, var(--green), var(--fg) 50%);
    --green-opaque-8: color-mix(in oklab, var(--green), var(--fg) 70%);
    --green-opaque-9: color-mix(in oklab, var(--green), var(--fg) 90%);

    --lime-opaque-1: color-mix(in oklab, var(--lime), var(--bg) 90%);
    --lime-opaque-2: color-mix(in oklab, var(--lime), var(--bg) 80%);
    --lime-opaque-3: color-mix(in oklab, var(--lime), var(--bg) 65%);
    --lime-opaque-4: color-mix(in oklab, var(--lime), var(--bg) 40%);
    --lime-opaque-5: var(--lime);
    --lime-opaque-6: color-mix(in oklab, var(--lime), var(--fg) 30%);
    --lime-opaque-7: color-mix(in oklab, var(--lime), var(--fg) 50%);
    --lime-opaque-8: color-mix(in oklab, var(--lime), var(--fg) 70%);
    --lime-opaque-9: color-mix(in oklab, var(--lime), var(--fg) 90%);

    --highlighter-opaque-1: color-mix(
      in oklab,
      var(--highlighter),
      var(--bg) 90%
    );
    --highlighter-opaque-2: color-mix(
      in oklab,
      var(--highlighter),
      var(--bg) 80%
    );
    --highlighter-opaque-3: color-mix(
      in oklab,
      var(--highlighter),
      var(--bg) 65%
    );
    --highlighter-opaque-4: color-mix(
      in oklab,
      var(--highlighter),
      var(--bg) 40%
    );
    --highlighter-opaque-5: var(--highlighter);
    --highlighter-opaque-6: color-mix(
      in oklab,
      var(--highlighter),
      var(--fg) 30%
    );
    --highlighter-opaque-7: color-mix(
      in oklab,
      var(--highlighter),
      var(--fg) 50%
    );
    --highlighter-opaque-8: color-mix(
      in oklab,
      var(--highlighter),
      var(--fg) 70%
    );
    --highlighter-opaque-9: color-mix(
      in oklab,
      var(--highlighter),
      var(--fg) 90%
    );

    --brown-opaque-1: color-mix(in oklab, var(--brown), var(--bg) 90%);
    --brown-opaque-2: color-mix(in oklab, var(--brown), var(--bg) 80%);
    --brown-opaque-3: color-mix(in oklab, var(--brown), var(--bg) 65%);
    --brown-opaque-4: color-mix(in oklab, var(--brown), var(--bg) 40%);
    --brown-opaque-5: var(--brown);
    --brown-opaque-6: color-mix(in oklab, var(--brown), var(--fg) 30%);
    --brown-opaque-7: color-mix(in oklab, var(--brown), var(--fg) 50%);
    --brown-opaque-8: color-mix(in oklab, var(--brown), var(--fg) 70%);
    --brown-opaque-9: color-mix(in oklab, var(--brown), var(--fg) 90%);

    --teal-opaque-1: color-mix(in oklab, var(--teal), var(--bg) 90%);
    --teal-opaque-2: color-mix(in oklab, var(--teal), var(--bg) 80%);
    --teal-opaque-3: color-mix(in oklab, var(--teal), var(--bg) 65%);
    --teal-opaque-4: color-mix(in oklab, var(--teal), var(--bg) 40%);
    --teal-opaque-5: var(--teal);
    --teal-opaque-6: color-mix(in oklab, var(--teal), var(--fg) 30%);
    --teal-opaque-7: color-mix(in oklab, var(--teal), var(--fg) 50%);
    --teal-opaque-8: color-mix(in oklab, var(--teal), var(--fg) 70%);
    --teal-opaque-9: color-mix(in oklab, var(--teal), var(--fg) 90%);

    --blue-opaque-1: color-mix(in oklab, var(--blue), var(--bg) 90%);
    --blue-opaque-2: color-mix(in oklab, var(--blue), var(--bg) 80%);
    --blue-opaque-3: color-mix(in oklab, var(--blue), var(--bg) 65%);
    --blue-opaque-4: color-mix(in oklab, var(--blue), var(--bg) 40%);
    --blue-opaque-5: var(--blue);
    --blue-opaque-6: color-mix(in oklab, var(--blue), var(--fg) 30%);
    --blue-opaque-7: color-mix(in oklab, var(--blue), var(--fg) 50%);
    --blue-opaque-8: color-mix(in oklab, var(--blue), var(--fg) 70%);
    --blue-opaque-9: color-mix(in oklab, var(--blue), var(--fg) 90%);

    --gray-opaque-1: color-mix(in oklab, var(--gray), var(--bg) 90%);
    --gray-opaque-2: color-mix(in oklab, var(--gray), var(--bg) 80%);
    --gray-opaque-3: color-mix(in oklab, var(--gray), var(--bg) 65%);
    --gray-opaque-4: color-mix(in oklab, var(--gray), var(--bg) 40%);
    --gray-opaque-5: var(--gray);
    --gray-opaque-6: color-mix(in oklab, var(--gray), var(--fg) 30%);
    --gray-opaque-7: color-mix(in oklab, var(--gray), var(--fg) 50%);
    --gray-opaque-8: color-mix(in oklab, var(--gray), var(--fg) 70%);
    --gray-opaque-9: color-mix(in oklab, var(--gray), var(--fg) 90%);

    --slate-opaque-1: color-mix(in oklab, var(--slate), var(--bg) 90%);
    --slate-opaque-2: color-mix(in oklab, var(--slate), var(--bg) 80%);
    --slate-opaque-3: color-mix(in oklab, var(--slate), var(--bg) 65%);
    --slate-opaque-4: color-mix(in oklab, var(--slate), var(--bg) 40%);
    --slate-opaque-5: var(--slate);
    --slate-opaque-6: color-mix(in oklab, var(--slate), var(--fg) 30%);
    --slate-opaque-7: color-mix(in oklab, var(--slate), var(--fg) 50%);
    --slate-opaque-8: color-mix(in oklab, var(--slate), var(--fg) 70%);
    --slate-opaque-9: color-mix(in oklab, var(--slate), var(--fg) 90%);

    --white-opaque-1: color-mix(in oklab, var(--white), var(--bg) 90%);
    --white-opaque-2: color-mix(in oklab, var(--white), var(--bg) 80%);
    --white-opaque-3: color-mix(in oklab, var(--white), var(--bg) 65%);
    --white-opaque-4: color-mix(in oklab, var(--white), var(--bg) 40%);
    --white-opaque-5: var(--white);
    --white-opaque-6: color-mix(in oklab, var(--white), var(--fg) 30%);
    --white-opaque-7: color-mix(in oklab, var(--white), var(--fg) 50%);
    --white-opaque-8: color-mix(in oklab, var(--white), var(--fg) 70%);
    --white-opaque-9: color-mix(in oklab, var(--white), var(--fg) 90%);

    --black-opaque-1: color-mix(in oklab, var(--black), var(--bg) 90%);
    --black-opaque-2: color-mix(in oklab, var(--black), var(--bg) 80%);
    --black-opaque-3: color-mix(in oklab, var(--black), var(--bg) 65%);
    --black-opaque-4: color-mix(in oklab, var(--black), var(--bg) 40%);
    --black-opaque-5: var(--black);
    --black-opaque-6: color-mix(in oklab, var(--black), var(--fg) 30%);
    --black-opaque-7: color-mix(in oklab, var(--black), var(--fg) 50%);
    --black-opaque-8: color-mix(in oklab, var(--black), var(--fg) 70%);
    --black-opaque-9: color-mix(in oklab, var(--black), var(--fg) 90%);

    --fg-05: oklch(from var(--fg) l c h / 0.05);
    --fg-1: oklch(from var(--fg) l c h / 0.1);
    --fg-2: oklch(from var(--fg) l c h / 0.2);
    --fg-3: oklch(from var(--fg) l c h / 0.3);
    --fg-4: oklch(from var(--fg) l c h / 0.4);
    --fg-5: oklch(from var(--fg) l c h / 0.5);
    --fg-6: oklch(from var(--fg) l c h / 0.6);
    --fg-7: oklch(from var(--fg) l c h / 0.75);
    --fg-8: oklch(from var(--fg) l c h / 0.9);
    --fg-9: var(--fg);

    --fg-opaque-1: color-mix(in oklab, var(--fg), var(--bg) 90%);
    --fg-opaque-2: color-mix(in oklab, var(--fg), var(--bg) 80%);
    --fg-opaque-3: color-mix(in oklab, var(--fg), var(--bg) 65%);
    --fg-opaque-4: color-mix(in oklab, var(--fg), var(--bg) 40%);
    --fg-opaque-5: var(--fg);
    --fg-opaque-6: color-mix(in oklab, var(--fg), var(--fg) 30%);
    --fg-opaque-7: color-mix(in oklab, var(--fg), var(--fg) 50%);
    --fg-opaque-8: color-mix(in oklab, var(--fg), var(--fg) 70%);
    --fg-opaque-9: color-mix(in oklab, var(--fg), var(--fg) 90%);

    --bg-05: oklch(from var(--bg) l c h / 0.05);
    --bg-1: oklch(from var(--bg) l c h / 0.1);
    --bg-2: oklch(from var(--bg) l c h / 0.2);
    --bg-3: oklch(from var(--bg) l c h / 0.3);
    --bg-4: oklch(from var(--bg) l c h / 0.4);
    --bg-5: oklch(from var(--bg) l c h / 0.5);
    --bg-6: oklch(from var(--bg) l c h / 0.6);
    --bg-7: oklch(from var(--bg) l c h / 0.75);
    --bg-8: oklch(from var(--bg) l c h / 0.9);
    --bg-9: var(--bg);

    --bg-opaque-1: color-mix(in oklab, var(--bg), var(--bg) 90%);
    --bg-opaque-2: color-mix(in oklab, var(--bg), var(--bg) 80%);
    --bg-opaque-3: color-mix(in oklab, var(--bg), var(--bg) 65%);
    --bg-opaque-4: color-mix(in oklab, var(--bg), var(--bg) 40%);
    --bg-opaque-5: var(--bg);
    --bg-opaque-6: color-mix(in oklab, var(--bg), var(--fg) 30%);
    --bg-opaque-7: color-mix(in oklab, var(--bg), var(--fg) 50%);
    --bg-opaque-8: color-mix(in oklab, var(--bg), var(--fg) 70%);
    --bg-opaque-9: color-mix(in oklab, var(--bg), var(--fg) 90%);

    --primary-1: oklch(from var(--primary) l c h / 0.1);
    --primary-2: oklch(from var(--primary) l c h / 0.2);
    --primary-3: oklch(from var(--primary) l c h / 0.3);
    --primary-4: oklch(from var(--primary) l c h / 0.4);
    --primary-5: oklch(from var(--primary) l c h / 0.5);
    --primary-6: oklch(from var(--primary) l c h / 0.6);
    --primary-7: oklch(from var(--primary) l c h / 0.75);
    --primary-8: oklch(from var(--primary) l c h / 0.9);
    --primary-9: var(--primary);

    --primary-opaque-1: color-mix(in oklab, var(--primary), var(--bg) 90%);
    --primary-opaque-2: color-mix(in oklab, var(--primary), var(--bg) 80%);
    --primary-opaque-3: color-mix(in oklab, var(--primary), var(--bg) 65%);
    --primary-opaque-4: color-mix(in oklab, var(--primary), var(--bg) 40%);
    --primary-opaque-5: var(--primary);
    --primary-opaque-6: color-mix(in oklab, var(--primary), var(--fg) 30%);
    --primary-opaque-7: color-mix(in oklab, var(--primary), var(--fg) 50%);
    --primary-opaque-8: color-mix(in oklab, var(--primary), var(--fg) 70%);
    --primary-opaque-9: color-mix(in oklab, var(--primary), var(--fg) 90%);

    --error-1: oklch(from var(--error) l c h / 0.1);
    --error-2: oklch(from var(--error) l c h / 0.2);
    --error-3: oklch(from var(--error) l c h / 0.3);
    --error-4: oklch(from var(--error) l c h / 0.4);
    --error-5: oklch(from var(--error) l c h / 0.5);
    --error-6: oklch(from var(--error) l c h / 0.6);
    --error-7: oklch(from var(--error) l c h / 0.75);
    --error-8: oklch(from var(--error) l c h / 0.9);
    --error-9: var(--error);

    --error-opaque-1: color-mix(in oklab, var(--error), var(--bg) 90%);
    --error-opaque-2: color-mix(in oklab, var(--error), var(--bg) 80%);
    --error-opaque-3: color-mix(in oklab, var(--error), var(--bg) 65%);
    --error-opaque-4: color-mix(in oklab, var(--error), var(--bg) 40%);
    --error-opaque-5: var(--error);
    --error-opaque-6: color-mix(in oklab, var(--error), var(--fg) 30%);
    --error-opaque-7: color-mix(in oklab, var(--error), var(--fg) 50%);
    --error-opaque-8: color-mix(in oklab, var(--error), var(--fg) 70%);
    --error-opaque-9: color-mix(in oklab, var(--error), var(--fg) 90%);

    --warning-1: oklch(from var(--warning) l c h / 0.1);
    --warning-2: oklch(from var(--warning) l c h / 0.2);
    --warning-3: oklch(from var(--warning) l c h / 0.3);
    --warning-4: oklch(from var(--warning) l c h / 0.4);
    --warning-5: oklch(from var(--warning) l c h / 0.5);
    --warning-6: oklch(from var(--warning) l c h / 0.6);
    --warning-7: oklch(from var(--warning) l c h / 0.75);
    --warning-8: oklch(from var(--warning) l c h / 0.9);
    --warning-9: var(--warning);

    --warning-opaque-1: color-mix(in oklab, var(--warning), var(--bg) 90%);
    --warning-opaque-2: color-mix(in oklab, var(--warning), var(--bg) 80%);
    --warning-opaque-3: color-mix(in oklab, var(--warning), var(--bg) 65%);
    --warning-opaque-4: color-mix(in oklab, var(--warning), var(--bg) 40%);
    --warning-opaque-5: var(--warning);
    --warning-opaque-6: color-mix(in oklab, var(--warning), var(--fg) 30%);
    --warning-opaque-7: color-mix(in oklab, var(--warning), var(--fg) 50%);
    --warning-opaque-8: color-mix(in oklab, var(--warning), var(--fg) 70%);
    --warning-opaque-9: color-mix(in oklab, var(--warning), var(--fg) 90%);

    --success-1: oklch(from var(--success) l c h / 0.1);
    --success-2: oklch(from var(--success) l c h / 0.2);
    --success-3: oklch(from var(--success) l c h / 0.3);
    --success-4: oklch(from var(--success) l c h / 0.4);
    --success-5: oklch(from var(--success) l c h / 0.5);
    --success-6: oklch(from var(--success) l c h / 0.6);
    --success-7: oklch(from var(--success) l c h / 0.75);
    --success-8: oklch(from var(--success) l c h / 0.9);
    --success-9: var(--success);

    --success-opaque-1: color-mix(in oklab, var(--success), var(--bg) 90%);
    --success-opaque-2: color-mix(in oklab, var(--success), var(--bg) 80%);
    --success-opaque-3: color-mix(in oklab, var(--success), var(--bg) 65%);
    --success-opaque-4: color-mix(in oklab, var(--success), var(--bg) 40%);
    --success-opaque-5: var(--success);
    --success-opaque-6: color-mix(in oklab, var(--success), var(--fg) 30%);
    --success-opaque-7: color-mix(in oklab, var(--success), var(--fg) 50%);
    --success-opaque-8: color-mix(in oklab, var(--success), var(--fg) 70%);
    --success-opaque-9: color-mix(in oklab, var(--success), var(--fg) 90%);
    /* /derive:mirror */

    /* Re-apply inherited properties so a preset's --fg/--bg/--font-sans
       overrides actually reach descendants. Without this, body's resolved
       color/background/font-family is inherited into the scope unchanged,
       and the preset's tokens render nowhere. */
    color: var(--fg);
    background: var(--bg);
    font-family: var(--font-sans);
    line-height: var(--lh);
  }

  html {
    box-sizing: border-box;
    scroll-padding-block-start: 60px;
    min-height: 100dvh;
    margin: 0;
  }

  body > .body-fill {
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  main {
    flex: 1;
  }

  header,
  main,
  footer {
    inline-size: 100%;
  }

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

  body {
    font-family: var(--font-sans);
    line-height: var(--lh);
    margin: 0;
    min-height: 100dvh;
    color: var(--fg);
    background: var(--bg);
    height: stretch;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  .fluid,
  .tag,
  textarea,
  input,
  select,
  button,
  a,
  th,
  td,
  label {
    /* Fluid Typography System
   *
   * This system creates responsive font sizes that scale smoothly between viewport sizes.
   * Set --fl (fluid level) on any element to control its size (-1 to 6).
   *
   * How it works:
   * 1. Calculate min/max font sizes using pow() with modular scale ratios
   * 2. Find the rate of change (slope) between min and max
   * 3. Use clamp() to create a fluid value that scales with viewport/container width
   *
   * Formula breakdown:
   * - --fluid-min: Minimum font size = base * ratio^level
   * - --fluid-max: Maximum font size = base * ratio^level
   * - --fluid-preferred: Slope of linear interpolation
   * - --fluid-type: clamp(min, min + slope * viewport, max)
   */
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--fl, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--fl, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
    line-height: var(--lh);
  }

  /* This makes containers, with container queries use a cqi unit instead of vi */
  /* FC Fluid Container */
  .fluid-text-container,
  .fc {
    container-type: inline-size;
    --variable-unit: 100cqi;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    line-height: var(--lh-s);
  }

  h1,
  .h1 {
    margin-block: 0 var(--vs-base);
    --fl: 5;
    letter-spacing: var(--ls-h1);
  }
  h2,
  .h2 {
    --fl: 4;
    letter-spacing: var(--ls-h2);
  }
  h3,
  .h3 {
    --fl: 3;
    letter-spacing: var(--ls-h3);
  }
  h4,
  .h4 {
    --fl: 2;
  }
  h5,
  .h5 {
    --fl: 1;
  }
  h6,
  .h6 {
    --fl: 0;
  }

  p,
  li,
  body,
  input,
  textarea,
  button,
  select {
    --fl: 0;
    line-height: var(--lh);
  }

  /* Form elements don't inherit font-family by default — restore inheritance
     so theme presets that swap --font-sans flow into buttons/inputs too. */
  input,
  textarea,
  button,
  select {
    font-family: inherit;
  }
  .fs-xs {
    --fl: -1;
  }
  .fs-base {
    --fl: 0;
  }
  .fs-s {
    --fl: 1;
  }
  .fs-m {
    --fl: 2;
  }
  .fs-l {
    --fl: 3;
  }
  .fs-xl {
    --fl: 4;
  }
  .fs-xxl {
    --fl: 5;
  }
  .fs-xxxl {
    --fl: 6;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-inline-size: 100%;
  }

  hr {
    block-size: 0;
    margin-block: var(--vs-l);
    margin-inline: 0;
    border: none;
    border-block-start: var(--border-1);
  }

  button,
  .button {
    --button-color: var(--gray-5);
    --button-text: var(--fg);

    /* Two-stop gradient via color-mix(). Avoids oklch(from ... l c h)
       gamut clipping on saturated tokens like --primary. */
    --button-bg-top: light-dark(
      color-mix(in oklab, var(--button-color) 18%, white),
      color-mix(in oklab, var(--button-color) 35%, black)
    );
    --button-bg-bottom: light-dark(
      color-mix(in oklab, var(--button-color) 28%, white),
      color-mix(in oklab, var(--button-color) 45%, black)
    );
    --button-border: light-dark(
      color-mix(in oklab, var(--button-color) 60%, transparent),
      color-mix(in oklab, var(--button-color) 50%, transparent)
    );
    --button-shadow: light-dark(
      color-mix(in oklab, var(--button-color) 18%, transparent),
      color-mix(in oklab, var(--button-color) 35%, black)
    );

    appearance: none;
    margin: 0;
    cursor: pointer;
    background: linear-gradient(
      180deg,
      var(--button-bg-top) 0%,
      var(--button-bg-bottom) 100%
    );
    color: var(--button-text);
    font-weight: 560;
    display: inline-flex;
    justify-content: center;
    gap: 0.45em;
    align-items: center;
    line-height: var(--lh-s);
    border: 1px solid var(--button-border);
    border-radius: var(--br-m);
    padding: 6px var(--pad-l);
    text-decoration: none;
    box-shadow:
      inset 0 1px 0 light-dark(var(--white-5), var(--white-1)),
      0 1px 2px var(--button-shadow);
    transition:
      background var(--d-fast) var(--ease-smooth),
      border-color var(--d-fast) var(--ease-smooth),
      color var(--d-fast) var(--ease-smooth),
      box-shadow var(--d-fast) var(--ease-smooth),
      translate var(--d-fast) var(--ease-smooth);

    &:hover {
      --button-bg-top: light-dark(
        color-mix(in oklab, var(--button-color) 12%, white),
        color-mix(in oklab, var(--button-color) 42%, black)
      );
      --button-bg-bottom: light-dark(
        color-mix(in oklab, var(--button-color) 22%, white),
        color-mix(in oklab, var(--button-color) 52%, black)
      );
      border-color: light-dark(
        color-mix(in oklab, var(--button-color) 70%, transparent),
        color-mix(in oklab, var(--button-color) 60%, transparent)
      );
      box-shadow:
        inset 0 1px 0 light-dark(var(--white-6), var(--white-2)),
        0 2px 4px var(--button-shadow);
      translate: 0 -1px;
    }

    &:active {
      --button-bg-top: light-dark(
        color-mix(in oklab, var(--button-color) 45%, white),
        color-mix(in oklab, var(--button-color) 30%, black)
      );
      --button-bg-bottom: light-dark(
        color-mix(in oklab, var(--button-color) 55%, white),
        color-mix(in oklab, var(--button-color) 38%, black)
      );
      box-shadow:
        inset 0 1px 0 light-dark(var(--white-2), var(--white-1)),
        0 1px 2px var(--button-shadow);
      translate: 0;
    }

    &:disabled {
      opacity: 0.65;
      cursor: not-allowed;
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    @media (forced-colors: active) {
      /* In forced-colors mode, the gradient background and inset gloss disappear.
         Add an explicit border so the button has a visible edge. */
      background: ButtonFace;
      color: ButtonText;
      border: 1px solid ButtonBorder;

      &:hover {
        background: Highlight;
        color: HighlightText;
      }

      &:disabled {
        color: GrayText;
        border-color: GrayText;
      }
    }

    &.mini {
      --fl: -1;
      min-block-size: 24px;
      padding: 3px var(--pad-m);
      gap: 0.35em;
      border-radius: var(--br-s);
    }

    &.primary {
      --button-color: var(--primary);
      --button-text: var(--white);

      /* Vivid solid surface — high color percentage preserves chroma */
      --button-bg-top: light-dark(
        color-mix(in oklab, var(--button-color) 92%, white),
        color-mix(in oklab, var(--button-color) 88%, black)
      );
      --button-bg-bottom: light-dark(
        color-mix(in oklab, var(--button-color) 98%, white),
        color-mix(in oklab, var(--button-color) 80%, black)
      );
      --button-border: light-dark(
        color-mix(in oklab, var(--button-color) 75%, black),
        color-mix(in oklab, var(--button-color) 70%, white)
      );

      &:hover {
        --button-bg-top: light-dark(
          color-mix(in oklab, var(--button-color) 85%, white),
          color-mix(in oklab, var(--button-color) 95%, black)
        );
        --button-bg-bottom: light-dark(
          color-mix(in oklab, var(--button-color) 92%, white),
          var(--button-color)
        );
      }

      &:active {
        --button-bg-top: light-dark(
          color-mix(in oklab, var(--button-color) 88%, black),
          color-mix(in oklab, var(--button-color) 75%, black)
        );
        --button-bg-bottom: light-dark(
          color-mix(in oklab, var(--button-color) 80%, black),
          color-mix(in oklab, var(--button-color) 70%, black)
        );
      }
    }

    &.error {
      --button-color: var(--error);
      --button-text: var(--white);

      --button-bg-top: light-dark(
        color-mix(in oklab, var(--button-color) 92%, white),
        color-mix(in oklab, var(--button-color) 88%, black)
      );
      --button-bg-bottom: light-dark(
        color-mix(in oklab, var(--button-color) 98%, white),
        color-mix(in oklab, var(--button-color) 80%, black)
      );
      --button-border: light-dark(
        color-mix(in oklab, var(--button-color) 75%, black),
        color-mix(in oklab, var(--button-color) 70%, white)
      );

      &:hover {
        --button-bg-top: light-dark(
          color-mix(in oklab, var(--button-color) 85%, white),
          color-mix(in oklab, var(--button-color) 95%, black)
        );
        --button-bg-bottom: light-dark(
          color-mix(in oklab, var(--button-color) 92%, white),
          var(--button-color)
        );
      }

      &:active {
        --button-bg-top: light-dark(
          color-mix(in oklab, var(--button-color) 88%, black),
          color-mix(in oklab, var(--button-color) 75%, black)
        );
        --button-bg-bottom: light-dark(
          color-mix(in oklab, var(--button-color) 80%, black),
          color-mix(in oklab, var(--button-color) 70%, black)
        );
      }
    }

    &.warning {
      --button-color: var(--warning);
      --button-text: var(--black);

      --button-bg-top: light-dark(
        color-mix(in oklab, var(--button-color) 95%, white),
        color-mix(in oklab, var(--button-color) 90%, black)
      );
      --button-bg-bottom: light-dark(
        var(--button-color),
        color-mix(in oklab, var(--button-color) 82%, black)
      );
      --button-border: light-dark(
        color-mix(in oklab, var(--button-color) 80%, black),
        color-mix(in oklab, var(--button-color) 65%, black)
      );

      &:hover {
        --button-bg-top: light-dark(
          color-mix(in oklab, var(--button-color) 90%, white),
          color-mix(in oklab, var(--button-color) 95%, black)
        );
        --button-bg-bottom: light-dark(
          color-mix(in oklab, var(--button-color) 98%, white),
          var(--button-color)
        );
        color: var(--black);
      }

      &:active {
        --button-bg-top: light-dark(
          color-mix(in oklab, var(--button-color) 90%, black),
          color-mix(in oklab, var(--button-color) 78%, black)
        );
        --button-bg-bottom: light-dark(
          color-mix(in oklab, var(--button-color) 82%, black),
          color-mix(in oklab, var(--button-color) 72%, black)
        );
      }
    }

    &.success {
      --button-color: var(--success);
      --button-text: var(--white);

      --button-bg-top: light-dark(
        color-mix(in oklab, var(--button-color) 92%, white),
        color-mix(in oklab, var(--button-color) 88%, black)
      );
      --button-bg-bottom: light-dark(
        color-mix(in oklab, var(--button-color) 98%, white),
        color-mix(in oklab, var(--button-color) 80%, black)
      );
      --button-border: light-dark(
        color-mix(in oklab, var(--button-color) 75%, black),
        color-mix(in oklab, var(--button-color) 70%, white)
      );

      &:hover {
        --button-bg-top: light-dark(
          color-mix(in oklab, var(--button-color) 85%, white),
          color-mix(in oklab, var(--button-color) 95%, black)
        );
        --button-bg-bottom: light-dark(
          color-mix(in oklab, var(--button-color) 92%, white),
          var(--button-color)
        );
      }

      &:active {
        --button-bg-top: light-dark(
          color-mix(in oklab, var(--button-color) 88%, black),
          color-mix(in oklab, var(--button-color) 75%, black)
        );
        --button-bg-bottom: light-dark(
          color-mix(in oklab, var(--button-color) 80%, black),
          color-mix(in oklab, var(--button-color) 70%, black)
        );
      }
    }

    &.dark {
      --button-color: light-dark(#222, #fff);
      /* Always white text — .dark means a dark surface in both color schemes,
         so the label needs to stay light no matter what. */
      --button-text: var(--white);

      /* Dark surface in both schemes. light-dark resolves --button-color to a
         near-black or near-white anchor; we mix it heavily toward black either
         way to get a stable dark surface. */
      --button-bg-top: color-mix(in oklab, var(--button-color) 22%, black);
      --button-bg-bottom: color-mix(in oklab, var(--button-color) 30%, black);
      --button-border: color-mix(in oklab, var(--button-color) 50%, black);
      --button-shadow: color-mix(in oklab, black 80%, transparent);

      &:hover {
        --button-bg-top: color-mix(in oklab, var(--button-color) 32%, black);
        --button-bg-bottom: color-mix(in oklab, var(--button-color) 40%, black);
      }

      &:active {
        --button-bg-top: color-mix(in oklab, var(--button-color) 14%, black);
        --button-bg-bottom: color-mix(in oklab, var(--button-color) 22%, black);
      }
    }

    &.light {
      --button-color: light-dark(#fff, #fafafa);
      --button-text: var(--black);

      --button-bg-top: color-mix(in oklab, var(--button-color) 96%, black);
      --button-bg-bottom: var(--button-color);
      --button-border: color-mix(in oklab, var(--button-color) 60%, var(--fg));
      --button-shadow: color-mix(in oklab, black 12%, transparent);

      &:hover {
        --button-bg-top: color-mix(in oklab, var(--button-color) 92%, black);
        --button-bg-bottom: color-mix(in oklab, var(--button-color) 98%, black);
      }

      &:active {
        --button-bg-top: color-mix(in oklab, var(--button-color) 85%, black);
        --button-bg-bottom: color-mix(in oklab, var(--button-color) 90%, black);
      }
    }

    &.contrast {
      --button-color: var(--fg);
      --button-text: var(--bg);

      /* light-dark gates here are because the gradient direction differs:
         in light mode the surface is DARK (mix toward black to keep it dark),
         in dark mode the surface is LIGHT (mix toward black still works
         because --button-color is already #fff and 90% white + 10% black =
         light gray). */
      --button-bg-top: light-dark(
        color-mix(in oklab, var(--button-color) 22%, black),
        color-mix(in oklab, var(--button-color) 96%, black)
      );
      --button-bg-bottom: light-dark(
        color-mix(in oklab, var(--button-color) 30%, black),
        color-mix(in oklab, var(--button-color) 100%, transparent)
      );
      --button-border: light-dark(
        color-mix(in oklab, var(--button-color) 50%, black),
        color-mix(in oklab, var(--button-color) 70%, black)
      );
      --button-shadow: light-dark(
        color-mix(in oklab, black 75%, transparent),
        color-mix(in oklab, black 15%, transparent)
      );

      &:hover {
        --button-bg-top: light-dark(
          color-mix(in oklab, var(--button-color) 32%, black),
          color-mix(in oklab, var(--button-color) 90%, black)
        );
        --button-bg-bottom: light-dark(
          color-mix(in oklab, var(--button-color) 40%, black),
          color-mix(in oklab, var(--button-color) 96%, black)
        );
      }

      &:active {
        --button-bg-top: light-dark(
          color-mix(in oklab, var(--button-color) 14%, black),
          color-mix(in oklab, var(--button-color) 80%, black)
        );
        --button-bg-bottom: light-dark(
          color-mix(in oklab, var(--button-color) 22%, black),
          color-mix(in oklab, var(--button-color) 90%, black)
        );
      }
    }

    &.ghost {
      --button-color: transparent;
      --button-text: var(--fg);
      border: 1px solid var(--fg-3);
      background: transparent;
      box-shadow: none;

      &:hover {
        background: var(--fg-05);
        border-color: var(--fg-4);
        color: var(--fg);
        translate: 0;
      }

      &:active {
        background: var(--fg-1);
        border-color: var(--fg-5);
      }
    }

    &.minimal {
      --button-color: transparent;
      --button-text: var(--fg-8);
      border: none;
      box-shadow: none;
      background: transparent;
      padding: var(--pad-xs) var(--pad-s);

      &:hover {
        background: transparent;
        color: var(--fg);
        translate: 0;
      }

      &:active {
        background: transparent;
      }
    }
  }

  .close {
    --size: 2rem;

    inline-size: var(--size);
    height: var(--size);
    padding: 0;
    border: none;
    box-shadow: var(--shadow-1);
    color: var(--white);
    background: var(--red);
    cursor: pointer;
    border-radius: 50%;

    &:hover {
      background: oklch(from var(--red) calc(l + 0.1) c h);
    }
  }

  /* Shared focus ring for base interactive elements.
     Uses :where() so component-layer rules can override without
     specificity wars. Modifier states below override outline-color only. */
  :where(a, input, textarea, select):focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  textarea {
    field-sizing: content;
  }

  input,
  textarea,
  select {
    &:where(:user-invalid, [aria-invalid="true"], .error) {
      border-color: var(--red-6);
      &:focus-visible {
        outline-color: var(--red-6);
      }
    }
    &:where(:user-valid.success, .success) {
      border-color: var(--green-6);
      &:focus-visible {
        outline-color: var(--green-6);
      }
    }
    &.warning {
      border-color: var(--yellow-7);
      &:focus-visible {
        outline-color: var(--yellow-7);
      }
    }
  }

  label {
    display: block;
    --fl: -1;
  }

@layer utilities {
  /* UTILITIES */

  .readable {
    max-inline-size: 900px;
    inline-size: 100%;
  }

  .narrow {
    max-inline-size: var(--narrow-width, 50ch);
    inline-size: 100%;

    &.center {
      margin-inline: auto;
    }
  }

  .flex {
    display: flex;
    gap: var(--gap, 1rem);
  }

  .grid {
    display: grid;
    gap: var(--gap, 1rem);

    &.auto {
      grid-template-columns: repeat(
        auto-fit,
        minmax(var(--grid-min, 150px), 1fr)
      );
    }
  }

  .split {
    display: flex;
    gap: var(--gap, 1rem);
    align-items: start;
    justify-content: space-between;
    &.even {
      flex: 1 1 auto;
    }
    &.vertical {
      flex-direction: column;
      height: 100%;
    }
    &.center {
      align-items: center;
    }
  }

  /* Container query for .split - stacks when in narrow container */
  @container (max-width: 500px) {
    .split {
      flex-direction: column;
    }
  }

  .visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0px, 0px, 0px, 0px);
    height: 1px;
    inline-size: 1px;
    margin: -1px;
    padding: 0px;
    border: 0px;
  }

  .no-list {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      margin: 0;
      padding: 0;
    }
  }

  .row {
    margin-block: var(--vs-m);
  }

  :is(form, fieldset) .row {
    display: grid;
    gap: var(--row-gap, var(--vs-xs));
    align-content: start;
    margin-block: 0;
  }

  :is(form, fieldset) .row > label {
    margin-block-end: 0;
  }

  :is(form, fieldset) .row > :is(input, select, textarea):has(+ small) {
    margin-block-end: 0;
  }

  :is(form, fieldset) .row > :is(input, select, textarea) + small {
    margin-block-end: 0;
  }

  .form-actions {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--form-actions-justify, flex-end);
    align-items: center;
    gap: var(--form-actions-gap, var(--vs-s));
    margin-block: var(--form-actions-margin, var(--vs-m));
  }

  .form-actions > * {
    margin: 0;
  }

  @container (max-width: 30rem) {
    .form-actions
      > :is(
        button,
        .button,
        input[type="submit"],
        input[type="button"],
        input[type="reset"]
      ) {
      flex: 1 1 100%;
    }
  }

  .no-margin {
    margin: 0;
  }

  .self-start {
    align-self: start;
  }

  .full {
    inline-size: 100%;
  }

  .reset {
    appearance: none;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-align: inherit;
    text-decoration: none;
  }

  /* Text alignment */
  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }

  .circle {
    --size: 40px;
    border-radius: var(--size);
    padding: 0;
    inline-size: var(--size);
    height: var(--size);
  }

  /* Aspect Ratio Utilities */
  .aspect-square {
    aspect-ratio: 1 / 1;
  }

  .aspect-video {
    aspect-ratio: 16 / 9;
  }

  .aspect-4-3 {
    aspect-ratio: 4 / 3;
  }

  .aspect-21-9 {
    aspect-ratio: 21 / 9;
  }

  .aspect-custom {
    aspect-ratio: var(--aspect, 1 / 1);
  }

  /* Focus Ring - Consistent focus styling utility */
  .focus-ring:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .focus-ring-inset:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset-inset);
  }

  /* Transition Utilities - Use the easing tokens */
  .transition {
    transition: all var(--d-base) var(--ease-smooth);
  }

  .transition-fast {
    transition: all var(--d-instant) var(--ease-smooth);
  }

  .transition-slow {
    transition: all var(--d-emphatic) var(--ease-smooth);
  }

  .transition-bounce {
    transition: all var(--d-slow) var(--ease-bounce);
  }

  .transition-none {
    transition: none;
  }

  /* Gradient Utilities — curated, theme-aware
   * light-dark() only accepts <color>, not <image>, so we use
   * light-dark() on each color stop variable, then compose the gradient. */

  .gradient-sunset {
    --g1: light-dark(oklch(0.92 0.08 80), oklch(0.58 0.19 60));
    --g2: light-dark(oklch(0.82 0.15 45), oklch(0.45 0.22 35));
    --g3: light-dark(oklch(0.75 0.17 15), oklch(0.35 0.2 10));
    background: linear-gradient(135deg, var(--g1), var(--g2), var(--g3));
  }

  .gradient-ocean {
    --g1: light-dark(oklch(0.88 0.08 220), oklch(0.45 0.12 220));
    --g2: light-dark(oklch(0.78 0.1 230), oklch(0.35 0.14 235));
    --g3: light-dark(oklch(0.7 0.12 250), oklch(0.25 0.13 255));
    background: radial-gradient(
      ellipse at 30% 80%,
      var(--g1),
      var(--g2),
      var(--g3)
    );
  }

  .gradient-aurora {
    --g1: light-dark(oklch(0.88 0.1 160), oklch(0.42 0.14 155));
    --g2: light-dark(oklch(0.84 0.1 190), oklch(0.38 0.13 195));
    --g3: light-dark(oklch(0.82 0.08 260), oklch(0.32 0.15 265));
    --g4: light-dark(oklch(0.86 0.06 300), oklch(0.36 0.12 310));
    background: linear-gradient(
      160deg,
      var(--g1),
      var(--g2),
      var(--g3),
      var(--g4)
    );
  }

  .gradient-midnight {
    --g1: light-dark(oklch(0.75 0.06 270), oklch(0.3 0.08 275));
    --g2: light-dark(oklch(0.6 0.08 260), oklch(0.2 0.1 260));
    --g3: light-dark(oklch(0.5 0.1 250), oklch(0.13 0.08 250));
    background: radial-gradient(
      circle at 50% 50%,
      var(--g1),
      var(--g2),
      var(--g3)
    );
  }

  .gradient-dawn {
    --g1: light-dark(oklch(0.93 0.06 85), oklch(0.5 0.12 75));
    --g2: light-dark(oklch(0.9 0.09 50), oklch(0.42 0.16 40));
    --g3: light-dark(oklch(0.88 0.1 340), oklch(0.38 0.15 335));
    background: linear-gradient(to top right, var(--g1), var(--g2), var(--g3));
  }

  .gradient-forest {
    --g1: light-dark(oklch(0.88 0.08 145), oklch(0.42 0.1 150));
    --g2: light-dark(oklch(0.78 0.1 150), oklch(0.32 0.12 148));
    --g3: light-dark(oklch(0.72 0.09 130), oklch(0.25 0.09 135));
    background: linear-gradient(to bottom, var(--g1), var(--g2), var(--g3));
  }

  .gradient-lavender {
    --g1: light-dark(oklch(0.92 0.06 300), oklch(0.48 0.12 305));
    --g2: light-dark(oklch(0.86 0.08 285), oklch(0.38 0.14 285));
    --g3: light-dark(oklch(0.82 0.1 310), oklch(0.32 0.13 315));
    background: radial-gradient(
      ellipse at 70% 20%,
      var(--g1),
      var(--g2),
      var(--g3)
    );
  }

  .gradient-neon {
    --g1: light-dark(oklch(0.85 0.18 330), oklch(0.6 0.28 330));
    --g2: light-dark(oklch(0.8 0.16 290), oklch(0.5 0.26 290));
    --g3: light-dark(oklch(0.82 0.15 195), oklch(0.55 0.22 195));
    background: linear-gradient(70deg, var(--g1), var(--g2), var(--g3));
  }

  .gradient-slate {
    --g1: light-dark(oklch(0.94 0.01 260), oklch(0.35 0.015 260));
    --g2: light-dark(oklch(0.88 0.015 250), oklch(0.28 0.02 250));
    --g3: light-dark(oklch(0.85 0.01 240), oklch(0.22 0.015 240));
    background: linear-gradient(170deg, var(--g1), var(--g2), var(--g3));
  }

  .gradient-surface {
    --g1: light-dark(oklch(0.97 0.005 260), oklch(0.22 0.008 260));
    --g2: light-dark(oklch(0.95 0.003 250), oklch(0.18 0.005 250));
    background: radial-gradient(ellipse at 50% 0%, var(--g1), var(--g2));
  }

  .gradient-text {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* END UTILITIES */
} /* END @layer utilities */