:root {
  /* Color primitives - HSL format (hue saturation% lightness%) */
  --snice-color-gray-50: 0 0% 98%;
  --snice-color-gray-100: 0 0% 95%;
  --snice-color-gray-200: 0 0% 89%;
  --snice-color-gray-300: 0 0% 82%;
  --snice-color-gray-400: 0 0% 64%;
  --snice-color-gray-500: 0 0% 45%;
  --snice-color-gray-600: 0 0% 32%;
  --snice-color-gray-700: 0 0% 25%;
  --snice-color-gray-800: 0 0% 15%;
  --snice-color-gray-900: 0 0% 9%;
  --snice-color-gray-950: 0 0% 4%;

  --snice-color-blue-50: 214 100% 97%;
  --snice-color-blue-100: 214 95% 93%;
  --snice-color-blue-200: 213 97% 87%;
  --snice-color-blue-300: 212 96% 78%;
  --snice-color-blue-400: 213 94% 68%;
  --snice-color-blue-500: 217 91% 60%;
  --snice-color-blue-600: 217 83% 53%;
  --snice-color-blue-700: 217 77% 48%;
  --snice-color-blue-800: 217 71% 40%;
  --snice-color-blue-900: 218 65% 33%;
  --snice-color-blue-950: 221 56% 21%;

  --snice-color-green-50: 138 76% 97%;
  --snice-color-green-100: 141 84% 93%;
  --snice-color-green-200: 141 79% 85%;
  --snice-color-green-300: 142 77% 73%;
  --snice-color-green-400: 142 69% 58%;
  --snice-color-green-500: 142 71% 45%;
  --snice-color-green-600: 142 76% 36%;
  --snice-color-green-700: 142 72% 29%;
  --snice-color-green-800: 143 64% 24%;
  --snice-color-green-900: 144 61% 20%;
  --snice-color-green-950: 145 80% 10%;

  --snice-color-red-50: 0 86% 97%;
  --snice-color-red-100: 0 93% 94%;
  --snice-color-red-200: 0 96% 89%;
  --snice-color-red-300: 0 94% 82%;
  --snice-color-red-400: 0 91% 71%;
  --snice-color-red-500: 0 84% 60%;
  --snice-color-red-600: 0 72% 51%;
  --snice-color-red-700: 0 74% 42%;
  --snice-color-red-800: 0 70% 35%;
  --snice-color-red-900: 0 63% 31%;
  --snice-color-red-950: 0 75% 15%;

  --snice-color-yellow-50: 55 92% 95%;
  --snice-color-yellow-100: 55 97% 88%;
  --snice-color-yellow-200: 53 98% 77%;
  --snice-color-yellow-300: 50 98% 64%;
  --snice-color-yellow-400: 48 96% 53%;
  --snice-color-yellow-500: 45 93% 47%;
  --snice-color-yellow-600: 41 96% 40%;
  --snice-color-yellow-700: 36 88% 33%;
  --snice-color-yellow-800: 32 81% 29%;
  --snice-color-yellow-900: 28 73% 26%;
  --snice-color-yellow-950: 24 71% 14%;

  /* Light theme (default) */
  --snice-color-primary: hsl(var(--snice-color-blue-600));
  --snice-color-success: hsl(var(--snice-color-green-600));
  --snice-color-warning: hsl(var(--snice-color-yellow-600));
  --snice-color-danger: hsl(var(--snice-color-red-600));
  --snice-color-neutral: hsl(var(--snice-color-gray-600));

  /* Brand color — the consumer's product identity color. Defaults to primary
     so existing usage stays unchanged. Separate it when the interactive
     accent (primary) and the brand (logo/marketing) should differ. */
  --snice-color-brand: var(--snice-color-primary);
  --snice-color-brand-hover: var(--snice-color-primary-hover);
  --snice-color-brand-subtle: var(--snice-color-primary-subtle);

  /* Data-visualization accent palette. Semantically neutral — pick by position,
     not meaning. Tuned for business/dashboard use: middle saturation keeps
     them readable side-by-side without feeling toy-like. Hues spread so
     adjacent slots stay distinguishable. */
  --snice-color-accent-1: hsl(214 55% 48%);   /* steel blue */
  --snice-color-accent-2: hsl(27 62% 50%);    /* muted orange */
  --snice-color-accent-3: hsl(160 40% 40%);   /* forest teal */
  --snice-color-accent-4: hsl(275 32% 52%);   /* dusty violet */
  --snice-color-accent-5: hsl(42 62% 48%);    /* mustard */
  --snice-color-accent-6: hsl(340 42% 55%);   /* dusty rose */
  --snice-color-accent-7: hsl(110 32% 42%);   /* olive green */
  --snice-color-accent-8: hsl(195 45% 46%);   /* slate cyan */

  --snice-color-primary-hover: hsl(var(--snice-color-blue-700));
  --snice-color-success-hover: hsl(var(--snice-color-green-700));
  --snice-color-warning-hover: hsl(var(--snice-color-yellow-700));
  --snice-color-danger-hover: hsl(var(--snice-color-red-700));
  --snice-color-neutral-hover: hsl(var(--snice-color-gray-700));

  /* Semantic colors */
  --snice-color-text: hsl(var(--snice-color-gray-900));
  --snice-color-text-secondary: hsl(var(--snice-color-gray-600));
  --snice-color-text-tertiary: hsl(var(--snice-color-gray-500));
  --snice-color-text-inverse: hsl(var(--snice-color-gray-50));

  /* Surface density scale. Tokens express HOW RAISED
     a surface is, not what it's for. Components pick the level that matches
     their prominence; don't name tokens after elements. */
  --snice-color-surface:                   hsl(0 0% 100%);                     /* page/body — lowest */
  --snice-color-surface-container-lowest:  hsl(0 0% 100%);                     /* inputs, recessed fields */
  --snice-color-surface-container-low:     hsl(var(--snice-color-gray-50));   /* subtle raised bg */
  --snice-color-surface-container:         hsl(var(--snice-color-gray-100));  /* toolbars, row stripes */
  --snice-color-surface-container-high:    hsl(40 9% 97%);                    /* cards, panels */
  --snice-color-surface-container-highest: hsl(0 0% 100%);                     /* modals, popovers (use shadow for light-mode elevation) */

  --snice-color-border: hsl(var(--snice-color-gray-300));
  --snice-color-border-hover: hsl(var(--snice-color-gray-400));
  --snice-color-border-focus: hsl(var(--snice-color-blue-500));
  /* Alpha-based subtle border — composites correctly over tinted surfaces. */
  --snice-color-border-subtle: hsl(0 0% 0% / 0.12);

  /* Interactive surface states — solid-color variants for components that
     need a concrete hover/active bg (selects, menus, list items) rather
     than the alpha overlays. Prefer overlay-hover/-selected when possible. */
  --snice-color-surface-hover: hsl(var(--snice-color-gray-100));
  --snice-color-surface-active: hsl(var(--snice-color-gray-200));
  --snice-color-surface-disabled: hsl(var(--snice-color-gray-100));
  --snice-color-text-disabled: hsl(var(--snice-color-gray-400));

  /* Alpha overlays for hover/selected states — layer these ON TOP of the
     surface color rather than swapping background. Composites over any bg
     (white, tinted, primary) without fighting the palette. */
  --snice-color-overlay-hover: hsl(0 0% 0% / 0.04);
  --snice-color-overlay-selected: hsl(var(--snice-color-blue-500) / 0.08);
  --snice-color-overlay-selected-hover: hsl(var(--snice-color-blue-500) / 0.12);

  --snice-color-primary-subtle: hsl(var(--snice-color-blue-50));
  --snice-color-primary-subtle-hover: hsl(var(--snice-color-blue-100));
  --snice-color-success-subtle: hsl(var(--snice-color-green-50));
  --snice-color-success-subtle-hover: hsl(var(--snice-color-green-100));
  --snice-color-warning-subtle: hsl(var(--snice-color-yellow-50));
  --snice-color-warning-subtle-hover: hsl(var(--snice-color-yellow-100));
  --snice-color-danger-subtle: hsl(var(--snice-color-red-50));
  --snice-color-danger-subtle-hover: hsl(var(--snice-color-red-100));

  /* Spacing — regular scale. Upper end (4xl, 5xl) is for editorial surfaces
     like hero sections, marketing pages, empty states that want generous
     breathing room. */
  --snice-spacing-3xs: 0.125rem;  /* 2px */
  --snice-spacing-2xs: 0.25rem;   /* 4px */
  --snice-spacing-xs: 0.5rem;     /* 8px */
  --snice-spacing-sm: 0.75rem;    /* 12px */
  --snice-spacing-md: 1rem;       /* 16px */
  --snice-spacing-lg: 1.5rem;     /* 24px */
  --snice-spacing-xl: 2rem;       /* 32px */
  --snice-spacing-2xl: 3rem;      /* 48px */
  --snice-spacing-3xl: 4rem;      /* 64px */
  --snice-spacing-4xl: 6rem;      /* 96px — hero / section divider */
  --snice-spacing-5xl: 8rem;      /* 128px — editorial breathing room */

  /* Typography */
  --snice-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --snice-font-family-display: var(--snice-font-family);
  --snice-font-family-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  --snice-font-size-2xs: 0.625rem;   /* 10px */
  --snice-font-size-xs: 0.75rem;     /* 12px */
  --snice-font-size-sm: 0.875rem;    /* 14px */
  --snice-font-size-md: 1rem;        /* 16px */
  --snice-font-size-lg: 1.125rem;    /* 18px */
  --snice-font-size-xl: 1.25rem;     /* 20px */
  --snice-font-size-2xl: 1.5rem;     /* 24px */
  --snice-font-size-3xl: 1.875rem;   /* 30px */
  --snice-font-size-4xl: 2.25rem;    /* 36px */

  --snice-font-weight-light: 300;
  --snice-font-weight-normal: 400;
  --snice-font-weight-medium: 500;
  --snice-font-weight-semibold: 600;
  --snice-font-weight-bold: 700;

  /* Heading size scale — use inside heading/title rules to keep hierarchy
     consistent across components. Width-ascending from xs → 2xl. */
  --snice-heading-xs: var(--snice-font-size-sm);     /* 14px */
  --snice-heading-sm: var(--snice-font-size-md);     /* 16px */
  --snice-heading-md: var(--snice-font-size-lg);     /* 18px */
  --snice-heading-lg: var(--snice-font-size-xl);     /* 20px */
  --snice-heading-xl: var(--snice-font-size-2xl);    /* 24px */
  --snice-heading-2xl: var(--snice-font-size-4xl);   /* 36px */

  --snice-line-height-dense: 1.25;
  --snice-line-height-normal: 1.5;
  --snice-line-height-loose: 1.75;

  /* Letter-spacing / tracking. Use `tight` on large display headings to keep
     them from feeling airy, `wide`/`widest` on small-caps / uppercase eyebrows
     / pill badges. */
  --snice-tracking-tight: -0.02em;
  --snice-tracking-normal: 0;
  --snice-tracking-wide: 0.03em;
  --snice-tracking-widest: 0.1em;

  /* Border radius */
  --snice-border-radius-sm: 0.125rem;  /* 2px */
  --snice-border-radius-md: 0.25rem;   /* 4px */
  --snice-border-radius-lg: 0.5rem;    /* 8px */
  --snice-border-radius-xl: 1rem;      /* 16px */
  --snice-border-radius-circle: 50%;
  --snice-border-radius-pill: 9999px;

  /* Shadows */
  --snice-shadow-xs: 0 1px 3px 0 hsl(0 0% 0% / 0.04), 0 1px 2px 0 hsl(0 0% 0% / 0.06);
  --snice-shadow-sm: 0 2px 6px 0 hsl(0 0% 0% / 0.04), 0 2px 4px -1px hsl(0 0% 0% / 0.06);
  --snice-shadow-md: 0 4px 12px 0 hsl(0 0% 0% / 0.05), 0 2px 8px -2px hsl(0 0% 0% / 0.06);
  --snice-shadow-lg: 0 10px 24px -3px hsl(0 0% 0% / 0.05), 0 4px 12px -4px hsl(0 0% 0% / 0.06);
  --snice-shadow-xl: 0 20px 32px -5px hsl(0 0% 0% / 0.06), 0 8px 16px -6px hsl(0 0% 0% / 0.08);
  --snice-shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.12);
  --snice-shadow-inset-sm: inset 0 1px 2px 0 hsl(0 0% 0% / 0.05);
  --snice-shadow-inset-md: inset 0 2px 4px 0 hsl(0 0% 0% / 0.06);

  /* Colored glow shadows — for selected / focused / elevated interactive
     surfaces that want an accent halo instead of a neutral drop. Used via
     box-shadow: var(--snice-shadow-glow-primary). */
  --snice-shadow-glow-primary: 0 0 0 4px hsl(var(--snice-color-blue-500) / 0.18), 0 4px 16px -4px hsl(var(--snice-color-blue-500) / 0.35);
  --snice-shadow-glow-success: 0 0 0 4px hsl(var(--snice-color-green-500) / 0.18), 0 4px 16px -4px hsl(var(--snice-color-green-500) / 0.35);
  --snice-shadow-glow-danger:  0 0 0 4px hsl(var(--snice-color-red-500)   / 0.18), 0 4px 16px -4px hsl(var(--snice-color-red-500)   / 0.35);
  --snice-shadow-glow-warning: 0 0 0 4px hsl(var(--snice-color-yellow-500) / 0.2), 0 4px 16px -4px hsl(var(--snice-color-yellow-500) / 0.4);

  /* Gradients — top-to-bottom highlight that gives buttons/cards/surfaces a
     subtle convex sheen (iOS/macOS-style). Tuned strong enough to read but
     not draw attention. */
  --snice-gradient-subtle:  linear-gradient(to bottom, hsl(0 0% 100% / 0.08), transparent 60%);
  --snice-gradient-convex:  linear-gradient(to bottom, hsl(0 0% 100% / 0.14), transparent 70%);
  --snice-gradient-surface: linear-gradient(to bottom, hsl(0 0% 100% / 0.06), transparent 50%);

  /* Noise/grain texture — inline SVG filter that surfaces can overlay for a
     paper-like feel. Default uses fractalNoise; consumers paint with:
       background-image: var(--snice-texture-noise);
       background-blend-mode: overlay;  (or luminosity / soft-light)
     At 4% opacity it adds microtexture without reading as visual noise. */
  --snice-texture-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* Transitions */
  --snice-transition-fast: 150ms;
  --snice-transition-medium: 250ms;
  --snice-transition-slow: 350ms;

  /* Easing curves — pair with transition durations to give motion character.
     Default `ease` is sluggish; prefer these named curves. */
  --snice-ease-out: cubic-bezier(0.22, 1, 0.36, 1);          /* expo-out — confident entrances */
  --snice-ease-in: cubic-bezier(0.64, 0, 0.78, 0);            /* accelerate — exits */
  --snice-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);        /* balanced symmetric */
  --snice-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* slight overshoot on hover/press */
  --snice-ease-bounce: cubic-bezier(0.17, 0.87, 0.4, 1.32);   /* pronounced overshoot */

  /* Z-index */
  /* Layer scale — concept-named (base flow → top notifications). Components
     pick the layer that matches their stacking intent. Never name a z token
     after an element ("modal", "tooltip"); the element is a consumer of a
     layer, not its own layer. */
  --snice-z-base:         0;    /* default document flow */
  --snice-z-raised:       1;    /* hover lift, elevated cards */
  --snice-z-sticky:       10;   /* sticky headers, sticky nav */
  --snice-z-fixed:        30;   /* fixed toolbars, FABs */
  --snice-z-floating:     100;  /* dropdowns, menus, popovers, date pickers */
  --snice-z-scrim:        1000; /* modal/drawer backdrops */
  --snice-z-overlay:      1100; /* modal, drawer panel — above scrim */
  --snice-z-popover-over: 1200; /* tooltips that must show above modals */
  --snice-z-notification: 1300; /* toasts — always on top */

  /* Focus */
  --snice-focus-ring-width: 2px;
  --snice-focus-ring-color: hsl(var(--snice-color-blue-500) / 0.5);
  --snice-focus-ring-offset: 2px;
  /* State-aware rings — use these on variant buttons/inputs so a danger button
     focuses red, success focuses green, etc. Defaults available so components
     can reference them without checking support. */
  --snice-focus-ring-color-primary: hsl(var(--snice-color-blue-500) / 0.5);
  --snice-focus-ring-color-success: hsl(var(--snice-color-green-500) / 0.5);
  --snice-focus-ring-color-warning: hsl(var(--snice-color-yellow-500) / 0.55);
  --snice-focus-ring-color-danger: hsl(var(--snice-color-red-500) / 0.5);

  /* Color scheme for native controls */
  --snice-color-scheme-filter: none;
  color-scheme: light;
}

