/* Rip City's shared theme imports Web Awesome primitives, defines the product
   theme, and owns global Web Awesome policy plus catalog colors used across
   shell and route surfaces. */

@import url("/webawesome/styles/layers.css");
@import url("/webawesome/styles/native.css");
@import url("/webawesome/styles/utilities.css");

@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant,
  wa-theme, wa-theme-dimension, wa-theme-overrides, ripcity-app;

@layer wa-theme {
  .wa-theme-ripcity,
  .wa-theme-ripcity.wa-light,
  .wa-theme-ripcity .wa-light,
  .wa-theme-ripcity.wa-dark .wa-invert,
  .wa-theme-ripcity .wa-dark .wa-invert,
  .wa-light .wa-theme-ripcity,
  .wa-dark .wa-theme-ripcity.wa-invert,
  .wa-dark .wa-theme-ripcity .wa-invert {
    /* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: light;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: white;
    --wa-color-surface-default: white;
    --wa-color-surface-lowered: var(--wa-color-neutral-95);
    --wa-color-surface-border: var(--wa-color-neutral-90);

    --wa-color-text-normal: var(--wa-color-neutral-10);
    --wa-color-text-quiet: var(--wa-color-neutral-40);
    /* Trace-only marks such as blank-cell placeholders, not readable copy. */
    --ripcity-color-text-faint: var(--wa-color-neutral-90);
    --wa-color-text-link: var(--wa-color-blue-40);
    --wa-color-text-loud: #000;

    --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);

    /* Soft hues are quiet categorical and interaction surfaces, not statuses.
       Warning, danger, and success remain reserved for semantic conditions.
       Product teal uses the shared cyan ramp. */
    --ripcity-color-red-soft: #ffeeee;
    --ripcity-color-red-on-soft: var(--wa-color-red-40);
    --ripcity-color-orange-soft: #fff3e6;
    --ripcity-color-orange-on-soft: var(--wa-color-orange-40);
    --ripcity-color-yellow-soft: #fffbda;
    --ripcity-color-yellow-on-soft: var(--wa-color-yellow-40);
    --ripcity-color-green-soft: var(--wa-color-green-95);
    --ripcity-color-green-on-soft: var(--wa-color-green-40);
    --ripcity-color-teal-soft: #e5faf7;
    --ripcity-color-teal-on-soft: var(--wa-color-cyan-40);
    --ripcity-color-blue-soft: var(--wa-color-blue-95);
    --ripcity-color-blue-on-soft: var(--wa-color-blue-40);
    --ripcity-color-indigo-soft: #f0f2ff;
    --ripcity-color-indigo-on-soft: var(--wa-color-indigo-40);
    --ripcity-catalog-status-new-fill: var(--wa-color-indigo-40);
    --ripcity-catalog-status-new-mark: white;
    --ripcity-catalog-status-updated-fill: var(--wa-color-neutral-40);
    --ripcity-catalog-status-updated-mark: white;
    --ripcity-color-purple-soft: #f8f1ff;
    --ripcity-color-purple-on-soft: var(--wa-color-purple-40);
    --ripcity-color-pink-soft: #fceffd;
    --ripcity-color-pink-on-soft: var(--wa-color-pink-40);
    --ripcity-color-yellow-border-quiet: color-mix(
      in oklab,
      var(--wa-color-yellow-80) 35%,
      var(--wa-color-surface-default)
    );
    --ripcity-color-yellow-border-loud: var(--wa-color-yellow-60);

    --wa-color-shadow: rgb(0 0 0 / 0.05);

    --wa-color-focus: #000;

    --wa-color-mix-hover: oklch(from currentColor calc(l - 0.1) c h) 15%;
    --wa-color-mix-active: var(--wa-color-mix-hover);

    --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-95) 85%, transparent);
    --wa-color-brand-fill-normal: var(--wa-color-brand-90);
    --wa-color-brand-fill-loud: #000;
    --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-80), transparent);
    --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-70) 60%, transparent);
    --wa-color-brand-border-loud: #000;
    --wa-color-brand-on-quiet: #000;
    --wa-color-brand-on-normal: var(--wa-color-neutral-10);
    --wa-color-brand-on-loud: white;

    --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-95) 85%, transparent);
    --wa-color-success-fill-normal: var(--wa-color-success-90);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-80), transparent);
    --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-70) 60%, transparent);
    --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-60) 70%, transparent);
    --wa-color-success-on-quiet: var(--wa-color-success-40);
    --wa-color-success-on-normal: var(--wa-color-success-30);
    --wa-color-success-on-loud: white;

    --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-95) 85%, transparent);
    --wa-color-warning-fill-normal: var(--wa-color-warning-90);
    --wa-color-warning-fill-loud: var(--wa-color-warning-50);
    --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-80), transparent);
    --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-70) 60%, transparent);
    --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-60) 70%, transparent);
    --wa-color-warning-on-quiet: var(--wa-color-warning-40);
    --wa-color-warning-on-normal: var(--wa-color-warning-30);
    --wa-color-warning-on-loud: white;

    --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-95) 85%, transparent);
    --wa-color-danger-fill-normal: var(--wa-color-danger-90);
    --wa-color-danger-fill-loud: var(--wa-color-danger-50);
    --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-80), transparent);
    --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-70) 60%, transparent);
    --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-60) 70%, transparent);
    --wa-color-danger-on-quiet: var(--wa-color-danger-40);
    --wa-color-danger-on-normal: var(--wa-color-danger-30);
    --wa-color-danger-on-loud: white;

    --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-95) 85%, transparent);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
    --wa-color-neutral-fill-loud: #000;
    --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-80), transparent);
    --wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-40) 65%, transparent);
    --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-60) 70%, transparent);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-30);
    --wa-color-neutral-on-loud: white;
    /* #endregion */
  }

  .wa-theme-ripcity.wa-dark,
  .wa-theme-ripcity .wa-dark,
  .wa-theme-ripcity.wa-invert,
  .wa-theme-ripcity .wa-invert,
  .wa-dark .wa-theme-ripcity,
  .wa-light .wa-theme-ripcity.wa-invert,
  .wa-light .wa-theme-ripcity .wa-invert {
    /* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
    color-scheme: dark;
    color: var(--wa-color-text-normal);

    --wa-color-surface-raised: var(--wa-color-neutral-10);
    --wa-color-surface-default: var(--wa-color-neutral-05);
    --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
    --wa-color-surface-border: rgb(255 255 255 / 0.14);

    --wa-color-text-normal: white;
    --wa-color-text-quiet: var(--wa-color-neutral-60);
    --ripcity-color-text-faint: rgb(255 255 255 / 0.14);
    --wa-color-text-link: var(--wa-color-blue-70);
    --wa-color-text-loud: white;

    --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
    --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);

    --ripcity-color-red-soft: color-mix(
      in oklab,
      var(--wa-color-red-10) 50%,
      var(--wa-color-surface-default)
    );
    --ripcity-color-red-on-soft: var(--wa-color-red-60);
    --ripcity-color-orange-soft: color-mix(
      in oklab,
      var(--wa-color-orange-10) 50%,
      var(--wa-color-surface-default)
    );
    --ripcity-color-orange-on-soft: var(--wa-color-orange-60);
    --ripcity-color-yellow-soft: color-mix(
      in oklab,
      var(--wa-color-yellow-10) 50%,
      var(--wa-color-surface-default)
    );
    --ripcity-color-yellow-on-soft: var(--wa-color-yellow-60);
    --ripcity-color-green-soft: color-mix(
      in oklab,
      var(--wa-color-green-10) 50%,
      var(--wa-color-surface-default)
    );
    --ripcity-color-green-on-soft: var(--wa-color-green-60);
    --ripcity-color-teal-soft: color-mix(
      in oklab,
      var(--wa-color-cyan-10) 50%,
      var(--wa-color-surface-default)
    );
    --ripcity-color-teal-on-soft: var(--wa-color-cyan-60);
    --ripcity-color-blue-soft: color-mix(
      in oklab,
      var(--wa-color-blue-10) 50%,
      var(--wa-color-surface-default)
    );
    --ripcity-color-blue-on-soft: var(--wa-color-blue-60);
    --ripcity-color-indigo-soft: color-mix(
      in oklab,
      var(--wa-color-indigo-10) 50%,
      var(--wa-color-surface-default)
    );
    --ripcity-color-indigo-on-soft: var(--wa-color-indigo-60);
    --ripcity-catalog-status-new-fill: var(--wa-color-indigo-50);
    --ripcity-catalog-status-new-mark: white;
    --ripcity-catalog-status-updated-fill: var(--wa-color-neutral-70);
    --ripcity-catalog-status-updated-mark: var(--wa-color-neutral-10);
    --ripcity-color-purple-soft: color-mix(
      in oklab,
      var(--wa-color-purple-10) 50%,
      var(--wa-color-surface-default)
    );
    --ripcity-color-purple-on-soft: var(--wa-color-purple-60);
    --ripcity-color-pink-soft: color-mix(
      in oklab,
      var(--wa-color-pink-10) 50%,
      var(--wa-color-surface-default)
    );
    --ripcity-color-pink-on-soft: var(--wa-color-pink-60);
    --ripcity-color-yellow-border-quiet: color-mix(
      in oklab,
      var(--wa-color-yellow-20) 50%,
      var(--wa-color-surface-default)
    );
    --ripcity-color-yellow-border-loud: var(--wa-color-yellow-50);

    --wa-color-shadow: rgb(0 0 0 / 0.65);

    --wa-color-focus: white;

    --wa-color-mix-hover: oklch(from currentColor calc(l - 0.1) c h) 15%;
    --wa-color-mix-active: var(--wa-color-mix-hover);

    --wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-10) 90%, transparent);
    --wa-color-brand-fill-normal: var(--wa-color-brand-20);
    --wa-color-brand-fill-loud: white;
    --wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20), transparent);
    --wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-30), transparent);
    --wa-color-brand-border-loud: white;
    --wa-color-brand-on-quiet: white;
    --wa-color-brand-on-normal: var(--wa-color-neutral-95);
    --wa-color-brand-on-loud: var(--wa-color-neutral-10);

    --wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-10) 90%, transparent);
    --wa-color-success-fill-normal: var(--wa-color-success-20);
    --wa-color-success-fill-loud: var(--wa-color-success-50);
    --wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-20), transparent);
    --wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-30) 60%, transparent);
    --wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-40) 70%, transparent);
    --wa-color-success-on-quiet: var(--wa-color-success-60);
    --wa-color-success-on-normal: var(--wa-color-success-70);
    --wa-color-success-on-loud: white;

    --wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-10) 90%, transparent);
    --wa-color-warning-fill-normal: var(--wa-color-warning-20);
    --wa-color-warning-fill-loud: var(--wa-color-warning-50);
    --wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-20), transparent);
    --wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-30) 60%, transparent);
    --wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-40) 70%, transparent);
    --wa-color-warning-on-quiet: var(--wa-color-warning-60);
    --wa-color-warning-on-normal: var(--wa-color-warning-70);
    --wa-color-warning-on-loud: white;

    --wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-10) 90%, transparent);
    --wa-color-danger-fill-normal: var(--wa-color-danger-20);
    --wa-color-danger-fill-loud: var(--wa-color-danger-50);
    --wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-20), transparent);
    --wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-30) 60%, transparent);
    --wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-40) 70%, transparent);
    --wa-color-danger-on-quiet: var(--wa-color-danger-60);
    --wa-color-danger-on-normal: var(--wa-color-danger-70);
    --wa-color-danger-on-loud: white;

    --wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-10) 90%, transparent);
    --wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
    --wa-color-neutral-fill-loud: white;
    --wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-20), transparent);
    --wa-color-neutral-border-normal: rgb(255 255 255 / 0.36);
    --wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-40) 70%, transparent);
    --wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
    --wa-color-neutral-on-normal: var(--wa-color-neutral-70);
    --wa-color-neutral-on-loud: var(--wa-color-neutral-10);
    /* #endregion */
  }

  .wa-theme-ripcity,
  .wa-theme-ripcity.wa-light,
  .wa-theme-ripcity .wa-light,
  .wa-theme-ripcity.wa-dark,
  .wa-theme-ripcity .wa-dark,
  .wa-theme-ripcity.wa-invert,
  .wa-theme-ripcity .wa-invert {
    font-family: var(--wa-font-family-body);
    font-variant-numeric: tabular-nums;

    /* Shared table and quantitative marks. These semantic values keep dense
       feature instruments aligned. The ripcity-app layer owns the shared
       measure-track mechanics; measured rail widths and domain meaning remain
       feature-owned. */
    --ripcity-row-hover-background: var(--ripcity-color-yellow-soft);
    --ripcity-row-selected-background: var(--wa-color-surface-lowered);
    --ripcity-selection-marker-color: var(--wa-color-neutral-fill-loud);
    --ripcity-sticky-table-header-shadow: 0 3px 4px -4px var(--wa-color-shadow);
    --ripcity-neutral-measure-track: color-mix(
      in oklab,
      var(--wa-color-neutral-border-normal) 22%,
      transparent
    );
    --ripcity-neutral-measure-fill: color-mix(
      in oklab,
      var(--wa-color-neutral-border-normal) 88%,
      transparent
    );
    --ripcity-hot-percentile-p0: #e11d48;
    --ripcity-hot-percentile-p20: #f43f5e;
    --ripcity-hot-percentile-p40: #f97316;
    --ripcity-hot-percentile-p50: #f59e0b;
    --ripcity-hot-percentile-p60: #eab308;
    --ripcity-hot-percentile-p80: #22c55e;
    --ripcity-hot-percentile-p100: #059669;
    --ripcity-favorable-measure-fill: var(--ripcity-hot-percentile-p100);
    --ripcity-unfavorable-measure-fill: var(--ripcity-hot-percentile-p0);
    /* Neutral comparative volume, never success. */
    --ripcity-comparison-measure-fill: var(--wa-color-blue);

    /* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-font-family-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --wa-font-family-heading: var(--wa-font-family-body);
    --wa-font-family-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    --wa-font-family-mono: var(--wa-font-family-code);
    --wa-font-family-longform: ui-serif, Georgia, serif;

    /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
     * For larger font sizes, each size is twice 1.125x larger to maximize impact.
     * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
    --wa-font-size-scale: 0.875;
    --wa-font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 8.5px */
    --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 9.625px */
    --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 10.5px */
    --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 12.25px */
    --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 14px */
    --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 17.5px */
    --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 21.875px */
    --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 28px */
    --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 35.875px */
    --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 45.5px */
    --wa-font-size-5xl: round(calc(var(--wa-font-size-4xl) * 1.125 * 1.125), 1px); /* 58px */

    --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);

    --wa-font-weight-light: 300;
    --wa-font-weight-normal: 400;
    --wa-font-weight-semibold: 600;
    --wa-font-weight-bold: 700;

    --wa-font-weight-body: var(--wa-font-weight-normal);
    --wa-font-weight-heading: var(--wa-font-weight-bold);
    --wa-font-weight-code: var(--wa-font-weight-normal);
    --wa-font-weight-longform: var(--wa-font-weight-normal);
    --wa-font-weight-action: var(--wa-font-weight-semibold);

    --wa-line-height-condensed: 1.2;
    --wa-line-height-normal: 1.6;
    --wa-line-height-expanded: 2;

    --wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
    --wa-link-decoration-hover: underline;
    /* #endregion */

    /* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-space-scale: 0.875;
    --wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 1.75px */
    --wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 3.5px */
    --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 7px */
    --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 10.5px */
    --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 14px */
    --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 21px */
    --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 28px */
    --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 35px */
    --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 42px */
    --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 56px */
    --wa-space-5xl: calc(var(--wa-space-scale) * 5rem); /* 70px */

    --wa-content-spacing: var(--wa-space-l);
    /* #endregion */

    /* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-style: solid;

    --wa-border-width-scale: 1;
    --wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
    --wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
    --wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
    /* #endregion */

    /* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-border-radius-scale: 1;
    --wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
    --wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
    --wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);

    --wa-border-radius-pill: 9999px;
    --wa-border-radius-circle: 50%;
    --wa-border-radius-square: 0px;
    /* #endregion */

    /* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Rip City preserves focus and keyboard behavior without painting focus
       rings. The zero-width tokens reach Web Awesome shadow roots. */
    --wa-focus-ring-style: none;
    --wa-focus-ring-width: 0;
    --wa-focus-ring: none;
    --wa-focus-ring-offset: 0;
    /* #endregion */

    /* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-shadow-offset-x-scale: 0;
    --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
    --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
    --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);

    --wa-shadow-offset-y-scale: 0.5;
    --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
    --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
    --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);

    --wa-shadow-blur-scale: 0.5;
    --wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
    --wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
    --wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);

    --wa-shadow-spread-scale: 0;
    --wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
    --wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
    --wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);

    --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
      var(--wa-shadow-spread-s) var(--wa-color-shadow);
    --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
      var(--wa-shadow-spread-m) var(--wa-color-shadow);
    --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
      var(--wa-shadow-spread-l) var(--wa-color-shadow);
    /* #endregion */

    /* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
    --wa-transition-easing: ease;
    --wa-transition-slow: 300ms;
    --wa-transition-normal: 150ms;
    --wa-transition-fast: 75ms;
    /* #endregion */

    /* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
    /* Form Controls */
    --wa-form-control-background-color: color-mix(in oklab, var(--wa-color-surface-raised), transparent);
    --wa-form-control-border-color: var(--wa-color-neutral-border-normal);
    --wa-form-control-border-style: var(--wa-border-style);
    --wa-form-control-border-width: var(--wa-border-width-s);
    --wa-form-control-border-radius: var(--wa-border-radius-m);

    --wa-form-control-activated-color: var(--wa-color-brand-fill-loud);

    --wa-form-control-label-color: var(--wa-color-text-normal);
    --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
    --wa-form-control-label-line-height: var(--wa-line-height-normal);

    --wa-form-control-value-color: var(--wa-color-text-normal);
    --wa-form-control-value-font-weight: var(--wa-font-weight-body);
    --wa-form-control-value-line-height: var(--wa-line-height-condensed);

    --wa-form-control-hint-color: var(--wa-color-text-quiet);
    --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
    --wa-form-control-hint-line-height: var(--wa-line-height-normal);

    --wa-form-control-placeholder-color: var(--wa-color-gray-50);

    --wa-form-control-required-content: '*';
    --wa-form-control-required-content-color: inherit;
    --wa-form-control-required-content-offset: 0.1em;

    --wa-form-control-padding-block: 0.75em;
    --wa-form-control-padding-inline: 1em;
    --wa-form-control-height: round(
      calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
      1px
    );
    --wa-form-control-toggle-size: round(1.25em, 1px);

    /* Buttons */
    --wa-button-transform-hover: none;
    --wa-button-transform-active: none;

    /* Panels */
    --wa-panel-border-style: var(--wa-border-style);
    --wa-panel-border-width: var(--wa-border-width-s);
    --wa-panel-border-radius: var(--wa-border-radius-l);

    /* Tooltips */
    --wa-tooltip-arrow-size: 0.375rem;

    --wa-tooltip-background-color: var(--wa-color-text-normal);

    --wa-tooltip-border-color: var(--wa-tooltip-background-color);
    --wa-tooltip-border-style: var(--wa-border-style);
    --wa-tooltip-border-width: var(--wa-border-width-s);
    --wa-tooltip-border-radius: var(--wa-border-radius-s);

    --wa-tooltip-content-color: var(--wa-color-surface-default);
    --wa-tooltip-font-size: var(--wa-font-size-s);
    --wa-tooltip-line-height: var(--wa-line-height-normal);
    /* #endregion */
  }

  .wa-theme-ripcity.wa-dark,
  .wa-theme-ripcity .wa-dark,
  .wa-theme-ripcity.wa-invert,
  .wa-theme-ripcity .wa-invert,
  .wa-dark .wa-theme-ripcity,
  .wa-light .wa-theme-ripcity.wa-invert,
  .wa-light .wa-theme-ripcity .wa-invert {
    --wa-form-control-background-color: var(--wa-color-surface-raised);
    --wa-form-control-placeholder-color: var(--wa-color-gray-60);
  }
}

