/*
 * SYMBIO PRACTICE — Foundations v0.9
 * Default theme: Dark Symbiotic
 * Adaptive Membrane paths are versioned assets, not CSS variables.
 */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Primitives */
  --sp-neural-black: #160d18;
  --sp-deep-tissue: #25141f;
  --sp-membrane: #39232f;
  --sp-bone-white: #fff7f2;
  --sp-body-mist: #bfaeb4;
  --sp-pulse-coral: #ff5d7e;
  --sp-synapse-violet: #b36cff;
  --sp-symbiotic-mint: #60f0d0;
  --sp-mutation-lime: #a8ff6a;

  /* Semantic aliases */
  --sp-color-canvas: var(--sp-neural-black);
  --sp-color-surface: var(--sp-deep-tissue);
  --sp-color-surface-secondary: var(--sp-membrane);
  --sp-color-input: var(--sp-membrane);
  --sp-color-text-primary: var(--sp-bone-white);
  --sp-color-text-secondary: var(--sp-body-mist);
  --sp-color-brand: var(--sp-pulse-coral);
  --sp-color-action-primary: var(--sp-pulse-coral);
  --sp-color-ai: var(--sp-synapse-violet);
  --sp-color-personalized: var(--sp-synapse-violet);
  --sp-color-health: var(--sp-symbiotic-mint);
  --sp-color-progress: var(--sp-symbiotic-mint);
  --sp-color-experimental: var(--sp-mutation-lime);

  /* Motion foundation */
  --sp-motion-duration-immediate: 100ms;
  --sp-motion-duration-state: 180ms;
  --sp-motion-duration-response: 240ms;
  --sp-motion-duration-transition: 420ms;
  --sp-motion-duration-deliberate: 500ms;
  --sp-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --sp-motion-easing-emphasized-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --sp-motion-easing-emphasized-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --sp-motion-easing-linear: linear;

  /* Symbiont Presence candidate roles */
  --sp-symbiont-shell: var(--sp-pulse-coral);
  --sp-symbiont-visor: var(--sp-deep-tissue);
  --sp-symbiont-led: var(--sp-bone-white);
  --sp-symbiont-accent: var(--sp-pulse-coral);
  --sp-symbiont-response-duration: var(--sp-motion-duration-response);
  --sp-symbiont-transition-duration: var(--sp-motion-duration-transition);
  --sp-symbiont-easing: var(--sp-motion-easing-emphasized-enter);

  /* System states */
  --sp-color-success: #60f0d0;
  --sp-color-warning: #ffb45c;
  --sp-color-error: #ff4664;
  --sp-color-info: #8da8ff;
  --sp-color-disabled: #786571;

  /* Button hierarchy, tone, and state layers */
  --sp-button-primary-background: var(--sp-color-action-primary);
  --sp-button-primary-foreground: var(--sp-neural-black);
  --sp-button-primary-border: transparent;
  --sp-button-secondary-background: var(--sp-surface-container);
  --sp-button-secondary-foreground: var(--sp-color-text-primary);
  --sp-button-secondary-border: var(--sp-border-default);
  --sp-button-tertiary-background: transparent;
  --sp-button-tertiary-foreground: var(--sp-color-action-primary);
  --sp-button-tertiary-border: transparent;
  --sp-button-critical-primary-background: var(--sp-color-error);
  --sp-button-critical-primary-foreground: var(--sp-neural-black);
  --sp-button-critical-primary-border: transparent;
  --sp-button-critical-tertiary-background: transparent;
  --sp-button-critical-tertiary-foreground: var(--sp-color-error);
  --sp-button-critical-tertiary-border: transparent;
  --sp-button-disabled-background: rgb(120 101 113 / 24%);
  --sp-button-disabled-foreground: var(--sp-color-disabled);
  --sp-button-disabled-border: rgb(120 101 113 / 48%);
  --sp-button-layer-neutral-hover: rgb(255 247 242 / 10%);
  --sp-button-layer-neutral-pressed: rgb(22 13 24 / 16%);
  --sp-button-layer-action-hover: rgb(255 93 126 / 10%);
  --sp-button-layer-action-pressed: rgb(255 93 126 / 16%);
  --sp-button-layer-critical-hover: rgb(255 70 100 / 10%);
  --sp-button-layer-critical-pressed: rgb(255 70 100 / 16%);

  /* Gradients */
  --sp-gradient-symbiotic-pulse:
    linear-gradient(
      135deg,
      #ff5d7e 0%,
      #b36cff 52%,
      #60f0d0 100%
    );
  --sp-gradient-action-pulse:
    linear-gradient(110deg, #ff5d7e, #b36cff);
  --sp-color-on-action-pulse: var(--sp-neural-black);

  /* Elevation surfaces */
  --sp-surface-canvas: var(--sp-neural-black);
  --sp-surface-container: var(--sp-deep-tissue);
  --sp-surface-raised: var(--sp-deep-tissue);
  --sp-surface-floating: var(--sp-deep-tissue);
  --sp-surface-overlay: var(--sp-membrane);
  --sp-surface-modal: var(--sp-membrane);
  --sp-surface-on-media: rgb(22 13 24 / 88%);

  /* Shape and stroke boundaries */
  --sp-border-subtle: rgb(255 247 242 / 8%);
  --sp-border-default: rgb(255 247 242 / 36%);
  --sp-border-strong: rgb(255 247 242 / 64%);
  --sp-border-interactive: var(--sp-pulse-coral);
  --sp-border-selected: var(--sp-pulse-coral);
  --sp-border-inverse: var(--sp-neural-black);
  --sp-border-on-media: var(--sp-bone-white);
  --sp-border-info: var(--sp-color-info);
  --sp-border-success: var(--sp-color-success);
  --sp-border-warning: var(--sp-color-warning);
  --sp-border-critical: var(--sp-color-error);
  --sp-focus-ring-color: var(--sp-symbiotic-mint);
  --sp-focus-ring-inverse: var(--sp-neural-black);
  --sp-focus-ring-on-media-light: var(--sp-bone-white);
  --sp-focus-ring-on-media-dark: var(--sp-neural-black);
  --sp-focus-ring-guard: var(--sp-neural-black);

  /* Dark-mode shadows prioritize tonal separation. */
  --sp-shadow-soft-1: none;
  --sp-shadow-soft-2: 0 2px 6px rgb(22 13 24 / 18%);
  --sp-shadow-soft-3: 0 6px 16px rgb(22 13 24 / 22%);
  --sp-shadow-soft-4: 0 10px 28px rgb(22 13 24 / 26%);

  /* Theme-specific material surfaces and opaque fallbacks */
  --sp-material-control-surface: rgb(37 20 31 / 92%);
  --sp-material-control-fallback: var(--sp-deep-tissue);
  --sp-material-overlay-surface: rgb(57 35 47 / 94%);
  --sp-material-overlay-fallback: var(--sp-membrane);
  --sp-material-on-media-surface: rgb(22 13 24 / 76%);
  --sp-material-on-media-fallback: var(--sp-deep-tissue);
}

