:root {
  /* Primitive colors. Do not consume these directly in product components. */
  --sng-primitive-color-neutral-0: #ffffff;
  --sng-primitive-color-neutral-50: #f8f9fb;
  --sng-primitive-color-neutral-100: #f4f5f7;
  --sng-primitive-color-neutral-200: #e2e4e9;
  --sng-primitive-color-neutral-300: #cdd1d8;
  --sng-primitive-color-neutral-400: #a2a7b0;
  --sng-primitive-color-neutral-500: #858c97;
  --sng-primitive-color-neutral-600: #626975;
  --sng-primitive-color-neutral-700: #454b55;
  --sng-primitive-color-neutral-800: #28282e;
  --sng-primitive-color-neutral-850: #1b1b1f;
  --sng-primitive-color-neutral-875: #17171a;
  --sng-primitive-color-neutral-900: #111113;
  --sng-primitive-color-neutral-950: #070708;
  --sng-primitive-color-neutral-1000: #000000;

  --sng-primitive-color-brand-50: #fff0f3;
  --sng-primitive-color-brand-100: #ffdce3;
  --sng-primitive-color-brand-200: #ffb8c7;
  --sng-primitive-color-brand-300: #ff8299;
  --sng-primitive-color-brand-400: #f94a68;
  --sng-primitive-color-brand-500: #ed0d32;
  --sng-primitive-color-brand-600: #ca0a2b;
  --sng-primitive-color-brand-700: #b80c2b;
  --sng-primitive-color-brand-800: #a90824;
  --sng-primitive-color-brand-900: #9c0823;
  --sng-primitive-color-brand-950: #53030f;

  --sng-primitive-color-success-50: #e8f7f1;
  --sng-primitive-color-success-100: #cff0e4;
  --sng-primitive-color-success-200: #96d5bf;
  --sng-primitive-color-success-500: #47c99c;
  --sng-primitive-color-success-600: #087b58;
  --sng-primitive-color-success-800: #245d4b;
  --sng-primitive-color-success-950: #102a22;

  --sng-primitive-color-warning-50: #fff5dc;
  --sng-primitive-color-warning-100: #ffebbd;
  --sng-primitive-color-warning-200: #e6c578;
  --sng-primitive-color-warning-500: #efb64f;
  --sng-primitive-color-warning-700: #9a5b00;
  --sng-primitive-color-warning-800: #655027;
  --sng-primitive-color-warning-950: #2e2412;

  --sng-primitive-color-info-50: #eaf4fc;
  --sng-primitive-color-info-100: #d4e9f8;
  --sng-primitive-color-info-200: #9cc8e9;
  --sng-primitive-color-info-500: #70b6e8;
  --sng-primitive-color-info-700: #1769aa;
  --sng-primitive-color-info-800: #295671;
  --sng-primitive-color-info-950: #102737;

  --sng-primitive-color-danger-50: #fff0f2;
  --sng-primitive-color-danger-100: #ffd9df;
  --sng-primitive-color-danger-200: #ecabb4;
  --sng-primitive-color-danger-400: #f06a79;
  --sng-primitive-color-danger-600: #c52035;
  --sng-primitive-color-danger-700: #b80f2e;
  --sng-primitive-color-danger-800: #a7192c;
  --sng-primitive-color-danger-900: #9d0b26;
  --sng-primitive-color-danger-950: #35151b;

  /* Primitive spacing */
  --sng-primitive-space-0: 0;
  --sng-primitive-space-1: 0.25rem;
  --sng-primitive-space-2: 0.5rem;
  --sng-primitive-space-3: 0.75rem;
  --sng-primitive-space-4: 1rem;
  --sng-primitive-space-5: 1.25rem;
  --sng-primitive-space-6: 1.5rem;
  --sng-primitive-space-8: 2rem;
  --sng-primitive-space-10: 2.5rem;
  --sng-primitive-space-12: 3rem;
  --sng-primitive-space-16: 4rem;
  --sng-primitive-space-20: 5rem;
  --sng-primitive-space-24: 6rem;

  /* Shape */
  --sng-primitive-radius-none: 0;
  --sng-primitive-radius-sm: 0.375rem;
  --sng-primitive-radius-md: 0.5rem;
  --sng-primitive-radius-lg: 0.75rem;
  --sng-primitive-radius-xl: 1rem;
  --sng-primitive-radius-full: 9999px;
  --sng-primitive-border-width-0: 0;
  --sng-primitive-border-width-1: 1px;
  --sng-primitive-border-width-2: 2px;
  --sng-primitive-border-width-3: 3px;

  /* Typography */
  --sng-primitive-typography-font-family-sans:
    Inter, "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sng-primitive-typography-font-family-mono:
    "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sng-primitive-typography-font-size-xs: 0.75rem;
  --sng-primitive-typography-font-size-sm: 0.8125rem;
  --sng-primitive-typography-font-size-md: 0.875rem;
  --sng-primitive-typography-font-size-lg: 1rem;
  --sng-primitive-typography-font-size-xl: 1.375rem;
  --sng-primitive-typography-font-size-2xl: 2rem;
  --sng-primitive-typography-font-size-3xl: 2.5rem;
  --sng-primitive-typography-font-size-4xl: 3rem;
  --sng-primitive-typography-font-weight-regular: 400;
  --sng-primitive-typography-font-weight-medium: 500;
  --sng-primitive-typography-font-weight-semibold: 600;
  --sng-primitive-typography-font-weight-bold: 700;
  --sng-primitive-typography-line-height-none: 1;
  --sng-primitive-typography-line-height-tight: 1.25;
  --sng-primitive-typography-line-height-normal: 1.5;
  --sng-primitive-typography-line-height-relaxed: 1.65;
  --sng-primitive-typography-letter-spacing-tighter: -0.04em;
  --sng-primitive-typography-letter-spacing-tight: -0.02em;
  --sng-primitive-typography-letter-spacing-normal: 0;
  --sng-primitive-typography-letter-spacing-wide: 0.04em;

  /* Elevation, breakpoints, motion, and stacking */
  --sng-primitive-shadow-none: none;
  --sng-primitive-shadow-subtle: 0 1px 2px rgb(17 19 24 / 0.06);
  --sng-primitive-shadow-raised: 0 5px 18px rgb(17 19 24 / 0.08);
  --sng-primitive-shadow-overlay: 0 18px 48px rgb(17 19 24 / 0.18);
  --sng-primitive-breakpoint-sm: 40rem;
  --sng-primitive-breakpoint-md: 48rem;
  --sng-primitive-breakpoint-lg: 64rem;
  --sng-primitive-breakpoint-xl: 80rem;
  --sng-primitive-breakpoint-2xl: 96rem;
  --sng-primitive-motion-duration-instant: 0ms;
  --sng-primitive-motion-duration-fast: 120ms;
  --sng-primitive-motion-duration-normal: 180ms;
  --sng-primitive-motion-duration-slow: 320ms;
  --sng-primitive-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --sng-primitive-motion-easing-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --sng-primitive-z-index-base: 0;
  --sng-primitive-z-index-sticky: 20;
  --sng-primitive-z-index-dropdown: 40;
  --sng-primitive-z-index-overlay: 60;
  --sng-primitive-z-index-modal: 70;
  --sng-primitive-z-index-toast: 80;

  /* Reusable dimensions */
  --sng-primitive-sizing-control-sm: 2rem;
  --sng-primitive-sizing-control-md: 2.5rem;
  --sng-primitive-sizing-control-lg: 3rem;
  --sng-primitive-sizing-touch-target: 2.75rem;
  --sng-primitive-sizing-content-width: 90rem;
  --sng-primitive-sizing-reading-width: 44rem;
}

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

  /* Backgrounds and surfaces */
  --sng-color-canvas: var(--sng-primitive-color-neutral-100);
  --sng-color-background-primary: var(--sng-color-canvas);
  --sng-color-background-secondary: var(--sng-primitive-color-neutral-50);
  --sng-color-background-surface: var(--sng-color-surface);
  --sng-color-background-subtle: var(--sng-color-surface-subtle);
  --sng-color-surface: var(--sng-primitive-color-neutral-0);
  --sng-color-surface-raised: var(--sng-primitive-color-neutral-0);
  --sng-color-surface-subtle: var(--sng-primitive-color-neutral-50);
  --sng-color-background-elevated: var(--sng-color-surface-raised);
  --sng-color-surface-overlay: var(--sng-primitive-color-neutral-0);
  --sng-color-overlay-backdrop: rgb(7 7 8 / 0.58);

  /* Text and borders */
  --sng-color-border: var(--sng-primitive-color-neutral-200);
  --sng-color-border-default: var(--sng-color-border);
  --sng-color-border-subtle: var(--sng-primitive-color-neutral-200);
  --sng-color-border-strong: var(--sng-primitive-color-neutral-300);
  --sng-color-text: #111318;
  --sng-color-text-primary: var(--sng-color-text);
  --sng-color-text-muted: var(--sng-primitive-color-neutral-600);
  --sng-color-text-secondary: var(--sng-color-text-muted);
  --sng-color-text-subtle: var(--sng-primitive-color-neutral-500);
  --sng-color-text-disabled: var(--sng-primitive-color-neutral-400);
  --sng-color-text-inverse: var(--sng-primitive-color-neutral-0);

  /* Brand and interaction */
  --sng-color-brand-mark: var(--sng-primitive-color-brand-500);
  --sng-color-brand: var(--sng-primitive-color-brand-600);
  --sng-color-brand-primary: var(--sng-color-brand);
  --sng-color-brand-text: #ba0927;
  --sng-color-brand-hover: var(--sng-primitive-color-brand-800);
  --sng-color-brand-active: var(--sng-primitive-color-brand-900);
  --sng-color-brand-soft: var(--sng-primitive-color-brand-50);
  --sng-color-interactive-primary: var(--sng-color-brand);
  --sng-color-interactive-primary-hover: var(--sng-color-brand-hover);
  --sng-color-interactive-primary-active: var(--sng-color-brand-active);
  --sng-color-focus-ring: rgb(202 10 43 / 0.26);
  --sng-color-disabled-background: var(--sng-primitive-color-neutral-100);
  --sng-color-disabled-text: var(--sng-primitive-color-neutral-500);

  /* Status */
  --sng-color-success: var(--sng-primitive-color-success-600);
  --sng-color-status-success: var(--sng-color-success);
  --sng-color-success-soft: var(--sng-primitive-color-success-50);
  --sng-color-success-border: var(--sng-primitive-color-success-200);
  --sng-color-warning: var(--sng-primitive-color-warning-700);
  --sng-color-status-warning: var(--sng-color-warning);
  --sng-color-warning-soft: var(--sng-primitive-color-warning-50);
  --sng-color-warning-border: var(--sng-primitive-color-warning-200);
  --sng-color-info: var(--sng-primitive-color-info-700);
  --sng-color-status-info: var(--sng-color-info);
  --sng-color-info-soft: var(--sng-primitive-color-info-50);
  --sng-color-info-border: var(--sng-primitive-color-info-200);
  --sng-color-danger: var(--sng-primitive-color-danger-600);
  --sng-color-status-danger: var(--sng-color-danger);
  --sng-color-danger-fill: var(--sng-primitive-color-danger-600);
  --sng-color-danger-fill-hover: var(--sng-primitive-color-danger-800);
  --sng-color-danger-hover: var(--sng-primitive-color-danger-800);
  --sng-color-danger-soft: var(--sng-primitive-color-danger-50);
  --sng-color-danger-border: var(--sng-primitive-color-danger-200);

  /* Public foundation contracts retained from the first SNG token layer. */
  --sng-font-sans: var(--sng-primitive-typography-font-family-sans);
  --sng-font-mono: var(--sng-primitive-typography-font-family-mono);
  --sng-font-size-xs: var(--sng-primitive-typography-font-size-xs);
  --sng-font-size-sm: var(--sng-primitive-typography-font-size-sm);
  --sng-font-size-md: var(--sng-primitive-typography-font-size-md);
  --sng-font-size-lg: var(--sng-primitive-typography-font-size-lg);
  --sng-font-size-xl: var(--sng-primitive-typography-font-size-xl);
  --sng-font-size-2xl: var(--sng-primitive-typography-font-size-2xl);
  --sng-line-height-tight: var(--sng-primitive-typography-line-height-tight);
  --sng-line-height-normal: var(--sng-primitive-typography-line-height-normal);
  --sng-line-height-relaxed: var(--sng-primitive-typography-line-height-relaxed);
  --sng-font-weight-regular: var(--sng-primitive-typography-font-weight-regular);
  --sng-font-weight-medium: var(--sng-primitive-typography-font-weight-medium);
  --sng-font-weight-semibold: var(--sng-primitive-typography-font-weight-semibold);
  --sng-font-weight-bold: var(--sng-primitive-typography-font-weight-bold);
  --sng-letter-spacing-tight: var(--sng-primitive-typography-letter-spacing-tight);
  --sng-letter-spacing-normal: var(--sng-primitive-typography-letter-spacing-normal);
  --sng-letter-spacing-wide: var(--sng-primitive-typography-letter-spacing-wide);

  /* Semantic typography scale */
  --sng-font-size-display: var(--sng-primitive-typography-font-size-4xl);
  --sng-line-height-display: var(--sng-primitive-typography-line-height-none);
  --sng-font-size-heading-1: var(--sng-primitive-typography-font-size-3xl);
  --sng-line-height-heading-1: var(--sng-primitive-typography-line-height-tight);
  --sng-font-size-heading-2: var(--sng-primitive-typography-font-size-2xl);
  --sng-line-height-heading-2: var(--sng-primitive-typography-line-height-tight);
  --sng-font-size-heading-3: var(--sng-primitive-typography-font-size-xl);
  --sng-line-height-heading-3: var(--sng-primitive-typography-line-height-tight);
  --sng-font-size-heading-4: var(--sng-primitive-typography-font-size-lg);
  --sng-line-height-heading-4: var(--sng-primitive-typography-line-height-tight);
  --sng-font-size-body-lg: var(--sng-primitive-typography-font-size-lg);
  --sng-line-height-body-lg: var(--sng-primitive-typography-line-height-normal);
  --sng-font-size-body: var(--sng-primitive-typography-font-size-md);
  --sng-line-height-body: var(--sng-primitive-typography-line-height-normal);
  --sng-font-size-body-sm: var(--sng-primitive-typography-font-size-sm);
  --sng-line-height-body-sm: var(--sng-primitive-typography-line-height-normal);
  --sng-font-size-label: var(--sng-primitive-typography-font-size-sm);
  --sng-line-height-label: var(--sng-primitive-typography-line-height-tight);
  --sng-font-size-caption: var(--sng-primitive-typography-font-size-xs);
  --sng-line-height-caption: var(--sng-primitive-typography-line-height-normal);
  --sng-font-size-code: var(--sng-primitive-typography-font-size-sm);
  --sng-line-height-code: var(--sng-primitive-typography-line-height-normal);
  --sng-font-size-title-sm: var(--sng-font-size-heading-4);
  --sng-line-height-title-sm: var(--sng-line-height-heading-4);
  --sng-font-size-title: var(--sng-font-size-heading-3);
  --sng-line-height-title: var(--sng-line-height-heading-3);
  --sng-font-size-page-title: var(--sng-font-size-heading-2);
  --sng-line-height-page-title: 1.15;

  --sng-space-1: var(--sng-primitive-space-1);
  --sng-space-2: var(--sng-primitive-space-2);
  --sng-space-3: var(--sng-primitive-space-3);
  --sng-space-4: var(--sng-primitive-space-4);
  --sng-space-5: var(--sng-primitive-space-5);
  --sng-space-6: var(--sng-primitive-space-6);
  --sng-space-8: var(--sng-primitive-space-8);
  --sng-space-10: var(--sng-primitive-space-10);
  --sng-space-12: var(--sng-primitive-space-12);
  --sng-space-16: var(--sng-primitive-space-16);
  --sng-space-20: var(--sng-primitive-space-20);
  --sng-space-24: var(--sng-primitive-space-24);
  --sng-radius-sm: var(--sng-primitive-radius-sm);
  --sng-radius-md: var(--sng-primitive-radius-md);
  --sng-radius-lg: var(--sng-primitive-radius-lg);
  --sng-radius-xl: var(--sng-primitive-radius-xl);
  --sng-radius-full: var(--sng-primitive-radius-full);
  --sng-border-width-default: var(--sng-primitive-border-width-1);
  --sng-border-width-strong: var(--sng-primitive-border-width-2);
  --sng-shadow-1: var(--sng-primitive-shadow-subtle);
  --sng-shadow-2: var(--sng-primitive-shadow-raised);
  --sng-shadow-overlay: var(--sng-primitive-shadow-overlay);
  --sng-control-height-sm: var(--sng-primitive-sizing-control-sm);
  --sng-control-height-md: var(--sng-primitive-sizing-control-md);
  --sng-control-height-lg: var(--sng-primitive-sizing-control-lg);
  --sng-touch-target: var(--sng-primitive-sizing-touch-target);
  --sng-content-width: var(--sng-primitive-sizing-content-width);
  --sng-reading-width: var(--sng-primitive-sizing-reading-width);
  --sng-duration-fast: var(--sng-primitive-motion-duration-fast);
  --sng-duration-normal: var(--sng-primitive-motion-duration-normal);
  --sng-duration-slow: var(--sng-primitive-motion-duration-slow);
  --sng-ease-standard: var(--sng-primitive-motion-easing-standard);
  --sng-ease-emphasized: var(--sng-primitive-motion-easing-emphasized);
  --sng-z-sticky: var(--sng-primitive-z-index-sticky);
  --sng-z-dropdown: var(--sng-primitive-z-index-dropdown);
  --sng-z-overlay: var(--sng-primitive-z-index-overlay);
  --sng-z-modal: var(--sng-primitive-z-index-modal);
  --sng-z-toast: var(--sng-primitive-z-index-toast);
}