/* Dark theme */
[data-theme="dark"] {
  --snice-color-primary: hsl(var(--snice-color-blue-500));
  --snice-color-success: hsl(var(--snice-color-green-500));
  --snice-color-warning: hsl(var(--snice-color-yellow-500));
  --snice-color-danger: hsl(var(--snice-color-red-500));
  --snice-color-neutral: hsl(var(--snice-color-gray-400));

  --snice-color-primary-hover: hsl(var(--snice-color-blue-400));
  --snice-color-success-hover: hsl(var(--snice-color-green-400));
  --snice-color-warning-hover: hsl(var(--snice-color-yellow-400));
  --snice-color-danger-hover: hsl(var(--snice-color-red-400));
  --snice-color-neutral-hover: hsl(var(--snice-color-gray-300));

  --snice-color-text: hsl(var(--snice-color-gray-50));
  --snice-color-text-secondary: hsl(var(--snice-color-gray-300));
  --snice-color-text-tertiary: hsl(var(--snice-color-gray-400));
  --snice-color-text-inverse: hsl(var(--snice-color-gray-900));

  /* Surface density scale — dark mode raises by LIGHTENING (convention in
     dark UIs since drop shadows disappear on near-black bg). */
  --snice-color-surface:                   hsl(var(--snice-color-gray-900));
  --snice-color-surface-container-lowest:  hsl(0 0% 15%);
  --snice-color-surface-container-low:     hsl(var(--snice-color-gray-800));
  --snice-color-surface-container:         hsl(var(--snice-color-gray-700));
  --snice-color-surface-container-high:    hsl(30 5% 18%);
  --snice-color-surface-container-highest: hsl(var(--snice-color-gray-800));

  --snice-color-border: hsl(0 0% 35%);
  --snice-color-border-hover: hsl(var(--snice-color-gray-600));
  --snice-color-border-focus: hsl(var(--snice-color-blue-400));
  --snice-color-border-subtle: hsl(0 0% 100% / 0.12);

  --snice-color-surface-disabled: hsl(var(--snice-color-gray-800));
  --snice-color-text-disabled: hsl(var(--snice-color-gray-600));

  --snice-color-overlay-hover: hsl(0 0% 100% / 0.06);
  --snice-color-overlay-selected: hsl(var(--snice-color-blue-400) / 0.16);
  --snice-color-overlay-selected-hover: hsl(var(--snice-color-blue-400) / 0.22);

  --snice-color-primary-subtle: hsl(var(--snice-color-blue-950));
  --snice-color-primary-subtle-hover: hsl(var(--snice-color-blue-900));
  --snice-color-success-subtle: hsl(var(--snice-color-green-950));
  --snice-color-success-subtle-hover: hsl(var(--snice-color-green-900));
  --snice-color-warning-subtle: hsl(var(--snice-color-yellow-950));
  --snice-color-warning-subtle-hover: hsl(var(--snice-color-yellow-900));
  --snice-color-danger-subtle: hsl(var(--snice-color-red-950));
  --snice-color-danger-subtle-hover: hsl(var(--snice-color-red-900));

  /* Dark shadows: hairline white-alpha ring does the primary separation
     work (drop shadows vanish on dark bg), plus a soft drop for depth. */
  --snice-shadow-xs: 0 0 0 1px hsl(0 0% 100% / 0.05), 0 1px 2px 0 hsl(0 0% 0% / 0.4);
  --snice-shadow-sm: 0 0 0 1px hsl(0 0% 100% / 0.06), 0 2px 4px 0 hsl(0 0% 0% / 0.4);
  --snice-shadow-md: 0 0 0 1px hsl(0 0% 100% / 0.07), 0 4px 10px -2px hsl(0 0% 0% / 0.45);
  --snice-shadow-lg: 0 0 0 1px hsl(0 0% 100% / 0.08), 0 10px 24px -4px hsl(0 0% 0% / 0.5);
  --snice-shadow-xl: 0 0 0 1px hsl(0 0% 100% / 0.08), 0 20px 32px -6px hsl(0 0% 0% / 0.55);
  --snice-shadow-2xl: 0 0 0 1px hsl(0 0% 100% / 0.1), 0 25px 50px -12px hsl(0 0% 0% / 0.65);
  --snice-shadow-inset-sm: inset 0 1px 2px 0 hsl(0 0% 0% / 0.3);
  --snice-shadow-inset-md: inset 0 2px 4px 0 hsl(0 0% 0% / 0.4);

  /* Gradients — slightly stronger on dark since the surface is darker */
  --snice-gradient-subtle: linear-gradient(to bottom, hsl(0 0% 100% / 0.04), transparent 60%);
  --snice-gradient-convex: linear-gradient(to bottom, hsl(0 0% 100% / 0.08), transparent 70%);
  --snice-gradient-surface: linear-gradient(to bottom, hsl(0 0% 100% / 0.03), transparent 50%);

  /* Color scheme for native controls */
  --snice-color-scheme-filter: invert(1) hue-rotate(180deg);
  color-scheme: dark;
}