[data-theme="light"] {
  color-scheme: light;

  /* Light-theme primitives */
  --sp-skin-canvas: #f7efec;
  --sp-warm-surface: #fff9f6;
  --sp-organic-ink: #26131c;
  --sp-deep-coral: #c52f5d;
  --sp-soft-membrane: #e9d9dd;

  /* Semantic aliases */
  --sp-color-canvas: var(--sp-skin-canvas);
  --sp-color-surface: var(--sp-warm-surface);
  --sp-color-surface-secondary: var(--sp-warm-surface);
  --sp-color-input: var(--sp-warm-surface);
  --sp-color-text-primary: var(--sp-organic-ink);
  --sp-color-text-secondary: var(--sp-organic-ink);
  --sp-color-brand: var(--sp-deep-coral);
  --sp-color-action-primary: var(--sp-deep-coral);
  --sp-color-divider: var(--sp-soft-membrane);
  --sp-color-inactive: var(--sp-soft-membrane);
  --sp-color-success: #087a68;
  --sp-color-warning: #8a4d00;
  --sp-color-error: var(--sp-deep-coral);
  --sp-color-info: #3f55b5;

  /* Symbiont Presence candidate roles */
  --sp-symbiont-shell: var(--sp-deep-coral);
  --sp-symbiont-visor: var(--sp-organic-ink);
  --sp-symbiont-led: var(--sp-skin-canvas);
  --sp-symbiont-accent: var(--sp-deep-coral);

  /* Button hierarchy, tone, and state layers */
  --sp-button-primary-background: var(--sp-color-action-primary);
  --sp-button-primary-foreground: var(--sp-bone-white);
  --sp-button-primary-border: transparent;
  --sp-button-secondary-background: var(--sp-surface-container);
  --sp-button-secondary-foreground: var(--sp-color-text-primary);
  --sp-button-secondary-border: var(--sp-border-default);
  --sp-button-tertiary-background: transparent;
  --sp-button-tertiary-foreground: var(--sp-color-action-primary);
  --sp-button-tertiary-border: transparent;
  --sp-button-critical-primary-background: var(--sp-color-error);
  --sp-button-critical-primary-foreground: var(--sp-bone-white);
  --sp-button-critical-primary-border: transparent;
  --sp-button-critical-tertiary-background: transparent;
  --sp-button-critical-tertiary-foreground: var(--sp-color-error);
  --sp-button-critical-tertiary-border: transparent;
  --sp-button-disabled-background: var(--sp-soft-membrane);
  --sp-button-disabled-foreground: rgb(38 19 28 / 48%);
  --sp-button-disabled-border: rgb(38 19 28 / 24%);
  --sp-button-layer-neutral-hover: rgb(38 19 28 / 8%);
  --sp-button-layer-neutral-pressed: rgb(38 19 28 / 14%);
  --sp-button-layer-action-hover: rgb(197 47 93 / 8%);
  --sp-button-layer-action-pressed: rgb(197 47 93 / 14%);
  --sp-button-layer-critical-hover: rgb(197 47 93 / 8%);
  --sp-button-layer-critical-pressed: rgb(197 47 93 / 14%);

  /* Elevation surfaces */
  --sp-surface-canvas: var(--sp-skin-canvas);
  --sp-surface-container: var(--sp-warm-surface);
  --sp-surface-raised: var(--sp-warm-surface);
  --sp-surface-floating: var(--sp-warm-surface);
  --sp-surface-overlay: var(--sp-warm-surface);
  --sp-surface-modal: var(--sp-warm-surface);
  --sp-surface-on-media: rgb(22 13 24 / 88%);

  /* Shape and stroke boundaries */
  --sp-border-subtle: rgb(38 19 28 / 8%);
  --sp-border-default: rgb(38 19 28 / 48%);
  --sp-border-strong: rgb(38 19 28 / 64%);
  --sp-border-interactive: var(--sp-deep-coral);
  --sp-border-selected: var(--sp-deep-coral);
  --sp-border-inverse: var(--sp-bone-white);
  --sp-border-on-media: var(--sp-bone-white);
  --sp-border-info: var(--sp-color-info);
  --sp-border-success: var(--sp-color-success);
  --sp-border-warning: var(--sp-color-warning);
  --sp-border-critical: var(--sp-color-error);
  --sp-focus-ring-color: var(--sp-deep-coral);
  --sp-focus-ring-inverse: var(--sp-bone-white);
  --sp-focus-ring-on-media-light: var(--sp-bone-white);
  --sp-focus-ring-on-media-dark: var(--sp-neural-black);
  --sp-focus-ring-guard: var(--sp-neural-black);

  /* Light-mode shadows provide more visible separation. */
  --sp-shadow-soft-1:
    0 1px 2px rgb(22 13 24 / 8%),
    0 3px 8px rgb(22 13 24 / 5%);
  --sp-shadow-soft-2:
    0 4px 12px rgb(22 13 24 / 12%),
    0 1px 3px rgb(22 13 24 / 6%);
  --sp-shadow-soft-3:
    0 8px 24px rgb(22 13 24 / 16%),
    0 2px 8px rgb(22 13 24 / 8%);
  --sp-shadow-soft-4:
    0 16px 48px rgb(22 13 24 / 22%),
    0 4px 12px rgb(22 13 24 / 10%);

  /* Theme-specific material surfaces and opaque fallbacks */
  --sp-material-control-surface: rgb(255 249 246 / 94%);
  --sp-material-control-fallback: var(--sp-warm-surface);
  --sp-material-overlay-surface: rgb(255 249 246 / 96%);
  --sp-material-overlay-fallback: var(--sp-warm-surface);
  --sp-material-on-media-surface: rgb(22 13 24 / 76%);
  --sp-material-on-media-fallback: var(--sp-deep-tissue);
}