:root[data-theme="dark"],
[data-theme="dark"],
:root.dark,
.dark {
  color-scheme: dark;
  --sng-color-canvas: var(--sng-primitive-color-neutral-950);
  --sng-color-background-primary: var(--sng-color-canvas);
  --sng-color-background-secondary: var(--sng-primitive-color-neutral-850);
  --sng-color-background-surface: var(--sng-color-surface);
  --sng-color-background-subtle: var(--sng-color-surface-subtle);
  --sng-color-surface: var(--sng-primitive-color-neutral-900);
  --sng-color-surface-raised: var(--sng-primitive-color-neutral-875);
  --sng-color-surface-subtle: var(--sng-primitive-color-neutral-850);
  --sng-color-background-elevated: var(--sng-color-surface-raised);
  --sng-color-surface-overlay: var(--sng-primitive-color-neutral-875);
  --sng-color-overlay-backdrop: rgb(0 0 0 / 0.72);
  --sng-color-border: var(--sng-primitive-color-neutral-800);
  --sng-color-border-default: var(--sng-color-border);
  --sng-color-border-subtle: var(--sng-primitive-color-neutral-800);
  --sng-color-border-strong: #393941;
  --sng-color-text: #ededf0;
  --sng-color-text-primary: var(--sng-color-text);
  --sng-color-text-muted: #a2a2aa;
  --sng-color-text-secondary: var(--sng-color-text-muted);
  --sng-color-text-subtle: #777780;
  --sng-color-text-disabled: #62626b;
  --sng-color-text-inverse: var(--sng-primitive-color-neutral-0);
  --sng-color-brand-mark: var(--sng-primitive-color-brand-500);
  --sng-color-brand: var(--sng-primitive-color-brand-700);
  --sng-color-brand-primary: var(--sng-color-brand);
  --sng-color-brand-text: #ff6b83;
  --sng-color-brand-hover: var(--sng-primitive-color-brand-900);
  --sng-color-brand-active: var(--sng-primitive-color-brand-950);
  --sng-color-brand-soft: #321018;
  --sng-color-interactive-primary: var(--sng-color-brand);
  --sng-color-interactive-primary-hover: var(--sng-color-brand-hover);
  --sng-color-interactive-primary-active: var(--sng-color-brand-active);
  --sng-color-focus-ring: rgb(237 13 50 / 0.34);
  --sng-color-disabled-background: var(--sng-primitive-color-neutral-850);
  --sng-color-disabled-text: #777780;
  --sng-color-success: var(--sng-primitive-color-success-500);
  --sng-color-status-success: var(--sng-color-success);
  --sng-color-success-soft: var(--sng-primitive-color-success-950);
  --sng-color-success-border: var(--sng-primitive-color-success-800);
  --sng-color-warning: var(--sng-primitive-color-warning-500);
  --sng-color-status-warning: var(--sng-color-warning);
  --sng-color-warning-soft: var(--sng-primitive-color-warning-950);
  --sng-color-warning-border: var(--sng-primitive-color-warning-800);
  --sng-color-info: var(--sng-primitive-color-info-500);
  --sng-color-status-info: var(--sng-color-info);
  --sng-color-info-soft: var(--sng-primitive-color-info-950);
  --sng-color-info-border: var(--sng-primitive-color-info-800);
  --sng-color-danger: var(--sng-primitive-color-danger-400);
  --sng-color-status-danger: var(--sng-color-danger);
  --sng-color-danger-fill: var(--sng-primitive-color-danger-700);
  --sng-color-danger-fill-hover: var(--sng-primitive-color-danger-900);
  --sng-color-danger-hover: var(--sng-primitive-color-danger-900);
  --sng-color-danger-soft: var(--sng-primitive-color-danger-950);
  --sng-color-danger-border: #6c2b35;
  --sng-shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --sng-shadow-2: 0 7px 22px rgb(0 0 0 / 0.38);
  --sng-shadow-overlay: 0 20px 56px rgb(0 0 0 / 0.6);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sng-duration-fast: 0.01ms;
    --sng-duration-normal: 0.01ms;
    --sng-duration-slow: 0.01ms;
  }
}