@layer wa-theme-overrides {
  .wa-theme-ripcity {
    h1,
    h2,
    h3,
    h4 {
      letter-spacing: calc(1em * -0.03);
    }

    wa-avatar {
      background-color: var(--wa-color-neutral-fill-quiet);
      color: var(--wa-color-neutral-on-quiet);
    }

    a,
    wa-badge {
      font-weight: var(--wa-font-weight-semibold);
    }

    wa-select::part(display-input) {
      font-weight: var(--wa-font-weight-semibold);
    }

    :is(wa-button, button, input:is([type='button'], [type='reset'], [type='submit']), a.wa-button):not(
        [appearance='plain'],
        .wa-plain
      ) {
      &:where(:not(wa-button)),
      &::part(base) {
        box-shadow: var(--wa-shadow-s);
      }
    }

    wa-callout {
      border-radius: var(--wa-border-radius-m);

      &::part(icon) {
        opacity: 0.6;
      }
    }

    wa-radio,
    input[type='radio'] {
      --checked-icon-color: var(--wa-color-surface-default);
      --checked-icon-scale: 0.4;
    }

    wa-radio:state(checked)::part(control),
    input[type='radio']:checked {
      background-color: var(--wa-form-control-activated-color);
    }

    wa-tab {
      color: var(--wa-color-text-quiet);
    }
  }
}