:root {
  /* Shape primitives */
  --sp-radius-0: 0;
  --sp-radius-xs: 0.25rem;
  --sp-radius-s: 0.5rem;
  --sp-radius-m: 0.75rem;
  --sp-radius-l: 1rem;
  --sp-radius-xl: 1.5rem;
  --sp-radius-2xl: 2rem;
  --sp-radius-full: 999rem;

  /* Semantic shapes */
  --sp-shape-control-small: var(--sp-radius-s);
  --sp-shape-control-default: var(--sp-radius-m);
  --sp-shape-control-large: var(--sp-radius-l);
  --sp-shape-control-checkbox: var(--sp-radius-xs);
  --sp-shape-icon-button-default: var(--sp-radius-m);
  --sp-shape-icon-button-circle: 50%;
  --sp-shape-card-compact: var(--sp-radius-m);
  --sp-shape-card-default: var(--sp-radius-l);
  --sp-shape-card-feature: var(--sp-radius-xl);
  --sp-shape-media-inline: var(--sp-radius-l);
  --sp-shape-media-feature: var(--sp-radius-xl);
  --sp-shape-media-full-bleed: var(--sp-radius-0);
  --sp-shape-overlay-tooltip: var(--sp-radius-s);
  --sp-shape-overlay-popover: var(--sp-radius-m);
  --sp-shape-overlay-modal: var(--sp-radius-xl);
  --sp-shape-overlay-sheet: var(--sp-radius-2xl);
  --sp-shape-pill: var(--sp-radius-full);
  --sp-shape-circle: 50%;

  /* Border widths. Hairline may map to a native renderer value. */
  --sp-border-width-0: 0;
  --sp-border-width-hairline: 1px;
  --sp-border-width-1: 1px;
  --sp-border-width-2: 2px;
  --sp-border-width-3: 3px;

  /* Permanent stroke recipes */
  --sp-stroke-surface-width: var(--sp-border-width-1);
  --sp-stroke-surface-color: var(--sp-border-subtle);
  --sp-stroke-control-width: var(--sp-border-width-1);
  --sp-stroke-control-color: var(--sp-border-default);
  --sp-stroke-interactive-width: var(--sp-border-width-1);
  --sp-stroke-interactive-color: var(--sp-border-interactive);
  --sp-stroke-selected-width: var(--sp-border-width-2);
  --sp-stroke-selected-color: var(--sp-border-selected);
  --sp-stroke-critical-width: var(--sp-border-width-1);
  --sp-stroke-critical-color: var(--sp-border-critical);

  /* Elevation primitives and semantic recipes */
  --sp-shadow-none: none;

  --sp-elevation-base-shadow: var(--sp-shadow-none);
  --sp-elevation-raised-shadow: var(--sp-shadow-soft-1);
  --sp-elevation-floating-shadow: var(--sp-shadow-soft-2);
  --sp-elevation-overlay-shadow: var(--sp-shadow-soft-3);
  --sp-elevation-modal-shadow: var(--sp-shadow-soft-4);

  --sp-elevation-raised-surface: var(--sp-surface-raised);
  --sp-elevation-floating-surface: var(--sp-surface-floating);
  --sp-elevation-overlay-surface: var(--sp-surface-overlay);
  --sp-elevation-modal-surface: var(--sp-surface-modal);

  --sp-elevation-raised-border: var(--sp-border-subtle);
  --sp-elevation-floating-border: var(--sp-border-subtle);
  --sp-elevation-overlay-border: var(--sp-border-default);
  --sp-elevation-modal-border: var(--sp-border-default);

  /* Focus is an interaction state, not an elevation effect. */
  --sp-focus-ring-width: 2px;
  --sp-focus-ring-enhanced-width: 3px;
  --sp-focus-ring-gap: 2px;
  --sp-focus-ring-offset: var(--sp-focus-ring-gap);
  --sp-focus-ring-guard-width: 2px;

  /* Scrims restrict context; media overlays only improve readability. */
  --sp-scrim-none: rgb(22 13 24 / 0%);
  --sp-scrim-soft: rgb(22 13 24 / 24%);
  --sp-scrim-modal: rgb(22 13 24 / 44%);
  --sp-scrim-immersive: rgb(22 13 24 / 56%);
  --sp-media-overlay-controls:
    linear-gradient(
      180deg,
      rgb(22 13 24 / 0%) 0%,
      rgb(22 13 24 / 72%) 100%
    );

  /* Backdrop recipes always require the theme-specific opaque fallback. */
  --sp-material-none-backdrop: none;
  --sp-material-control-backdrop: blur(12px) saturate(110%);
  --sp-material-overlay-backdrop: blur(16px) saturate(115%);
  --sp-material-on-media-backdrop: blur(20px) saturate(120%);

  /* Global portal layers. Raised is local whenever possible. */
  --sp-z-base: 0;
  --sp-z-raised: 10;
  --sp-z-sticky: 20;
  --sp-z-dropdown: 30;
  --sp-z-overlay: 40;
  --sp-z-modal: 50;

  /* Elevation transition guidance */
  --sp-elevation-duration-press: 100ms;
  --sp-elevation-duration-state: 140ms;
  --sp-elevation-duration-overlay: 200ms;
  --sp-elevation-duration-modal: 260ms;
  --sp-elevation-easing: cubic-bezier(0.2, 0, 0, 1);

  /* Human, Symbiont, atmospheric display, and system roles */
  --sp-font-human:
    "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sp-font-symbiont:
    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --sp-font-display:
    "Unbounded", "Onest", system-ui, sans-serif;
  --sp-font-system:
    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Mobile semantic type scale */
  --sp-type-display-hero-family: var(--sp-font-display);
  --sp-type-display-hero-weight: 500;
  --sp-type-display-hero-size: 2.75rem;
  --sp-type-display-hero-line: 3rem;
  --sp-type-display-hero-tracking: -0.02em;

  --sp-type-display-large-family: var(--sp-font-display);
  --sp-type-display-large-weight: 550;
  --sp-type-display-large-size: 2.25rem;
  --sp-type-display-large-line: 2.5rem;
  --sp-type-display-large-tracking: -0.015em;

  --sp-type-display-medium-family: var(--sp-font-display);
  --sp-type-display-medium-weight: 550;
  --sp-type-display-medium-size: 1.75rem;
  --sp-type-display-medium-line: 2.125rem;
  --sp-type-display-medium-tracking: -0.01em;

  --sp-type-heading-h1-family: var(--sp-font-human);
  --sp-type-heading-h1-weight: 600;
  --sp-type-heading-h1-size: 2rem;
  --sp-type-heading-h1-line: 2.375rem;
  --sp-type-heading-h1-tracking: -0.015em;

  --sp-type-heading-h2-family: var(--sp-font-human);
  --sp-type-heading-h2-weight: 600;
  --sp-type-heading-h2-size: 1.625rem;
  --sp-type-heading-h2-line: 2rem;
  --sp-type-heading-h2-tracking: -0.01em;

  --sp-type-heading-h3-family: var(--sp-font-human);
  --sp-type-heading-h3-weight: 600;
  --sp-type-heading-h3-size: 1.375rem;
  --sp-type-heading-h3-line: 1.75rem;
  --sp-type-heading-h3-tracking: -0.005em;

  --sp-type-title-large-family: var(--sp-font-human);
  --sp-type-title-large-weight: 600;
  --sp-type-title-large-size: 1.25rem;
  --sp-type-title-large-line: 1.625rem;
  --sp-type-title-large-tracking: -0.0025em;

  --sp-type-title-medium-family: var(--sp-font-human);
  --sp-type-title-medium-weight: 600;
  --sp-type-title-medium-size: 1.125rem;
  --sp-type-title-medium-line: 1.5rem;
  --sp-type-title-medium-tracking: 0;

  --sp-type-body-large-family: var(--sp-font-human);
  --sp-type-body-large-weight: 400;
  --sp-type-body-large-size: 1.0625rem;
  --sp-type-body-large-line: 1.625rem;
  --sp-type-body-large-tracking: 0;

  --sp-type-body-medium-family: var(--sp-font-human);
  --sp-type-body-medium-weight: 400;
  --sp-type-body-medium-size: 1rem;
  --sp-type-body-medium-line: 1.5rem;
  --sp-type-body-medium-tracking: 0;

  --sp-type-body-small-family: var(--sp-font-human);
  --sp-type-body-small-weight: 400;
  --sp-type-body-small-size: 0.875rem;
  --sp-type-body-small-line: 1.25rem;
  --sp-type-body-small-tracking: 0;

  --sp-type-label-large-family: var(--sp-font-human);
  --sp-type-label-large-weight: 600;
  --sp-type-label-large-size: 1rem;
  --sp-type-label-large-line: 1.25rem;
  --sp-type-label-large-tracking: 0;

  --sp-type-label-medium-family: var(--sp-font-human);
  --sp-type-label-medium-weight: 500;
  --sp-type-label-medium-size: 0.875rem;
  --sp-type-label-medium-line: 1.125rem;
  --sp-type-label-medium-tracking: 0.0025em;

  --sp-type-label-small-family: var(--sp-font-human);
  --sp-type-label-small-weight: 500;
  --sp-type-label-small-size: 0.75rem;
  --sp-type-label-small-line: 1rem;
  --sp-type-label-small-tracking: 0.005em;

  --sp-type-symbiont-message-family: var(--sp-font-symbiont);
  --sp-type-symbiont-message-weight: 400;
  --sp-type-symbiont-message-size: 1.0625rem;
  --sp-type-symbiont-message-line: 1.5625rem;
  --sp-type-symbiont-message-tracking: 0.005em;

  --sp-type-meta-medium-family: var(--sp-font-system);
  --sp-type-meta-medium-weight: 500;
  --sp-type-meta-medium-size: 0.8125rem;
  --sp-type-meta-medium-line: 1.125rem;
  --sp-type-meta-medium-tracking: 0.01em;

  --sp-type-meta-small-family: var(--sp-font-system);
  --sp-type-meta-small-weight: 400;
  --sp-type-meta-small-size: 0.6875rem;
  --sp-type-meta-small-line: 1rem;
  --sp-type-meta-small-tracking: 0.015em;

  --sp-type-meta-numerals: "tnum" 1;

  /* Desktop maxima; interpolate through product breakpoints. */
  --sp-type-display-hero-max-size: 4.5rem;
  --sp-type-display-hero-max-line: 4.75rem;
  --sp-type-display-large-max-size: 3.5rem;
  --sp-type-display-large-max-line: 3.875rem;
  --sp-type-display-medium-max-size: 2.5rem;
  --sp-type-display-medium-max-line: 2.875rem;
  --sp-type-heading-h1-max-size: 2.75rem;
  --sp-type-heading-h1-max-line: 3.25rem;
  --sp-type-body-large-max-size: 1.125rem;
  --sp-type-body-large-max-line: 1.75rem;
  --sp-type-body-medium-max-size: 1rem;
  --sp-type-body-medium-max-line: 1.5625rem;
}