/* Auto dark theme based on system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --snice-color-primary: hsl(var(--snice-color-blue-500));
    --snice-color-success: hsl(var(--snice-color-green-500));
    --snice-color-warning: hsl(var(--snice-color-yellow-500));
    --snice-color-danger: hsl(var(--snice-color-red-500));
    --snice-color-neutral: hsl(var(--snice-color-gray-400));

    --snice-color-primary-hover: hsl(var(--snice-color-blue-400));
    --snice-color-success-hover: hsl(var(--snice-color-green-400));
    --snice-color-warning-hover: hsl(var(--snice-color-yellow-400));
    --snice-color-danger-hover: hsl(var(--snice-color-red-400));
    --snice-color-neutral-hover: hsl(var(--snice-color-gray-300));

    --snice-color-text: hsl(var(--snice-color-gray-50));
    --snice-color-text-secondary: hsl(var(--snice-color-gray-300));
    --snice-color-text-tertiary: hsl(var(--snice-color-gray-400));
    --snice-color-text-inverse: hsl(var(--snice-color-gray-900));

    --snice-color-surface: hsl(var(--snice-color-gray-900));
    --snice-color-surface-container-low: hsl(var(--snice-color-gray-800));
    --snice-color-surface-container: hsl(var(--snice-color-gray-700));
    --snice-color-surface-container-high: hsl(30 5% 18%);
    --snice-color-surface-container-lowest: hsl(0 0% 15%);
    --snice-color-surface-container-highest: hsl(var(--snice-color-gray-800));

    --snice-color-border: hsl(0 0% 35%);
    --snice-color-border-hover: hsl(var(--snice-color-gray-600));
    --snice-color-border-focus: hsl(var(--snice-color-blue-400));

    --snice-color-surface-hover: hsl(var(--snice-color-gray-700));
    --snice-color-surface-active: hsl(var(--snice-color-gray-600));
    --snice-color-surface-disabled: hsl(var(--snice-color-gray-800));
    --snice-color-text-disabled: hsl(var(--snice-color-gray-600));

    --snice-color-primary-subtle: hsl(var(--snice-color-blue-950));
    --snice-color-primary-subtle-hover: hsl(var(--snice-color-blue-900));
    --snice-color-success-subtle: hsl(var(--snice-color-green-950));
    --snice-color-success-subtle-hover: hsl(var(--snice-color-green-900));
    --snice-color-warning-subtle: hsl(var(--snice-color-yellow-950));
    --snice-color-warning-subtle-hover: hsl(var(--snice-color-yellow-900));
    --snice-color-danger-subtle: hsl(var(--snice-color-red-950));
    --snice-color-danger-subtle-hover: hsl(var(--snice-color-red-900));

    --snice-shadow-xs: 0 0 0 1px hsl(0 0% 100% / 0.05), 0 1px 2px 0 hsl(0 0% 0% / 0.4);
    --snice-shadow-sm: 0 0 0 1px hsl(0 0% 100% / 0.06), 0 2px 4px 0 hsl(0 0% 0% / 0.4);
    --snice-shadow-md: 0 0 0 1px hsl(0 0% 100% / 0.07), 0 4px 10px -2px hsl(0 0% 0% / 0.45);
    --snice-shadow-lg: 0 0 0 1px hsl(0 0% 100% / 0.08), 0 10px 24px -4px hsl(0 0% 0% / 0.5);
    --snice-shadow-xl: 0 0 0 1px hsl(0 0% 100% / 0.08), 0 20px 32px -6px hsl(0 0% 0% / 0.55);
    --snice-shadow-2xl: 0 0 0 1px hsl(0 0% 100% / 0.1), 0 25px 50px -12px hsl(0 0% 0% / 0.65);

    /* Color scheme for native controls */
    --snice-color-scheme-filter: invert(1) hue-rotate(180deg);
    color-scheme: dark;
  }
}