/* Rip City's internal-product policy preserves functional focus while
   suppressing native and application-authored focus outlines. !important is
   intentional: feature sheets load after the theme, and this one literal
   policy must also neutralize hard-coded outline declarations. */
@layer ripcity-app {
  :where(.wa-theme-ripcity, .wa-theme-ripcity *):focus-visible {
    outline: none !important;
  }
}

/* Catalog family colors span shell navigation, command search, and home. */
@layer ripcity-app {
  .app-nav-group--catalog,
  .app-command-group--catalog,
  .catalog-group--catalog {
    --catalog-group-soft: var(--ripcity-color-blue-soft);
    --catalog-group-color: var(--ripcity-color-blue-on-soft);
  }

  .app-nav-group--tools,
  .app-command-group--tools,
  .catalog-group--tools {
    --catalog-group-soft: var(--ripcity-color-purple-soft);
    --catalog-group-color: var(--ripcity-color-purple-on-soft);
  }

  .app-nav-group--salary-cap,
  .app-command-group--salary-cap,
  .catalog-group--salary-cap {
    --catalog-group-soft: var(--ripcity-color-green-soft);
    --catalog-group-color: var(--ripcity-color-green-on-soft);
  }

  .app-nav-group--draft,
  .app-command-group--draft,
  .catalog-group--draft {
    --catalog-group-soft: var(--ripcity-color-orange-soft);
    --catalog-group-color: var(--ripcity-color-orange-on-soft);
  }

  .app-nav-group--reports,
  .app-command-group--reports,
  .catalog-group--reports {
    --catalog-group-soft: var(--ripcity-color-red-soft);
    --catalog-group-color: var(--ripcity-color-red-on-soft);
  }
}