:root {
  /* Primitive spacing. The 2px half-step is optical only. */
  --sp-space-0: 0;
  --sp-space-half: 0.125rem;
  --sp-space-1: 0.25rem;
  --sp-space-2: 0.5rem;
  --sp-space-3: 0.75rem;
  --sp-space-4: 1rem;
  --sp-space-5: 1.25rem;
  --sp-space-6: 1.5rem;
  --sp-space-8: 2rem;
  --sp-space-10: 2.5rem;
  --sp-space-12: 3rem;
  --sp-space-16: 4rem;
  --sp-space-20: 5rem;
  --sp-space-24: 6rem;

  /* Standard density is the default semantic mode. */
  --sp-gap-inline: var(--sp-space-1);
  --sp-gap-related-tight: var(--sp-space-2);
  --sp-gap-related: var(--sp-space-3);
  --sp-gap-component: var(--sp-space-4);
  --sp-gap-content: var(--sp-space-5);
  --sp-gap-group: var(--sp-space-6);
  --sp-gap-section: var(--sp-space-8);
  --sp-gap-context: var(--sp-space-12);
  --sp-inset-container: var(--sp-space-4);
  --sp-inset-container-spacious: var(--sp-space-5);
  --sp-inset-modal: var(--sp-space-6);
  --sp-inset-control-x: var(--sp-space-4);
  --sp-inset-control-y: var(--sp-space-3);

  /* Functional iconography */
  --sp-icon-size-inline: var(--sp-space-4);
  --sp-icon-size-control: var(--sp-space-5);
  --sp-icon-size-navigation: var(--sp-space-6);
  --sp-icon-size-feature: var(--sp-space-8);
  --sp-icon-stroke-width: 2px;

  /* Button dimensions and typography */
  --sp-button-large-radius: var(--sp-shape-control-large);
  --sp-button-large-min-height: 3.25rem;
  --sp-button-large-padding-inline: var(--sp-space-5);
  --sp-button-large-padding-block: var(--sp-space-3);
  --sp-button-large-gap: var(--sp-space-2);
  --sp-button-large-font-family: var(--sp-type-label-large-family);
  --sp-button-large-font-size: var(--sp-type-label-large-size);
  --sp-button-large-line-height: var(--sp-type-label-large-line);
  --sp-button-large-font-weight: var(--sp-type-label-large-weight);
  --sp-button-medium-min-height: 3rem;
  --sp-button-medium-padding-inline: var(--sp-space-4);
  --sp-button-medium-padding-block: var(--sp-space-3);
  --sp-button-medium-gap: var(--sp-space-2);
  --sp-button-medium-font-family: var(--sp-type-label-medium-family);
  --sp-button-medium-font-size: var(--sp-type-label-medium-size);
  --sp-button-medium-line-height: var(--sp-type-label-medium-line);
  --sp-button-medium-font-weight: var(--sp-type-label-medium-weight);
  --sp-button-medium-radius: var(--sp-shape-control-default);
  --sp-button-icon-size: var(--sp-icon-size-control);
  --sp-icon-button-min-size: var(--sp-target-min);
  --sp-icon-button-icon-size: var(--sp-icon-size-control);
  --sp-icon-button-media-icon-size: var(--sp-icon-size-navigation);

  /* Compact window defaults. */
  --sp-inset-screen: var(--sp-space-4);
  --sp-grid-columns: 4;
  --sp-grid-gutter: var(--sp-space-3);
  --sp-grid-minimum-margin: var(--sp-space-4);

  /* Capped content widths. */
  --sp-layout-narrow-max: 40rem;
  --sp-layout-reading-max: 72ch;
  --sp-layout-content-max: 60rem;
  --sp-layout-shell-max: 80rem;

  /* Interaction dimensions are minimums, not fixed heights. */
  --sp-target-min: 3rem;
  --sp-target-gap-compact: var(--sp-space-2);
  --sp-action-destructive-separation: var(--sp-space-4);
  --sp-button-primary-min-height: 3.25rem;
  --sp-button-secondary-min-height: 3rem;
  --sp-field-min-height: 3.5rem;
  --sp-action-row-min-height: 3.5rem;
  --sp-tab-row-min-height: 3rem;
  --sp-product-header-min-height: 3.5rem;
  --sp-bottom-navigation-min-height: 4rem;

  /* Web safe areas; native platforms supply equivalent runtime values. */
  --sp-safe-area-top: env(safe-area-inset-top, 0px);
  --sp-safe-area-right: env(safe-area-inset-right, 0px);
  --sp-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --sp-safe-area-left: env(safe-area-inset-left, 0px);
}