/* Density presets — scale spacing globally for compact data-dense views
   (spreadsheet, table, key-value) or spacious editorial views (hero, empty
   state). `comfortable` is the default (no attribute). */
[data-density="compact"] {
  --snice-spacing-3xs: 0.0625rem;
  --snice-spacing-2xs: 0.125rem;
  --snice-spacing-xs: 0.3125rem;
  --snice-spacing-sm: 0.5rem;
  --snice-spacing-md: 0.625rem;
  --snice-spacing-lg: 0.875rem;
  --snice-spacing-xl: 1.25rem;
  --snice-spacing-2xl: 1.75rem;
  --snice-spacing-3xl: 2.5rem;
  --snice-spacing-4xl: 3.75rem;
  --snice-spacing-5xl: 5rem;
}

[data-density="spacious"] {
  --snice-spacing-3xs: 0.1875rem;
  --snice-spacing-2xs: 0.375rem;
  --snice-spacing-xs: 0.75rem;
  --snice-spacing-sm: 1.125rem;
  --snice-spacing-md: 1.5rem;
  --snice-spacing-lg: 2.25rem;
  --snice-spacing-xl: 3rem;
  --snice-spacing-2xl: 4.5rem;
  --snice-spacing-3xl: 6rem;
  --snice-spacing-4xl: 9rem;
  --snice-spacing-5xl: 12rem;
}

