/* tokens.css — Cumulus claymorphism design tokens (locked).
   Single :root block. No component selectors here. */
:root {
  /* Colors */
  --color-bg: #f1f5ff;
  --color-bg-card: #ffffff;
  --color-bg-inset: #eaeef7;
  --color-text: #30364f;
  --color-text-muted: #5b616f;
  --color-accent: #a78dfb;
  --color-accent-light: #e9e3ff;
  --color-focus: #6f4fd6;
  --color-on-accent: #1b1430;
  --color-on-pastel: #23283c;

  --pastel-purple: #a78dfb;
  --pastel-yellow: #f8c02c;
  --pastel-pink: #f473b8;
  --pastel-green: #38d49b;
  --pastel-blue: #63a6f8;

  --color-success: #38d49b;
  --color-info: #63a6f8;
  --color-warning: #f8c02c;
  --color-danger: #f473b8;

  /* Radii */
  --radius: 22px;
  --radius-lg: 30px;
  --radius-full: 9999px;
  --border-width: 0;

  /* Clay shadows (lower-right offset, opaque — never a soft glow) */
  --shadow-sm: 5px 7px 0 rgba(80,88,120,0.12), inset 0 1px 0 rgba(255,255,255,0.72);
  --shadow-md: 7px 9px 0 rgba(80,88,120,0.14), inset 0 1px 0 rgba(255,255,255,0.76);
  --shadow-lg: 10px 12px 0 rgba(80,88,120,0.16), inset 0 1px 0 rgba(255,255,255,0.82);
  --shadow-inset: inset 3px 4px 8px rgba(80,88,120,0.16), inset -1px -1px 0 rgba(255,255,255,0.9);

  /* Typography */
  --font-stack: "Nunito Sans", "Avenir Next", Inter, system-ui, sans-serif;
  --weight-heading: 800;
  --weight-body: 500;

  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-base: 17px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: 38px;

  --lh-body: 1.55;
  --lh-heading: 1.2;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Motion */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 120ms;
  --dur-mid: 180ms;
  --dur-slow: 220ms;

  /* Backdrop dim for modal (opaque dim — NOT blur) */
  --backdrop-dim: rgba(48,54,79,0.45);
}