[data-density="calm"] {
  --sp-gap-related: var(--sp-space-3);
  --sp-gap-component: var(--sp-space-6);
  --sp-gap-content: var(--sp-space-6);
  --sp-gap-group: var(--sp-space-8);
  --sp-gap-section: var(--sp-space-10);
  --sp-gap-context: var(--sp-space-12);
  --sp-inset-container: var(--sp-space-5);
  --sp-inset-container-spacious: var(--sp-space-6);
}

[data-density="data"] {
  --sp-gap-related: var(--sp-space-2);
  --sp-gap-component: var(--sp-space-3);
  --sp-gap-content: var(--sp-space-4);
  --sp-gap-group: var(--sp-space-6);
  --sp-gap-section: var(--sp-space-6);
  --sp-gap-context: var(--sp-space-12);
  --sp-inset-container: var(--sp-space-4);
  --sp-inset-container-spacious: var(--sp-space-5);
}

@media (min-width: 390px) {
  :root {
    --sp-inset-screen: var(--sp-space-5);
    --sp-grid-minimum-margin: var(--sp-space-5);
  }
}

@media (min-width: 600px) {
  :root {
    --sp-inset-screen: var(--sp-space-6);
    --sp-grid-columns: 8;
    --sp-grid-gutter: var(--sp-space-4);
    --sp-grid-minimum-margin: var(--sp-space-6);
  }
}

