/**
 * SignalMind — Design System
 *
 * The single source of truth for the visual language. Nothing else in the theme may
 * hard-code a colour, size, radius, shadow or easing; every other stylesheet composes
 * from the custom properties declared here.
 *
 * Naming: --sm-<group>-<role>-<modifier>
 *
 *   Primitives  raw values, never used directly in components
 *   Semantics   role-named aliases of primitives, this is what components consume
 *
 * @package SignalMind
 */

:root {
	color-scheme: dark;

	/* ==========================================================================
	   1. COLOUR — PRIMITIVES
	   Raw palette. Do not reference these in components; use the semantic layer.
	   ========================================================================== */

	/* Neutral — cool-toned, tuned to the #06070A / #0D1117 base */
	--sm-neutral-0: #ffffff;
	--sm-neutral-50: #f7f8fa;
	--sm-neutral-100: #e9ecf1;
	--sm-neutral-200: #d2d7e0;
	--sm-neutral-300: #b4bbc7;
	--sm-neutral-400: #9ca3af;
	--sm-neutral-500: #7a828f;
	--sm-neutral-600: #5c636e;
	--sm-neutral-700: #3f4550;
	--sm-neutral-800: #252a33;
	--sm-neutral-850: #181d25;
	--sm-neutral-900: #0d1117;
	--sm-neutral-950: #06070a;

	/* Primary — signal green */
	--sm-primary-50: #e6fff8;
	--sm-primary-100: #b8ffea;
	--sm-primary-200: #7dfcd8;
	--sm-primary-300: #3df5c3;
	--sm-primary-400: #0fedb4;
	--sm-primary-500: #00e5a8;
	--sm-primary-600: #00c48f;
	--sm-primary-700: #00a176;
	--sm-primary-800: #007e5d;
	--sm-primary-900: #005b43;

	/* Accent — intelligence blue */
	--sm-accent-50: #e5f8ff;
	--sm-accent-100: #b8ecff;
	--sm-accent-200: #7dddff;
	--sm-accent-300: #3dceff;
	--sm-accent-400: #14c8ff;
	--sm-accent-500: #00c2ff;
	--sm-accent-600: #00a3d9;
	--sm-accent-700: #0084b0;
	--sm-accent-800: #006588;
	--sm-accent-900: #004760;

	/* Status — reused by the product surface for long/short and win/loss */
	--sm-success-400: #34e39b;
	--sm-success-500: #12c97f;
	--sm-success-600: #0ba368;
	--sm-warning-400: #fbbf4c;
	--sm-warning-500: #f5a623;
	--sm-warning-600: #d1861a;
	--sm-danger-400: #ff7a7a;
	--sm-danger-500: #f24b4b;
	--sm-danger-600: #d13636;
	--sm-info-400: #6fb3ff;
	--sm-info-500: #3d90f5;
	--sm-info-600: #2a72cc;

	/* Alpha channels — layered on the dark base for borders, washes and scrims */
	--sm-alpha-white-2: rgba(255, 255, 255, 0.02);
	--sm-alpha-white-4: rgba(255, 255, 255, 0.04);
	--sm-alpha-white-6: rgba(255, 255, 255, 0.06);
	--sm-alpha-white-8: rgba(255, 255, 255, 0.08);
	--sm-alpha-white-12: rgba(255, 255, 255, 0.12);
	--sm-alpha-white-16: rgba(255, 255, 255, 0.16);
	--sm-alpha-white-24: rgba(255, 255, 255, 0.24);
	--sm-alpha-white-40: rgba(255, 255, 255, 0.4);
	--sm-alpha-white-64: rgba(255, 255, 255, 0.64);
	--sm-alpha-black-24: rgba(6, 7, 10, 0.24);
	--sm-alpha-black-48: rgba(6, 7, 10, 0.48);
	--sm-alpha-black-72: rgba(6, 7, 10, 0.72);
	--sm-alpha-black-88: rgba(6, 7, 10, 0.88);
	--sm-alpha-primary-8: rgba(0, 229, 168, 0.08);
	--sm-alpha-primary-16: rgba(0, 229, 168, 0.16);
	--sm-alpha-primary-24: rgba(0, 229, 168, 0.24);
	--sm-alpha-primary-40: rgba(0, 229, 168, 0.4);
	--sm-alpha-accent-8: rgba(0, 194, 255, 0.08);
	--sm-alpha-accent-16: rgba(0, 194, 255, 0.16);
	--sm-alpha-accent-24: rgba(0, 194, 255, 0.24);
	--sm-alpha-danger-12: rgba(242, 75, 75, 0.12);
	--sm-alpha-success-12: rgba(18, 201, 127, 0.12);
	--sm-alpha-warning-12: rgba(245, 166, 35, 0.12);

	/* ==========================================================================
	   2. COLOUR — SEMANTIC
	   The only colour tokens components are allowed to use.
	   ========================================================================== */

	/* Surfaces, from furthest back to closest to the viewer */
	--sm-color-bg: var(--sm-neutral-950);
	--sm-color-bg-alt: #08090d;
	--sm-color-surface: var(--sm-neutral-900);
	--sm-color-surface-raised: #11161f;
	--sm-color-surface-overlay: #141a24;
	--sm-color-surface-sunken: #040507;
	--sm-color-surface-glass: rgba(13, 17, 23, 0.72);
	--sm-color-surface-hover: var(--sm-alpha-white-4);
	--sm-color-surface-active: var(--sm-alpha-white-6);

	/* Text */
	--sm-color-text: var(--sm-neutral-0);
	--sm-color-text-secondary: var(--sm-neutral-300);
	--sm-color-text-muted: var(--sm-neutral-400);
	--sm-color-text-subtle: var(--sm-neutral-500);
	--sm-color-text-disabled: var(--sm-neutral-600);
	--sm-color-text-inverse: var(--sm-neutral-950);
	--sm-color-text-brand: var(--sm-primary-500);
	--sm-color-text-link: var(--sm-primary-400);
	--sm-color-text-link-hover: var(--sm-primary-300);

	/* Brand */
	--sm-color-primary: var(--sm-primary-500);
	--sm-color-primary-hover: var(--sm-primary-400);
	--sm-color-primary-active: var(--sm-primary-600);
	--sm-color-primary-subtle: var(--sm-alpha-primary-8);
	--sm-color-primary-contrast: #03231a;
	--sm-color-accent: var(--sm-accent-500);
	--sm-color-accent-hover: var(--sm-accent-400);
	--sm-color-accent-subtle: var(--sm-alpha-accent-8);
	--sm-color-accent-contrast: #001d2b;

	/* Borders and dividers */
	--sm-color-border: var(--sm-alpha-white-8);
	--sm-color-border-subtle: var(--sm-alpha-white-4);
	--sm-color-border-strong: var(--sm-alpha-white-16);
	--sm-color-border-brand: var(--sm-alpha-primary-40);
	--sm-color-divider: var(--sm-alpha-white-6);

	/* Feedback */
	--sm-color-success: var(--sm-success-500);
	--sm-color-success-surface: var(--sm-alpha-success-12);
	--sm-color-warning: var(--sm-warning-500);
	--sm-color-warning-surface: var(--sm-alpha-warning-12);
	--sm-color-danger: var(--sm-danger-500);
	--sm-color-danger-surface: var(--sm-alpha-danger-12);
	--sm-color-info: var(--sm-info-500);
	--sm-color-info-surface: rgba(61, 144, 245, 0.12);

	/* Market direction — product vocabulary, shared with the app surface */
	--sm-color-bull: var(--sm-success-500);
	--sm-color-bear: var(--sm-danger-500);
	--sm-color-flat: var(--sm-neutral-500);

	/* Interaction */
	--sm-color-focus: var(--sm-primary-400);
	--sm-color-focus-ring: var(--sm-alpha-primary-40);
	--sm-color-selection-bg: var(--sm-alpha-primary-24);
	--sm-color-selection-text: var(--sm-neutral-0);
	--sm-color-scrim: var(--sm-alpha-black-72);
	--sm-color-backdrop: rgba(6, 7, 10, 0.6);

	/* Form controls */
	--sm-color-field-bg: var(--sm-alpha-white-4);
	--sm-color-field-border: var(--sm-alpha-white-12);
	--sm-color-field-border-focus: var(--sm-primary-500);
	--sm-color-field-placeholder: var(--sm-neutral-500);

	/* ==========================================================================
	   3. GRADIENTS, GLOWS & DECORATIVE FILLS
	   ========================================================================== */

	--sm-gradient-brand: linear-gradient(135deg, var(--sm-primary-500) 0%, var(--sm-accent-500) 100%);
	--sm-gradient-brand-soft: linear-gradient(135deg, var(--sm-alpha-primary-16) 0%, var(--sm-alpha-accent-16) 100%);
	--sm-gradient-text: linear-gradient(120deg, var(--sm-neutral-0) 12%, var(--sm-primary-300) 52%, var(--sm-accent-300) 96%);
	--sm-gradient-surface: linear-gradient(180deg, var(--sm-alpha-white-4) 0%, transparent 100%);
	--sm-gradient-border: linear-gradient(135deg, var(--sm-alpha-white-16), transparent 45%, var(--sm-alpha-primary-24));
	--sm-gradient-fade-bottom: linear-gradient(180deg, transparent, var(--sm-color-bg));
	--sm-gradient-fade-top: linear-gradient(0deg, transparent, var(--sm-color-bg));
	--sm-gradient-mesh: radial-gradient(60% 60% at 20% 0%, var(--sm-alpha-primary-16), transparent 70%),
		radial-gradient(50% 50% at 85% 10%, var(--sm-alpha-accent-16), transparent 70%);

	--sm-glow-primary: 0 0 0 1px var(--sm-alpha-primary-24), 0 0 32px -8px var(--sm-alpha-primary-40);
	--sm-glow-accent: 0 0 0 1px var(--sm-alpha-accent-24), 0 0 32px -8px rgba(0, 194, 255, 0.4);
	--sm-glow-soft: 0 0 48px -12px var(--sm-alpha-primary-24);

	/* Hairline grid used behind hero-class surfaces */
	--sm-pattern-grid-size: 64px;
	--sm-pattern-grid-color: var(--sm-alpha-white-2);

	/* ==========================================================================
	   4. TYPOGRAPHY
	   ========================================================================== */

	/* Families. Variable-font-first with a high-quality native fallback chain, so the
	   theme renders correctly with zero webfont requests until fonts are dropped into
	   assets/fonts/ and declared with @font-face. */
	--sm-font-sans: "SignalMind Sans", "Inter var", Inter, -apple-system, BlinkMacSystemFont,
		"Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sm-font-display: var(--sm-font-sans);
	--sm-font-mono: "SignalMind Mono", "JetBrains Mono", "SFMono-Regular", ui-monospace,
		Menlo, Consolas, "Liberation Mono", monospace;

	/* Weights */
	--sm-weight-regular: 400;
	--sm-weight-medium: 500;
	--sm-weight-semibold: 600;
	--sm-weight-bold: 700;
	--sm-weight-extrabold: 800;

	/*
	 * Fixed type scale.
	 *
	 * The scale is deliberately not fluid: the brand sizes are exact, and 36px
	 * is a hard ceiling for display type at every breakpoint. The ramp below
	 * lands on those sizes, so a component styled with `--sm-text-3xl` is the
	 * same 26px as an <h2> and hierarchy can never drift between the two.
	 *
	 *   2xs 11 · xs 12 · sm 14 · base/md 16 · lg 18 · xl 20 · 2xl 22 · 3xl 26 · 4xl/5xl 36
	 */
	--sm-text-2xs: 0.6875rem;  /* 11px */
	--sm-text-xs: 0.75rem;     /* 12px */
	--sm-text-sm: 0.875rem;    /* 14px */
	--sm-text-base: 1rem;      /* 16px */
	--sm-text-md: 1rem;        /* 16px — lead paragraphs and subheadings */
	--sm-text-lg: 1.125rem;    /* 18px */
	--sm-text-xl: 1.25rem;     /* 20px */
	--sm-text-2xl: 1.375rem;   /* 22px */
	--sm-text-3xl: 1.625rem;   /* 26px */
	--sm-text-4xl: 2.25rem;    /* 36px */
	--sm-text-5xl: 2.25rem;    /* 36px — display type is capped at the h1 size */

	/* Element defaults. Headings reference these, never the ramp above, so the
	   document outline stays fixed even if a component size is retuned. */
	--sm-text-h1: 2.25rem;     /* 36px */
	--sm-text-h2: 1.625rem;    /* 26px */
	--sm-text-h3: 1.375rem;    /* 22px */
	--sm-text-h4: 1.25rem;     /* 20px */
	--sm-text-h5: 1.125rem;    /* 18px */
	--sm-text-h6: 1rem;        /* 16px */
	--sm-text-body: 1rem;      /* 16px — p, li, subheadings */

	/* Line heights */
	--sm-leading-none: 1;
	--sm-leading-tight: 1.1;
	--sm-leading-snug: 1.25;
	--sm-leading-normal: 1.5;
	--sm-leading-relaxed: 1.65;
	--sm-leading-loose: 1.8;

	/* Tracking. Large display text needs negative tracking to read as one shape. */
	--sm-tracking-tighter: -0.035em;
	--sm-tracking-tight: -0.022em;
	--sm-tracking-snug: -0.012em;
	--sm-tracking-normal: 0;
	--sm-tracking-wide: 0.02em;
	--sm-tracking-wider: 0.06em;
	--sm-tracking-widest: 0.12em;

	/* Measure */
	--sm-measure-narrow: 46ch;
	--sm-measure: 68ch;
	--sm-measure-wide: 82ch;

	/* ==========================================================================
	   5. SPACING
	   4px base unit. Steps 0–4 are for component internals, 12+ for layout.
	   ========================================================================== */

	--sm-space-0: 0;
	--sm-space-px: 1px;
	--sm-space-0-5: 0.125rem;
	--sm-space-1: 0.25rem;
	--sm-space-1-5: 0.375rem;
	--sm-space-2: 0.5rem;
	--sm-space-2-5: 0.625rem;
	--sm-space-3: 0.75rem;
	--sm-space-3-5: 0.875rem;
	--sm-space-4: 1rem;
	--sm-space-5: 1.25rem;
	--sm-space-6: 1.5rem;
	--sm-space-7: 1.75rem;
	--sm-space-8: 2rem;
	--sm-space-9: 2.25rem;
	--sm-space-10: 2.5rem;
	--sm-space-11: 2.75rem;
	--sm-space-12: 3rem;
	--sm-space-14: 3.5rem;
	--sm-space-16: 4rem;
	--sm-space-20: 5rem;
	--sm-space-24: 6rem;
	--sm-space-28: 7rem;
	--sm-space-32: 8rem;
	--sm-space-40: 10rem;
	--sm-space-48: 12rem;

	/* Fluid rhythm — vertical section padding and horizontal page gutters */
	--sm-gutter: clamp(1.25rem, 0.85rem + 1.78vw, 2.5rem);
	--sm-section-y: clamp(4rem, 2.7rem + 5.8vw, 8rem);
	--sm-section-y-sm: clamp(2.5rem, 1.9rem + 2.7vw, 4.5rem);
	--sm-section-y-lg: clamp(5.5rem, 3.5rem + 8.9vw, 11rem);
	--sm-stack: clamp(1rem, 0.85rem + 0.67vw, 1.5rem);
	--sm-grid-gap: clamp(1rem, 0.7rem + 1.33vw, 2rem);
	--sm-grid-gap-lg: clamp(1.5rem, 1.05rem + 2vw, 3rem);

	/* ==========================================================================
	   6. RADIUS
	   ========================================================================== */

	--sm-radius-none: 0;
	--sm-radius-xs: 4px;
	--sm-radius-sm: 6px;
	--sm-radius-md: 8px;
	--sm-radius-lg: 12px;
	--sm-radius-xl: 16px;
	--sm-radius-2xl: 20px;
	--sm-radius-3xl: 28px;
	--sm-radius-4xl: 36px;
	--sm-radius-pill: 999px;
	--sm-radius-circle: 50%;

	/* ==========================================================================
	   7. CONTAINERS & LAYOUT
	   ========================================================================== */

	--sm-container-xs: 30rem;    /* 480px */
	--sm-container-sm: 40rem;    /* 640px */
	--sm-container-md: 48rem;    /* 768px */
	--sm-container-lg: 64rem;    /* 1024px */
	--sm-container-xl: 75rem;    /* 1200px */
	--sm-container-2xl: 82.5rem; /* 1320px */
	--sm-container-full: 90rem;  /* 1440px */
	--sm-container: var(--sm-container-xl);
	--sm-container-prose: var(--sm-measure);

	--sm-header-height: 68px;
	--sm-header-height-sm: 60px;
	--sm-border-width: 1px;
	--sm-border-width-thick: 2px;
	--sm-ring-width: 3px;
	--sm-icon-size: 20px;
	--sm-icon-size-sm: 16px;
	--sm-icon-size-lg: 24px;
	--sm-control-height: 44px;
	--sm-control-height-sm: 36px;
	--sm-control-height-lg: 52px;

	/* Breakpoints. Media queries cannot read custom properties, so these exist for
	   documentation and for JavaScript to read from the computed style:
	   sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1440 */
	--sm-bp-sm: 480px;
	--sm-bp-md: 768px;
	--sm-bp-lg: 1024px;
	--sm-bp-xl: 1280px;
	--sm-bp-2xl: 1440px;

	/* ==========================================================================
	   8. MOTION
	   ========================================================================== */

	--sm-duration-instant: 60ms;
	--sm-duration-fast: 120ms;
	--sm-duration-base: 200ms;
	--sm-duration-slow: 320ms;
	--sm-duration-slower: 480ms;
	--sm-duration-slowest: 720ms;

	--sm-ease-linear: linear;
	--sm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--sm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--sm-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
	--sm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--sm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	--sm-transition-colors: color var(--sm-duration-fast) var(--sm-ease-standard),
		background-color var(--sm-duration-fast) var(--sm-ease-standard),
		border-color var(--sm-duration-fast) var(--sm-ease-standard),
		fill var(--sm-duration-fast) var(--sm-ease-standard);
	--sm-transition-transform: transform var(--sm-duration-base) var(--sm-ease-out);
	--sm-transition-opacity: opacity var(--sm-duration-base) var(--sm-ease-standard);
	--sm-transition-shadow: box-shadow var(--sm-duration-base) var(--sm-ease-standard);
	--sm-transition-base: all var(--sm-duration-base) var(--sm-ease-standard);

	/* ==========================================================================
	   9. Z-INDEX
	   A closed scale. Never write a raw z-index anywhere else in the theme.
	   ========================================================================== */

	--sm-z-behind: -1;
	--sm-z-base: 0;
	--sm-z-raised: 10;
	--sm-z-dropdown: 100;
	--sm-z-sticky: 200;
	--sm-z-header: 300;
	--sm-z-backdrop: 400;
	--sm-z-drawer: 500;
	--sm-z-modal: 600;
	--sm-z-popover: 700;
	--sm-z-toast: 800;
	--sm-z-tooltip: 900;
	--sm-z-max: 9999;

	/* ==========================================================================
	   10. SHADOWS
	   Tuned for a dark UI: deep, low-opacity ambients plus a hairline top rim.
	   ========================================================================== */

	--sm-shadow-none: none;
	--sm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
	--sm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.36), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
	--sm-shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.44), 0 2px 6px -2px rgba(0, 0, 0, 0.36);
	--sm-shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.56), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
	--sm-shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.64), 0 8px 20px -8px rgba(0, 0, 0, 0.44);
	--sm-shadow-2xl: 0 40px 80px -20px rgba(0, 0, 0, 0.72), 0 16px 32px -12px rgba(0, 0, 0, 0.5);
	--sm-shadow-inner: inset 0 1px 0 var(--sm-alpha-white-6);
	--sm-shadow-rim: inset 0 1px 0 var(--sm-alpha-white-8), 0 0 0 1px var(--sm-alpha-white-4);
	--sm-shadow-ring: 0 0 0 var(--sm-ring-width) var(--sm-color-focus-ring);
	--sm-shadow-card: var(--sm-shadow-lg), var(--sm-shadow-inner);
	--sm-shadow-header: 0 1px 0 var(--sm-color-border), 0 8px 24px -16px rgba(0, 0, 0, 0.8);

	/* Blur used by glass surfaces */
	--sm-blur-sm: 8px;
	--sm-blur-md: 16px;
	--sm-blur-lg: 24px;
}

/* Motion tokens collapse to zero for users who ask for reduced motion, so a single
   declaration disables animation everywhere the tokens are used. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--sm-duration-instant: 1ms;
		--sm-duration-fast: 1ms;
		--sm-duration-base: 1ms;
		--sm-duration-slow: 1ms;
		--sm-duration-slower: 1ms;
		--sm-duration-slowest: 1ms;
	}
}

/* Higher-contrast borders and text when the OS asks for them. */
@media (prefers-contrast: more) {
	:root {
		--sm-color-border: var(--sm-alpha-white-24);
		--sm-color-border-strong: var(--sm-alpha-white-40);
		--sm-color-text-muted: var(--sm-neutral-300);
		--sm-color-text-subtle: var(--sm-neutral-400);
	}
}