/* ============================================================================
 * Stratamize One — design token layer
 * AUTO-GENERATED — DO NOT EDIT.
 * Edit tokens/stratamize.tokens.json and re-run `npm run build`.
 *
 * Stratamize Design System "Stratamize One" v1.0.0
 * Contrast target: WCAG 2.2 AA — 4.5:1 body text, 3:1 UI/graphic boundaries
 * ========================================================================= */

/*
 * TODO(spine): brandAsset.* (logoPrimary, logoInverse, badge, clearSpace, minWidth) has no entry in the
 *   CSS custom-property naming contract, so it is NOT emitted here. It IS exported
 *   in dist/tokens.js and dist/tokens.json. Add a naming rule to the contract if these
 *   should become CSS variables.
 * TODO(spine): gradient.tintWash and gradient.navyBand contain off-ramp literals
 *   (#e1effa, #d7eaf8, #101d2c) that are not steps in any ramp. They are emitted
 *   verbatim from the spine. Promote them to ramp steps if they need to be retargetable.
 */

:root {
  /* Native form controls / scrollbars follow the token modes. */
  color-scheme: light dark;

  /* --- RAW RAMPS — literal hex. Retarget a semantic token, not these. --- */
  --sm-brand-50:                 #eaf4fb;
  --sm-brand-100:                #d3e7f6;
  --sm-brand-200:                #a9cfee;
  --sm-brand-300:                #7ab6e5;
  --sm-brand-400:                #4d9fde;
  --sm-brand-500:                #2f87d4;
  --sm-brand-600:                #1e6fb8;
  --sm-brand-700:                #1b5c99;
  --sm-brand-800:                #17497a;
  --sm-brand-900:                #16283c;
  --sm-cyan-50:                  #e8f7fc;
  --sm-cyan-100:                 #c6ecf7;
  --sm-cyan-200:                 #97dcf0;
  --sm-cyan-300:                 #6bcae6;
  --sm-cyan-400:                 #43b8dc;
  --sm-cyan-500:                 #22a3c9;
  --sm-cyan-600:                 #1785a8;
  --sm-cyan-700:                 #146a86;
  --sm-cyan-800:                 #145566;
  --sm-cyan-900:                 #13414d;
  --sm-neutral-0:                #ffffff;
  --sm-neutral-50:               #f8fafc;
  --sm-neutral-100:              #f1f5f9;
  --sm-neutral-200:              #e2e8f0;
  --sm-neutral-300:              #cbd5e1;
  --sm-neutral-400:              #94a3b8;
  --sm-neutral-500:              #64748b;
  --sm-neutral-600:              #475569;
  --sm-neutral-700:              #334155;
  --sm-neutral-800:              #1e293b;
  --sm-neutral-900:              #0f172a;
  --sm-neutral-950:              #080f1a;
  --sm-success-50:               #ecfdf5;
  --sm-success-100:              #d1fae5;
  --sm-success-300:              #6ee7b7;
  --sm-success-400:              #34d399;
  --sm-success-500:              #10b981;
  --sm-success-600:              #059669;
  --sm-success-700:              #047857;
  --sm-danger-50:                #fef2f2;
  --sm-danger-100:               #fee2e2;
  --sm-danger-300:               #fca5a5;
  --sm-danger-400:               #f87171;
  --sm-danger-500:               #ef4444;
  --sm-danger-600:               #dc2626;
  --sm-danger-700:               #b91c1c;
  --sm-warning-50:               #fffbeb;
  --sm-warning-100:              #fef3c7;
  --sm-warning-300:              #fcd34d;
  --sm-warning-400:              #fbbf24;
  --sm-warning-500:              #f59e0b;
  --sm-warning-600:              #d97706;
  --sm-warning-700:              #b45309;
  --sm-teal-400:                 #2dd4bf;
  --sm-teal-500:                 #14b8a6;
  --sm-teal-600:                 #0d9488;

  /* --- SEMANTIC — the layer products consume. --- */
  --sm-action-disabled-opacity:  0.5;
  --sm-focus-ring-width:         2px;
  --sm-focus-ring-offset:        2px;

  /* --- GRADIENTS --- */
  --sm-gradient-brand-cta:       linear-gradient(to right, var(--sm-brand-600), var(--sm-brand-800));
  --sm-gradient-brand-cta-slide: linear-gradient(to right, var(--sm-brand-600), var(--sm-brand-900), var(--sm-brand-600));
  --sm-gradient-brand-ink:       linear-gradient(to right, var(--sm-brand-400), var(--sm-cyan-400));
  --sm-gradient-brand-ink-light: linear-gradient(to right, var(--sm-brand-900), var(--sm-brand-600), var(--sm-cyan-500));
  --sm-gradient-decor:           linear-gradient(135deg, var(--sm-brand-500), var(--sm-cyan-400));
  --sm-gradient-icon-tile:       linear-gradient(135deg, var(--sm-brand-500), var(--sm-brand-700));
  --sm-gradient-tint-wash:       linear-gradient(to right, var(--sm-brand-50), #e1effa, #d7eaf8);
  --sm-gradient-navy-band:       linear-gradient(180deg, var(--sm-brand-900), #101d2c);

  /* --- FONT STACKS --- */
  --sm-font-display:             'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sm-font-ui:                  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sm-font-mono:                'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* --- TYPE SCALES — app (dense) + mkt (fluid) --- */
  --sm-text-2xs:                 10px;
  --sm-leading-2xs:              14px;
  --sm-text-xs:                  11px;
  --sm-leading-xs:               16px;
  --sm-text-sm:                  12px;
  --sm-leading-sm:               18px;
  --sm-text-base:                13px;
  --sm-leading-base:             20px;
  --sm-text-md:                  14px;
  --sm-leading-md:               21px;
  --sm-text-lg:                  16px;
  --sm-leading-lg:               24px;
  --sm-text-xl:                  20px;
  --sm-leading-xl:               28px;
  --sm-text-2xl:                 24px;
  --sm-leading-2xl:              32px;
  --sm-text-3xl:                 32px;
  --sm-leading-3xl:              40px;
  --sm-text-4xl:                 40px;
  --sm-leading-4xl:              48px;
  --sm-mkt-body:                 clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --sm-mkt-body-leading:         1.65;
  --sm-mkt-lead:                 clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --sm-mkt-lead-leading:         1.55;
  --sm-mkt-h3:                   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --sm-mkt-h3-leading:           1.3;
  --sm-mkt-h2:                   clamp(1.875rem, 1.4rem + 2vw, 3rem);
  --sm-mkt-h2-leading:           1.15;
  --sm-mkt-h1:                   clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --sm-mkt-h1-leading:           1.05;
  --sm-mkt-hero:                 clamp(3rem, 1.5rem + 6.5vw, 6rem);
  --sm-mkt-hero-leading:         1.0;

  /* --- FONT WEIGHTS --- */
  --sm-weight-regular:           400;
  --sm-weight-medium:            500;
  --sm-weight-semibold:          600;
  --sm-weight-bold:              700;
  --sm-weight-extrabold:         800;

  /* --- LETTER SPACING --- */
  --sm-tracking-tight:           -0.02em;
  --sm-tracking-normal:          0;
  --sm-tracking-wide:            0.04em;

  /* --- SPACE — 4px base --- */
  --sm-space-0:                  0;
  --sm-space-1:                  4px;
  --sm-space-2:                  8px;
  --sm-space-3:                  12px;
  --sm-space-4:                  16px;
  --sm-space-5:                  20px;
  --sm-space-6:                  24px;
  --sm-space-8:                  32px;
  --sm-space-10:                 40px;
  --sm-space-12:                 48px;
  --sm-space-16:                 64px;
  --sm-space-20:                 80px;
  --sm-space-24:                 96px;
  --sm-space-section:            clamp(4rem, 3rem + 5vw, 8rem);

  /* --- RADIUS --- */
  --sm-radius-none:              0;
  --sm-radius-xs:                4px;
  --sm-radius-sm:                6px;
  --sm-radius-md:                8px;
  --sm-radius-lg:                12px;
  --sm-radius-xl:                16px;
  --sm-radius-2xl:               24px;
  --sm-radius-full:              9999px;

  /* --- MOTION --- */
  --sm-duration-instant:         80ms;
  --sm-duration-fast:            150ms;
  --sm-duration-normal:          240ms;
  --sm-duration-slow:            400ms;
  --sm-duration-deliberate:      700ms;
  --sm-ease-standard:            cubic-bezier(0.2, 0, 0.2, 1);
  --sm-ease-entrance:            cubic-bezier(0.16, 1, 0.3, 1);
  --sm-ease-exit:                cubic-bezier(0.4, 0, 1, 1);
  --sm-ease-linear:              linear;

  /* --- Z-INDEX --- */
  --sm-z-base:                   0;
  --sm-z-raised:                 10;
  --sm-z-sticky:                 100;
  --sm-z-header:                 200;
  --sm-z-drawer:                 300;
  --sm-z-overlay:                400;
  --sm-z-modal:                  500;
  --sm-z-popover:                600;
  --sm-z-toast:                  700;
  --sm-z-tooltip:                800;

  /* --- BREAKPOINTS (for JS/container queries — @media needs literals) --- */
  --sm-bp-xs:                    375px;
  --sm-bp-sm:                    640px;
  --sm-bp-md:                    768px;
  --sm-bp-lg:                    1024px;
  --sm-bp-xl:                    1280px;
  --sm-bp-2xl:                   1536px;

  /* --- LAYOUT METRICS --- */
  --sm-container-max:            1280px;
  --sm-container-wide:           1600px;
  --sm-prose-max:                68ch;
  --sm-sidebar-width:            248px;
  --sm-sidebar-collapsed:        64px;
  --sm-top-bar-height:           56px;
  --sm-control-height-sm:        28px;
  --sm-control-height-md:        36px;
  --sm-control-height-lg:        44px;
  --sm-touch-target-min:         44px;

  /* --- MODE-DEPENDENT — light is the default --- */
  /* --- SEMANTIC — the layer products consume. --- */
  --sm-surface-canvas:             var(--sm-neutral-0);
  --sm-surface-sunken:             var(--sm-neutral-50);
  --sm-surface-raised:             var(--sm-neutral-0);
  --sm-surface-overlay:            var(--sm-neutral-0);
  --sm-surface-hover:              var(--sm-neutral-100);
  --sm-surface-active:             var(--sm-neutral-200);
  --sm-surface-brand-tint:         var(--sm-brand-50);
  --sm-surface-brand-deep:         var(--sm-brand-900);
  --sm-surface-scrim:              rgb(22 40 60 / 0.55);
  --sm-border-subtle:              var(--sm-neutral-200);
  --sm-border-default:             var(--sm-neutral-300);
  --sm-border-strong:              var(--sm-neutral-400);
  --sm-border-brand:               rgb(30 111 184 / 0.35);
  --sm-border-focus:               var(--sm-brand-600);
  --sm-text-primary:               var(--sm-brand-900);
  --sm-text-secondary:             var(--sm-neutral-700);
  --sm-text-tertiary:              var(--sm-neutral-500);
  --sm-text-muted:                 var(--sm-neutral-400);
  --sm-text-brand:                 var(--sm-brand-700);
  --sm-text-link:                  var(--sm-brand-600);
  --sm-text-on-brand:              var(--sm-neutral-0);
  --sm-text-inverse:               var(--sm-neutral-0);
  --sm-action-primary-bg:          var(--sm-brand-600);
  --sm-action-primary-bg-hover:    var(--sm-brand-700);
  --sm-action-primary-bg-active:   var(--sm-brand-800);
  --sm-action-primary-fg:          var(--sm-neutral-0);
  --sm-action-secondary-bg:        var(--sm-neutral-0);
  --sm-action-secondary-bg-hover:  var(--sm-neutral-100);
  --sm-action-secondary-bg-active: var(--sm-neutral-200);
  --sm-action-secondary-fg:        var(--sm-neutral-700);
  --sm-action-secondary-border:    var(--sm-neutral-500);
  --sm-action-ghost-bg:            transparent;
  --sm-action-ghost-bg-hover:      var(--sm-neutral-100);
  --sm-action-ghost-fg:            var(--sm-neutral-700);
  --sm-action-danger-bg:           var(--sm-danger-600);
  --sm-action-danger-bg-hover:     var(--sm-danger-700);
  --sm-action-danger-bg-active:    var(--sm-danger-700);
  --sm-action-danger-fg:           var(--sm-neutral-0);
  --sm-status-success-fg:          var(--sm-success-700);
  --sm-status-success-bg:          var(--sm-success-50);
  --sm-status-success-border:      var(--sm-success-100);
  --sm-status-success-solid:       var(--sm-success-600);
  --sm-status-warning-fg:          var(--sm-warning-700);
  --sm-status-warning-bg:          var(--sm-warning-50);
  --sm-status-warning-border:      var(--sm-warning-100);
  --sm-status-warning-solid:       var(--sm-warning-600);
  --sm-status-danger-fg:           var(--sm-danger-700);
  --sm-status-danger-bg:           var(--sm-danger-50);
  --sm-status-danger-border:       var(--sm-danger-100);
  --sm-status-danger-solid:        var(--sm-danger-600);
  --sm-status-info-fg:             var(--sm-cyan-700);
  --sm-status-info-bg:             var(--sm-cyan-50);
  --sm-status-info-border:         var(--sm-cyan-100);
  --sm-status-info-solid:          var(--sm-cyan-600);
  --sm-focus-ring:                 var(--sm-brand-600);
  --sm-focus-ring-offset-color:    var(--sm-neutral-0);
  --sm-chart-series-1:             var(--sm-brand-600);
  --sm-chart-series-2:             var(--sm-success-600);
  --sm-chart-series-3:             var(--sm-cyan-600);
  --sm-chart-series-4:             var(--sm-warning-600);
  --sm-chart-series-5:             var(--sm-neutral-500);
  --sm-chart-series-6:             var(--sm-teal-600);
  --sm-chart-grid:                 var(--sm-neutral-200);
  --sm-chart-axis:                 var(--sm-neutral-500);
  --sm-chart-punchout:             var(--sm-neutral-0);

  /* --- ELEVATION --- */
  --sm-shadow-xs:                  0 1px 2px rgb(22 40 60 / 0.06);
  --sm-shadow-sm:                  0 1px 3px rgb(22 40 60 / 0.10), 0 1px 2px rgb(22 40 60 / 0.06);
  --sm-shadow-md:                  0 4px 12px rgb(22 40 60 / 0.10);
  --sm-shadow-lg:                  0 12px 28px rgb(22 40 60 / 0.12);
  --sm-shadow-xl:                  0 24px 56px rgb(22 40 60 / 0.16);
  --sm-shadow-glow-brand:          0 8px 24px rgb(30 111 184 / 0.25);
  --sm-shadow-glow-cyan:           0 8px 24px rgb(67 184 220 / 0.25);
}

/* System preference: dark — unless a light theme is pinned on the root. */
@media (prefers-color-scheme: dark) {
  :root:not([data-sm-theme='light']) {
    /* --- SEMANTIC — the layer products consume. --- */
    --sm-surface-canvas:             var(--sm-neutral-900);
    --sm-surface-sunken:             var(--sm-neutral-950);
    --sm-surface-raised:             var(--sm-neutral-800);
    --sm-surface-overlay:            var(--sm-neutral-800);
    --sm-surface-hover:              var(--sm-neutral-700);
    --sm-surface-active:             var(--sm-neutral-600);
    --sm-surface-brand-tint:         rgb(47 135 212 / 0.10);
    --sm-surface-brand-deep:         var(--sm-brand-900);
    --sm-surface-scrim:              rgb(8 15 26 / 0.72);
    --sm-border-subtle:              var(--sm-neutral-800);
    --sm-border-default:             var(--sm-neutral-700);
    --sm-border-strong:              var(--sm-neutral-600);
    --sm-border-brand:               rgb(47 135 212 / 0.40);
    --sm-border-focus:               var(--sm-brand-500);
    --sm-text-primary:               var(--sm-neutral-100);
    --sm-text-secondary:             var(--sm-neutral-300);
    --sm-text-tertiary:              var(--sm-neutral-400);
    --sm-text-muted:                 var(--sm-neutral-500);
    --sm-text-brand:                 var(--sm-brand-400);
    --sm-text-link:                  var(--sm-brand-400);
    --sm-text-on-brand:              var(--sm-neutral-0);
    --sm-text-inverse:               var(--sm-brand-900);
    --sm-action-primary-bg:          var(--sm-brand-600);
    --sm-action-primary-bg-hover:    var(--sm-brand-700);
    --sm-action-primary-bg-active:   var(--sm-brand-800);
    --sm-action-primary-fg:          var(--sm-neutral-0);
    --sm-action-secondary-bg:        var(--sm-neutral-800);
    --sm-action-secondary-bg-hover:  var(--sm-neutral-700);
    --sm-action-secondary-bg-active: var(--sm-neutral-600);
    --sm-action-secondary-fg:        var(--sm-neutral-300);
    --sm-action-secondary-border:    var(--sm-neutral-500);
    --sm-action-ghost-bg:            transparent;
    --sm-action-ghost-bg-hover:      var(--sm-neutral-700);
    --sm-action-ghost-fg:            var(--sm-neutral-300);
    --sm-action-danger-bg:           var(--sm-danger-600);
    --sm-action-danger-bg-hover:     var(--sm-danger-700);
    --sm-action-danger-bg-active:    var(--sm-danger-700);
    --sm-action-danger-fg:           var(--sm-neutral-0);
    --sm-status-success-fg:          var(--sm-success-500);
    --sm-status-success-bg:          rgb(16 185 129 / 0.15);
    --sm-status-success-border:      rgb(16 185 129 / 0.40);
    --sm-status-success-solid:       var(--sm-success-500);
    --sm-status-warning-fg:          var(--sm-warning-500);
    --sm-status-warning-bg:          rgb(245 158 11 / 0.15);
    --sm-status-warning-border:      rgb(245 158 11 / 0.40);
    --sm-status-warning-solid:       var(--sm-warning-500);
    --sm-status-danger-fg:           var(--sm-danger-400);
    --sm-status-danger-bg:           rgb(239 68 68 / 0.15);
    --sm-status-danger-border:       rgb(239 68 68 / 0.40);
    --sm-status-danger-solid:        var(--sm-danger-500);
    --sm-status-info-fg:             var(--sm-cyan-400);
    --sm-status-info-bg:             rgb(67 184 220 / 0.15);
    --sm-status-info-border:         rgb(67 184 220 / 0.40);
    --sm-status-info-solid:          var(--sm-cyan-500);
    --sm-focus-ring:                 var(--sm-brand-500);
    --sm-focus-ring-offset-color:    var(--sm-neutral-900);
    --sm-chart-series-1:             var(--sm-brand-500);
    --sm-chart-series-2:             var(--sm-success-500);
    --sm-chart-series-3:             var(--sm-cyan-400);
    --sm-chart-series-4:             var(--sm-warning-500);
    --sm-chart-series-5:             var(--sm-neutral-400);
    --sm-chart-series-6:             var(--sm-teal-500);
    --sm-chart-grid:                 var(--sm-neutral-800);
    --sm-chart-axis:                 var(--sm-neutral-400);
    --sm-chart-punchout:             var(--sm-neutral-900);

    /* --- ELEVATION --- */
    --sm-shadow-xs:                  0 1px 2px rgb(0 0 0 / 0.40);
    --sm-shadow-sm:                  0 1px 3px rgb(0 0 0 / 0.50);
    --sm-shadow-md:                  0 4px 12px rgb(0 0 0 / 0.50);
    --sm-shadow-lg:                  0 12px 28px rgb(0 0 0 / 0.55);
    --sm-shadow-xl:                  0 24px 56px rgb(0 0 0 / 0.60);
    --sm-shadow-glow-brand:          0 8px 24px rgb(47 135 212 / 0.25);
    --sm-shadow-glow-cyan:           0 8px 24px rgb(67 184 220 / 0.25);
  }
}

/* Explicit attribute always wins over the media query. */
[data-sm-theme='dark'] {
  color-scheme: dark;
  /* --- SEMANTIC — the layer products consume. --- */
  --sm-surface-canvas:             var(--sm-neutral-900);
  --sm-surface-sunken:             var(--sm-neutral-950);
  --sm-surface-raised:             var(--sm-neutral-800);
  --sm-surface-overlay:            var(--sm-neutral-800);
  --sm-surface-hover:              var(--sm-neutral-700);
  --sm-surface-active:             var(--sm-neutral-600);
  --sm-surface-brand-tint:         rgb(47 135 212 / 0.10);
  --sm-surface-brand-deep:         var(--sm-brand-900);
  --sm-surface-scrim:              rgb(8 15 26 / 0.72);
  --sm-border-subtle:              var(--sm-neutral-800);
  --sm-border-default:             var(--sm-neutral-700);
  --sm-border-strong:              var(--sm-neutral-600);
  --sm-border-brand:               rgb(47 135 212 / 0.40);
  --sm-border-focus:               var(--sm-brand-500);
  --sm-text-primary:               var(--sm-neutral-100);
  --sm-text-secondary:             var(--sm-neutral-300);
  --sm-text-tertiary:              var(--sm-neutral-400);
  --sm-text-muted:                 var(--sm-neutral-500);
  --sm-text-brand:                 var(--sm-brand-400);
  --sm-text-link:                  var(--sm-brand-400);
  --sm-text-on-brand:              var(--sm-neutral-0);
  --sm-text-inverse:               var(--sm-brand-900);
  --sm-action-primary-bg:          var(--sm-brand-600);
  --sm-action-primary-bg-hover:    var(--sm-brand-700);
  --sm-action-primary-bg-active:   var(--sm-brand-800);
  --sm-action-primary-fg:          var(--sm-neutral-0);
  --sm-action-secondary-bg:        var(--sm-neutral-800);
  --sm-action-secondary-bg-hover:  var(--sm-neutral-700);
  --sm-action-secondary-bg-active: var(--sm-neutral-600);
  --sm-action-secondary-fg:        var(--sm-neutral-300);
  --sm-action-secondary-border:    var(--sm-neutral-500);
  --sm-action-ghost-bg:            transparent;
  --sm-action-ghost-bg-hover:      var(--sm-neutral-700);
  --sm-action-ghost-fg:            var(--sm-neutral-300);
  --sm-action-danger-bg:           var(--sm-danger-600);
  --sm-action-danger-bg-hover:     var(--sm-danger-700);
  --sm-action-danger-bg-active:    var(--sm-danger-700);
  --sm-action-danger-fg:           var(--sm-neutral-0);
  --sm-status-success-fg:          var(--sm-success-500);
  --sm-status-success-bg:          rgb(16 185 129 / 0.15);
  --sm-status-success-border:      rgb(16 185 129 / 0.40);
  --sm-status-success-solid:       var(--sm-success-500);
  --sm-status-warning-fg:          var(--sm-warning-500);
  --sm-status-warning-bg:          rgb(245 158 11 / 0.15);
  --sm-status-warning-border:      rgb(245 158 11 / 0.40);
  --sm-status-warning-solid:       var(--sm-warning-500);
  --sm-status-danger-fg:           var(--sm-danger-400);
  --sm-status-danger-bg:           rgb(239 68 68 / 0.15);
  --sm-status-danger-border:       rgb(239 68 68 / 0.40);
  --sm-status-danger-solid:        var(--sm-danger-500);
  --sm-status-info-fg:             var(--sm-cyan-400);
  --sm-status-info-bg:             rgb(67 184 220 / 0.15);
  --sm-status-info-border:         rgb(67 184 220 / 0.40);
  --sm-status-info-solid:          var(--sm-cyan-500);
  --sm-focus-ring:                 var(--sm-brand-500);
  --sm-focus-ring-offset-color:    var(--sm-neutral-900);
  --sm-chart-series-1:             var(--sm-brand-500);
  --sm-chart-series-2:             var(--sm-success-500);
  --sm-chart-series-3:             var(--sm-cyan-400);
  --sm-chart-series-4:             var(--sm-warning-500);
  --sm-chart-series-5:             var(--sm-neutral-400);
  --sm-chart-series-6:             var(--sm-teal-500);
  --sm-chart-grid:                 var(--sm-neutral-800);
  --sm-chart-axis:                 var(--sm-neutral-400);
  --sm-chart-punchout:             var(--sm-neutral-900);

  /* --- ELEVATION --- */
  --sm-shadow-xs:                  0 1px 2px rgb(0 0 0 / 0.40);
  --sm-shadow-sm:                  0 1px 3px rgb(0 0 0 / 0.50);
  --sm-shadow-md:                  0 4px 12px rgb(0 0 0 / 0.50);
  --sm-shadow-lg:                  0 12px 28px rgb(0 0 0 / 0.55);
  --sm-shadow-xl:                  0 24px 56px rgb(0 0 0 / 0.60);
  --sm-shadow-glow-brand:          0 8px 24px rgb(47 135 212 / 0.25);
  --sm-shadow-glow-cyan:           0 8px 24px rgb(67 184 220 / 0.25);
}

[data-sm-theme='light'] {
  color-scheme: light;
  /* --- SEMANTIC — the layer products consume. --- */
  --sm-surface-canvas:             var(--sm-neutral-0);
  --sm-surface-sunken:             var(--sm-neutral-50);
  --sm-surface-raised:             var(--sm-neutral-0);
  --sm-surface-overlay:            var(--sm-neutral-0);
  --sm-surface-hover:              var(--sm-neutral-100);
  --sm-surface-active:             var(--sm-neutral-200);
  --sm-surface-brand-tint:         var(--sm-brand-50);
  --sm-surface-brand-deep:         var(--sm-brand-900);
  --sm-surface-scrim:              rgb(22 40 60 / 0.55);
  --sm-border-subtle:              var(--sm-neutral-200);
  --sm-border-default:             var(--sm-neutral-300);
  --sm-border-strong:              var(--sm-neutral-400);
  --sm-border-brand:               rgb(30 111 184 / 0.35);
  --sm-border-focus:               var(--sm-brand-600);
  --sm-text-primary:               var(--sm-brand-900);
  --sm-text-secondary:             var(--sm-neutral-700);
  --sm-text-tertiary:              var(--sm-neutral-500);
  --sm-text-muted:                 var(--sm-neutral-400);
  --sm-text-brand:                 var(--sm-brand-700);
  --sm-text-link:                  var(--sm-brand-600);
  --sm-text-on-brand:              var(--sm-neutral-0);
  --sm-text-inverse:               var(--sm-neutral-0);
  --sm-action-primary-bg:          var(--sm-brand-600);
  --sm-action-primary-bg-hover:    var(--sm-brand-700);
  --sm-action-primary-bg-active:   var(--sm-brand-800);
  --sm-action-primary-fg:          var(--sm-neutral-0);
  --sm-action-secondary-bg:        var(--sm-neutral-0);
  --sm-action-secondary-bg-hover:  var(--sm-neutral-100);
  --sm-action-secondary-bg-active: var(--sm-neutral-200);
  --sm-action-secondary-fg:        var(--sm-neutral-700);
  --sm-action-secondary-border:    var(--sm-neutral-500);
  --sm-action-ghost-bg:            transparent;
  --sm-action-ghost-bg-hover:      var(--sm-neutral-100);
  --sm-action-ghost-fg:            var(--sm-neutral-700);
  --sm-action-danger-bg:           var(--sm-danger-600);
  --sm-action-danger-bg-hover:     var(--sm-danger-700);
  --sm-action-danger-bg-active:    var(--sm-danger-700);
  --sm-action-danger-fg:           var(--sm-neutral-0);
  --sm-status-success-fg:          var(--sm-success-700);
  --sm-status-success-bg:          var(--sm-success-50);
  --sm-status-success-border:      var(--sm-success-100);
  --sm-status-success-solid:       var(--sm-success-600);
  --sm-status-warning-fg:          var(--sm-warning-700);
  --sm-status-warning-bg:          var(--sm-warning-50);
  --sm-status-warning-border:      var(--sm-warning-100);
  --sm-status-warning-solid:       var(--sm-warning-600);
  --sm-status-danger-fg:           var(--sm-danger-700);
  --sm-status-danger-bg:           var(--sm-danger-50);
  --sm-status-danger-border:       var(--sm-danger-100);
  --sm-status-danger-solid:        var(--sm-danger-600);
  --sm-status-info-fg:             var(--sm-cyan-700);
  --sm-status-info-bg:             var(--sm-cyan-50);
  --sm-status-info-border:         var(--sm-cyan-100);
  --sm-status-info-solid:          var(--sm-cyan-600);
  --sm-focus-ring:                 var(--sm-brand-600);
  --sm-focus-ring-offset-color:    var(--sm-neutral-0);
  --sm-chart-series-1:             var(--sm-brand-600);
  --sm-chart-series-2:             var(--sm-success-600);
  --sm-chart-series-3:             var(--sm-cyan-600);
  --sm-chart-series-4:             var(--sm-warning-600);
  --sm-chart-series-5:             var(--sm-neutral-500);
  --sm-chart-series-6:             var(--sm-teal-600);
  --sm-chart-grid:                 var(--sm-neutral-200);
  --sm-chart-axis:                 var(--sm-neutral-500);
  --sm-chart-punchout:             var(--sm-neutral-0);

  /* --- ELEVATION --- */
  --sm-shadow-xs:                  0 1px 2px rgb(22 40 60 / 0.06);
  --sm-shadow-sm:                  0 1px 3px rgb(22 40 60 / 0.10), 0 1px 2px rgb(22 40 60 / 0.06);
  --sm-shadow-md:                  0 4px 12px rgb(22 40 60 / 0.10);
  --sm-shadow-lg:                  0 12px 28px rgb(22 40 60 / 0.12);
  --sm-shadow-xl:                  0 24px 56px rgb(22 40 60 / 0.16);
  --sm-shadow-glow-brand:          0 8px 24px rgb(30 111 184 / 0.25);
  --sm-shadow-glow-cyan:           0 8px 24px rgb(67 184 220 / 0.25);
}