@layer sl.tokens {
  :root,
  [data-theme="light"] {
    --sl-color-brand-700: #002a84;
    --sl-color-brand-600: #0033a0;
    --sl-color-brand-500: #0c4cc9;
    --sl-color-accent-500: #ff6600;
    --sl-color-accent-400: #ff8a3d;

    --sl-surface-canvas: #f5f3ef;
    --sl-surface-base: #ffffff;
    --sl-surface-elevated: #f9fbff;
    --sl-surface-muted: #eef3ff;
    --sl-surface-inverse: #0f1a36;

    --sl-text-strong: #112041;
    --sl-text-primary: #26385c;
    --sl-text-muted: #5f6f8d;
    --sl-text-inverse: #ffffff;

    --sl-state-success: #157347;
    --sl-state-warning: #b4690e;
    --sl-state-danger: #b42318;
    --sl-state-info: #2165d6;

    --sl-space-1: 0.25rem;
    --sl-space-2: 0.5rem;
    --sl-space-3: 0.75rem;
    --sl-space-4: 1rem;
    --sl-space-5: 1.5rem;
    --sl-space-6: 2rem;
    --sl-space-7: 2.5rem;
    --sl-space-8: 3rem;

    --sl-radius-xs: 6px;
    --sl-radius-sm: 10px;
    --sl-radius-md: 14px;
    --sl-radius-lg: 20px;

    --sl-shadow-xs: 0 1px 2px rgba(17, 32, 65, 0.08);
    --sl-shadow-sm: 0 8px 18px rgba(17, 32, 65, 0.12);
    --sl-shadow-md: 0 14px 34px rgba(17, 32, 65, 0.14);

    --sl-motion-fast: 130ms;
    --sl-motion-medium: 220ms;
    --sl-motion-slow: 360ms;
    --sl-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);

    --sl-topbar-height: 4rem;
    --sl-z-navbar: 1000;
    --sl-z-drawer: 1020;
    --sl-z-toast: 1080;

    --sl-font-sans: "DM Sans", "Verdana", sans-serif;
    --sl-font-display: "Space Grotesk", "DM Sans", sans-serif;
    --sl-font-mono: "Consolas", "Menlo", "Monaco", monospace;

    /* Molten canvas diffusion */
    --sl-diffusion-bg: rgba(248, 245, 239, 0.60);
    --sl-diffusion-blur: 40px;
    --sl-diffusion-saturate: 140%;

    /* Molten surface overlay */
    --sl-surface-overlay: rgba(255, 255, 255, 0.72);
    --sl-surface-overlay-border: rgba(0, 0, 0, 0.06);
    --sl-surface-callout: rgba(255, 255, 255, 0.55);
  }

  [data-theme="dark"] {
    --sl-color-brand-700: #7ea5ff;
    --sl-color-brand-600: #5e8aff;
    --sl-color-brand-500: #97b5ff;
    --sl-color-accent-500: #ff9a4f;
    --sl-color-accent-400: #ffb37d;

    --sl-surface-canvas: #0f1320;
    --sl-surface-base: #18213a;
    --sl-surface-elevated: #202c4a;
    --sl-surface-muted: #293657;
    --sl-surface-inverse: #f2f6ff;

    --sl-text-strong: #f2f6ff;
    --sl-text-primary: #d4def2;
    --sl-text-muted: #a8b8d8;
    --sl-text-inverse: #0f1a36;

    /* Molten canvas diffusion — dark */
    --sl-diffusion-bg: rgba(13, 19, 37, 0.72);
    --sl-diffusion-blur: 40px;
    --sl-diffusion-saturate: 160%;

    /* Molten surface overlay — dark */
    --sl-surface-overlay: rgba(15, 22, 38, 0.72);
    --sl-surface-overlay-border: rgba(99, 122, 164, 0.18);
    --sl-surface-callout: rgba(15, 22, 38, 0.55);
  }
}