/* SMALLIMG base tokens — shared family with SMALLSURFER */

:root {
  --si-bg: #f8f3ec;
  --si-bg-glow-a: #fff6c8;
  --si-bg-glow-b: #ffe9a8;
  --si-bg-glow-c: #d8f5e4;
  --si-surface: #ffffff;
  --si-surface-soft: #fbf8f3;
  --si-surface-elevated: #ffffff;
  --si-border: #e8e4df;
  --si-border-strong: #d4cec6;
  --si-ink: #282828;
  --si-muted: #5c6570;
  --si-accent: #ffe459;
  --si-accent-hover: #e5cd50;
  --si-accent-mid: #f0d24a;
  --si-accent-ink: #282828;
  --si-accent-soft: #fff6c8;
  --si-accent-glow: rgba(255, 228, 89, 0.28);
  --si-shadow-cta: 0 8px 24px rgba(40, 40, 40, 0.12);
  --si-stack-accent-face: #d4bc3a;
  --si-stack-secondary-face: #1f9a4a;
  --si-stack-lift: 0px;
  --si-stack-lift-hover: -1px;
  --si-stack-press: 1px;
  --si-secondary: #2bbf5d;
  --si-secondary-hover: #24a851;
  --si-secondary-mid: #3ac96a;
  --si-secondary-ink: #282828;
  --si-secondary-soft: #e7f8ee;
  --si-neumo-out:
    0 1px 2px rgba(40, 40, 40, 0.04),
    0 8px 24px rgba(40, 40, 40, 0.06);
  --si-neumo-in:
    inset 0 1px 2px rgba(40, 40, 40, 0.05);
  --si-success: #1a9148;
  --si-success-soft: var(--si-secondary-soft);
  --si-danger: #3a3532;
  --si-danger-soft: #efeae4;
  --si-danger-edge: color-mix(in srgb, var(--si-ink) 18%, transparent);
  --si-error: #9b3a2f;
  --si-error-soft: #f7ebe8;
  --si-warning-soft: #fff6c8;
  --si-warning-border: color-mix(in srgb, var(--si-accent) 55%, var(--si-ink));
  --si-chip-bg: var(--si-bg);

  --si-radius-sm: 10px;
  --si-radius-md: 16px;
  --si-radius-lg: 24px;
  --si-radius-pill: 999px;

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

  --si-font-sans: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --si-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --si-font-serif: "Fraunces", Georgia, "Times New Roman", serif;

  --si-font-size-xs: 0.75rem;
  --si-font-size-sm: 0.875rem;
  --si-font-size-base: 1rem;
  --si-font-size-lg: 1.125rem;
  --si-font-size-display: clamp(2.15rem, 5.5vw, 3.15rem);

  --si-shadow-xs: 0 1px 2px rgba(40, 40, 40, 0.04);
  --si-shadow-sm: 0 2px 8px rgba(40, 40, 40, 0.05);
  --si-shadow-md: 0 12px 40px rgba(40, 40, 40, 0.07);
  --si-shadow-lg: 0 24px 64px rgba(40, 40, 40, 0.1);
  --si-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --si-dur-fast: 0.16s;
  --si-dur: 0.28s;
  --si-focus-ring: 0 0 0 3px var(--si-surface), 0 0 0 5px rgba(255, 228, 89, 0.45);
  --si-control-h: 2.85rem;
  --si-control-h-lg: 3.1rem;
}