/* OpenMagpie shared Tailwind theme + monorepo source globs.
 *
 * Brand palette (locked):
 *   --color-ink    #111111
 *   --color-paper  #F7F7F5
 *   --color-signal #00B7C3
 *   --color-glow   #7DF9FF
 *
 * Each app's `globals.css` imports this via the `@magpie/tailwind-config` package
 * specifier, which resolves through this package's `style` export (keep that
 * export map). Update the brand palette / source globs here once; every app
 * picks it up.
 */

/* Monorepo source globs — Tailwind v4 does NOT auto-walk into sibling
 * workspace packages, so we tell it where to look. The wildcard in
 * `packages/*` and `apps/*` means new packages and new apps are picked up
 * automatically; no edit needed when adding `packages/foo` or `apps/bar`.
 * Paths are relative to THIS file (web/packages/tailwind-config/theme.css). */
@source "../*/src/**/*.{ts,tsx,js,jsx}";
@source "../../apps/*/src/**/*.{ts,tsx,js,jsx}";

@theme {
  /* Brand — exact values from the spec */
  --color-ink: #111111;
  --color-paper: #f7f7f5;
  --color-signal: #00b7c3;
  --color-glow: #7df9ff;

  /* Signal scale (derived hue ramp for hover / focus / disabled). */
  --color-signal-50: #e7f9fb;
  --color-signal-100: #c4f0f4;
  --color-signal-200: #9ce5ec;
  --color-signal-300: #5fd2dc;
  --color-signal-400: #2bc1cc;
  --color-signal-500: #00b7c3;
  --color-signal-600: #009ba6;
  --color-signal-700: #00777f;
  --color-signal-800: #005e64;
  --color-signal-900: #00474c;

  /* Neutrals derived from ink/paper for surfaces, borders, muted text. */
  --color-paper-soft: #f3f1ea;
  --color-paper-deep: #ecebe4;
  --color-ink-soft: #1c2024;
  --color-ink-muted: #4b5158;
  --color-ink-subtle: #6e747b;

  --font-sans: var(--font-poppins), system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

/* Radix Toast enter/exit + swipe for `@magpie/ui` <NotificationProvider>.
 * Self-contained (this stack has no tailwind animate plugin); driven off the
 * data-state / data-swipe attributes Radix sets. Motion is disabled under
 * prefers-reduced-motion. */
@keyframes magpie-toast-in {
  from {
    opacity: 0;
    transform: translateX(110%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes magpie-toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(110%);
  }
}

.magpie-toast[data-state="open"] {
  animation: magpie-toast-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.magpie-toast[data-state="closed"] {
  animation: magpie-toast-out 120ms ease-in;
}

.magpie-toast[data-swipe="move"] {
  transform: translateX(var(--radix-toast-swipe-move-x));
}

.magpie-toast[data-swipe="cancel"] {
  transform: translateX(0);
  transition: transform 180ms ease-out;
}

.magpie-toast[data-swipe="end"] {
  animation: magpie-toast-out 120ms ease-in;
}

@media (prefers-reduced-motion: reduce) {
  .magpie-toast[data-state="open"],
  .magpie-toast[data-state="closed"],
  .magpie-toast[data-swipe="end"] {
    animation: none;
  }
}