/*
 * Weave Design System — canonical design tokens
 * ------------------------------------------------------------
 * Copy this file into a new project to inherit the same color,
 * typography, spacing, motion, and elevation system used by
 * weave-frontend, nexus-modular, and vitessce.
 *
 * Portable form: plain `:root { … }` + `.light { … }` rules.
 * Works in any project regardless of CSS framework.
 *
 * Tailwind v4 users: wrap the `:root` block in `@theme { … }` to
 * register tokens as utility classes (bg-canvas, text-text-primary,
 * border-border-default, etc.). See `src/styles/globals.css` for
 * the in-repo example.
 *
 * Mirror of the canonical token block in `src/styles/globals.css`.
 * Hand-maintained for now; will become codegen output when the
 * cross-repo centralization plan lands
 * (see docs/design-system-centralization.md).
 */

:root {
	/* Backgrounds */
	--color-canvas:   #10131f;
	--color-app:      #1c1f30;
	--color-subtle:   #131623;
	--color-surface:  #2f3346;
	--color-elevated: #42485d;
	--color-overlay:  #545c74;

	/* Text */
	--color-text-primary:   #ccdbf5;
	--color-text-secondary: #b8c6e0;
	--color-text-muted:     #a3b0cb;
	--color-text-faint:     #7a86a1;
	--color-text-ghost:     #67718b;
	--color-text-on-accent: #1c1f30;

	/* Borders */
	--color-border-strong:  #545c74;
	--color-border-default: #42485d;
	--color-border-subtle:  #2f3346;

	/* Accent */
	--color-accent:       #4c90de;
	--color-accent-hover: #6a9ef0;
	--color-accent-soft:  #b3c7ff;

	/* Semantic */
	--color-success: #a6e3a1;
	--color-warning: #f9e2af;
	--color-error:   #f38ba8;
	--color-info:    #89dceb;

	/* Catppuccin Mocha palette (data viz, categorical colors) */
	--color-ctp-teal:     #94e2d5;
	--color-ctp-peach:    #fab387;
	--color-ctp-sky:      #89dceb;
	--color-ctp-sapphire: #74c7ec;
	--color-ctp-green:    #a6e3a1;
	--color-ctp-yellow:   #f9e2af;
	--color-ctp-red:      #f38ba8;
	--color-ctp-maroon:   #eba0ac;
	--color-ctp-mauve:    #7eadfb;
	--color-ctp-blue:     #87c2fc;
	--color-ctp-lavender: #b3c7ff;

	/* Domain-specific (bound to ctp-* palette for cross-repo consistency) */
	--color-meta-samples:      var(--color-ctp-yellow);
	--color-meta-assays:       var(--color-ctp-sky);
	--color-meta-acquisitions: var(--color-ctp-mauve);
	--color-meta-donors:       var(--color-ctp-maroon);
	--color-meta-sections:     var(--color-ctp-teal);
	--color-no-class:          var(--color-text-faint);

	/* Typography */
	--font-heading: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	--font-sans:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Font sizes */
	--text-xs:   0.62rem;
	--text-sm:   0.75rem;
	--text-md:   0.875rem;
	--text-base: 1rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;

	/* Radius */
	--radius-card:    0.75rem;
	--radius-bubble:  0.5rem;
	--radius-control: 0.375rem;
	--radius-pill:    99px;

	/* Shadows */
	--shadow-popover:  0 4px 20px rgba(0, 0, 0, 0.35);
	--shadow-card:     0 1px 3px rgba(0, 0, 0, 0.12);
	--shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.28);

	/* Motion */
	--motion-duration-fast:   130ms;
	--motion-duration-normal: 150ms;
	--motion-duration-slow:   200ms;
	--motion-ease-default:    ease;
	--motion-ease-out:        ease-out;

	/* Z-index */
	--z-app:     100;
	--z-modal:   250;
	--z-popover: 300;
	--z-overlay: 400;
	--z-max:     9999;
}

/*
 * Light mode overrides — selectors cover the three conventions used across
 * Aspect front-ends so consumers don't need to wire up the toggle themselves:
 *   .light                                    — class-based toggle (Storybook, custom hosts)
 *   :root[data-mantine-color-scheme="light"]  — Mantine host (nexus-modular)
 *   :root[data-theme="light"]                 — Vitessce convention
 *
 * Data-attribute selectors are scoped to `:root` for specificity (0,2,0) so
 * they hold against Mantine's own `:root[data-mantine-color-scheme]` rules
 * without needing !important.
 */
.light,
:root[data-mantine-color-scheme="light"],
:root[data-theme="light"] {
	/* Backgrounds */
	--color-canvas:   #f8f9fc;
	--color-app:      #f0f2f7;
	--color-subtle:   #f3f5fa;
	--color-surface:  #ffffff;
	--color-elevated: #e2e6ef;
	--color-overlay:  #d5dae5;

	/* Text — darkened for WCAG AA on light backgrounds */
	--color-text-primary:   #1e2330;
	--color-text-secondary: #3b4252;
	--color-text-muted:     #4a5568;
	--color-text-faint:     #5c677a;
	--color-text-ghost:     #6b7280;
	--color-text-on-accent: #ffffff;

	/* Borders */
	--color-border-strong:  #b8bfcc;
	--color-border-default: #d5dae5;
	--color-border-subtle:  #e2e6ef;

	/* Accent */
	--color-accent:       #1a72c2;
	--color-accent-hover: #3d6ec4;
	--color-accent-soft:  #2b5aa6;

	/* Semantic */
	--color-success: #40a050;
	--color-warning: #d4990a;
	--color-error:   #d94050;
	--color-info:    #2091b5;

	/* Catppuccin Latte palette */
	--color-ctp-teal:     #179299;
	--color-ctp-peach:    #fe640b;
	--color-ctp-sky:      #04a5e5;
	--color-ctp-sapphire: #209fb5;
	--color-ctp-green:    #40a02b;
	--color-ctp-yellow:   #df8e1d;
	--color-ctp-red:      #d20f39;
	--color-ctp-maroon:   #e64553;
	--color-ctp-mauve:    #8839ef;
	--color-ctp-blue:     #1e66f5;
	--color-ctp-lavender: #7287fd;

	/* Shadow opacities tuned for light mode */
	--shadow-popover:  0 4px 20px rgba(15, 23, 42, 0.12);
	--shadow-card:     0 1px 3px rgba(15, 23, 42, 0.06);
	--shadow-floating: 0 8px 24px rgba(15, 23, 42, 0.10);
}