@media (min-width: 840px) {
  :root {
    --sp-inset-screen: var(--sp-space-8);
    --sp-grid-columns: 12;
    --sp-grid-gutter: var(--sp-space-6);
    --sp-grid-minimum-margin: var(--sp-space-8);
  }
}

@media (min-width: 1200px) {
  :root {
    --sp-inset-screen: var(--sp-space-10);
    --sp-grid-minimum-margin: var(--sp-space-10);
  }
}

@media (min-width: 1600px) {
  :root {
    --sp-inset-screen: var(--sp-space-16);
    --sp-grid-minimum-margin: var(--sp-space-16);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sp-elevation-duration-press: 1ms;
    --sp-elevation-duration-state: 1ms;
    --sp-elevation-duration-overlay: 1ms;
    --sp-elevation-duration-modal: 1ms;
  }
}

@media (forced-colors: active) {
  :root {
    --sp-surface-canvas: Canvas;
    --sp-surface-container: Canvas;
    --sp-surface-raised: Canvas;
    --sp-surface-floating: Canvas;
    --sp-surface-overlay: Canvas;
    --sp-surface-modal: Canvas;
    --sp-surface-on-media: Canvas;

    --sp-border-subtle: CanvasText;
    --sp-border-default: CanvasText;
    --sp-border-strong: CanvasText;
    --sp-border-interactive: LinkText;
    --sp-border-selected: Highlight;
    --sp-border-inverse: Canvas;
    --sp-border-on-media: CanvasText;
    --sp-border-info: CanvasText;
    --sp-border-success: CanvasText;
    --sp-border-warning: CanvasText;
    --sp-border-critical: CanvasText;
    --sp-focus-ring-color: Highlight;
    --sp-focus-ring-inverse: Highlight;
    --sp-focus-ring-on-media-light: Highlight;
    --sp-focus-ring-on-media-dark: Highlight;
    --sp-focus-ring-guard: Canvas;

    --sp-button-primary-background: Highlight;
    --sp-button-primary-foreground: HighlightText;
    --sp-button-primary-border: Highlight;
    --sp-button-secondary-background: ButtonFace;
    --sp-button-secondary-foreground: ButtonText;
    --sp-button-secondary-border: ButtonText;
    --sp-button-tertiary-background: transparent;
    --sp-button-tertiary-foreground: LinkText;
    --sp-button-tertiary-border: transparent;
    --sp-button-critical-primary-background: ButtonText;
    --sp-button-critical-primary-foreground: ButtonFace;
    --sp-button-critical-primary-border: ButtonText;
    --sp-button-critical-tertiary-background: transparent;
    --sp-button-critical-tertiary-foreground: ButtonText;
    --sp-button-critical-tertiary-border: transparent;
    --sp-button-disabled-background: ButtonFace;
    --sp-button-disabled-foreground: GrayText;
    --sp-button-disabled-border: GrayText;

    --sp-shadow-soft-1: none;
    --sp-shadow-soft-2: none;
    --sp-shadow-soft-3: none;
    --sp-shadow-soft-4: none;

    --sp-material-control-backdrop: none;
    --sp-material-overlay-backdrop: none;
    --sp-material-on-media-backdrop: none;
    --sp-material-control-surface: Canvas;
    --sp-material-overlay-surface: Canvas;
    --sp-material-on-media-surface: Canvas;
    --sp-material-control-fallback: Canvas;
    --sp-material-overlay-fallback: Canvas;
    --sp-material-on-media-fallback: Canvas;
  }
}