/* Print baseline — collapse shadows and animations, preserve colors for
   chart/badge/etc. that intentionally need color. Per-component print rules
   still layer on top (receipt/invoice/estimate/work-order each ship their
   own more specific print CSS). */
@media print {
  :root {
    --snice-shadow-xs: none;
    --snice-shadow-sm: none;
    --snice-shadow-md: none;
    --snice-shadow-lg: none;
    --snice-shadow-xl: none;
    --snice-shadow-2xl: none;
    --snice-shadow-inset-sm: none;
    --snice-shadow-inset-md: none;
  }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    /* Keep meaningful colors in printed charts/badges/flags. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Reduce or disable motion. Two triggers:
     1. OS preference `prefers-reduced-motion: reduce`
     2. Manual attribute `data-motion="reduce"` on any ancestor (typically
        <html>). Same effect — collapse transitions, neutralize animations.
   Consumers use (2) to wire an in-app toggle without touching OS settings. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --snice-transition-fast: 0ms;
    --snice-transition-medium: 0ms;
    --snice-transition-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

[data-motion="reduce"] {
  --snice-transition-fast: 0ms;
  --snice-transition-medium: 0ms;
  --snice-transition-slow: 0ms;
}
[data-motion="reduce"] *,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* data-motion="off" is a stronger opt-out — kills animations entirely (not
   just collapsed to 0ms). Useful for static renders, e2e snapshot tests. */
[data-motion="off"],
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
}