/* Mifumo preview design tokens. Single source for colour, spacing, radius and type on the
   signup, pricing and catalog admin pages. Dark first; light follows the OS unless
   <html data-theme="light|dark"> overrides it. */
:root {
  color-scheme: dark;

  /* Neutrals (zinc) */
  --preview-bg: #1a1a1a;
  --preview-surface: #252525;
  --preview-raised: #2e2e2e;
  --preview-border: #2e2e2e;
  --preview-border-strong: #545454;
  --preview-text: #ececec;
  --preview-muted: #b3b3b3;

  /* One accent, used for primary actions, selected states and focus rings */
  --preview-accent: #cfcfcf;
  --preview-accent-ink: #252525;
  --preview-accent-soft: rgba(207, 207, 207, .12);
  --preview-ring: #7d7d7d;

  /* Status */
  --preview-danger: #f87171;
  --preview-danger-soft: rgba(248, 113, 113, .12);
  --preview-success: #4ade80;
  --preview-success-soft: rgba(74, 222, 128, .12);
  --preview-warn: #fbbf24;
  --preview-warn-soft: rgba(251, 191, 36, .12);

  /* Spacing, 4px grid */
  --preview-s1: 4px; --preview-s2: 8px; --preview-s3: 12px; --preview-s4: 16px; --preview-s5: 20px;
  --preview-s6: 24px; --preview-s8: 32px; --preview-s10: 40px; --preview-s12: 48px; --preview-s16: 64px;

  /* Radius (shadcn/ui: --radius .5rem; md = radius - 2px, xl = radius + 4px) */
  --radius: .625rem;
  --preview-r-control: 10px;
  --preview-r-card: 16px;
  --preview-r-pill: 999px;
  --preview-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
  --preview-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);

  /* Type */
  --preview-font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --preview-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --preview-t12: 12px; --preview-t13: 13px; --preview-t14: 14px; --preview-t16: 16px; --preview-t24: 24px; --preview-t32: 32px;

  /* shadcn/ui token names, so shadcn components and docs snippets map straight onto these */
  --background: var(--preview-bg); --foreground: var(--preview-text);
  --card: var(--preview-surface); --card-foreground: var(--preview-text);
  --primary: var(--preview-accent); --primary-foreground: var(--preview-accent-ink);
  --secondary: var(--preview-raised); --secondary-foreground: var(--preview-text);
  --muted: var(--preview-raised); --muted-foreground: var(--preview-muted);
  --accent: var(--preview-raised); --accent-foreground: var(--preview-text);
  --destructive: var(--preview-danger);
  --border: var(--preview-border); --input: var(--preview-border-strong); --ring: var(--preview-ring);

  /* Sizing */
  --preview-row: 40px;
  --preview-touch: 44px;
  --preview-gutter: 16px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --preview-bg: #fafafa;
    --preview-surface: #ffffff;
    --preview-raised: #f1f1f1;
    --preview-border: #e4e4e4;
    --preview-border-strong: #cfcfcf;
    --preview-text: #252525;
    --preview-muted: #545454;
    --preview-accent: #252525;
    --preview-accent-ink: #ffffff;
    --preview-accent-soft: rgba(37, 37, 37, .07);
    --preview-ring: #7d7d7d;
    --preview-danger: #b91c1c;
    --preview-danger-soft: rgba(185, 28, 28, .08);
    --preview-success: #15803d;
    --preview-success-soft: rgba(21, 128, 61, .10);
    --preview-warn: #a16207;
    --preview-warn-soft: rgba(161, 98, 7, .10);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --preview-bg: #fafafa;
  --preview-surface: #ffffff;
  --preview-raised: #f1f1f1;
  --preview-border: #e4e4e4;
  --preview-border-strong: #cfcfcf;
  --preview-text: #252525;
  --preview-muted: #545454;
  --preview-accent: #252525;
  --preview-accent-ink: #ffffff;
  --preview-accent-soft: rgba(37, 37, 37, .07);
  --preview-ring: #7d7d7d;
  --preview-danger: #b91c1c;
  --preview-danger-soft: rgba(185, 28, 28, .08);
  --preview-success: #15803d;
  --preview-success-soft: rgba(21, 128, 61, .10);
  --preview-warn: #a16207;
  --preview-warn-soft: rgba(161, 98, 7, .10);
}