/* ============================================================
   ScaleIQ Design Tokens
   One design system, two surfaces (dark default, light toggle).
   ============================================================ */

:root,
:root[data-theme="dark"] {
	/* Brand */
	--brand-midnight-navy: #07162B;
	--brand-deep-indigo:   #0B2A4A;
	--brand-electric-azure:#2D7DFF;
	--brand-cyan-glow:     #20E3FF;

	/* Surfaces (mode-specific values) */
	--surface-bg:          #07162B;
	--surface-panel:       #0B2A4A;
	--surface-panel-2:     rgba(11, 42, 74, 0.55);
	--surface-border:      rgba(32, 227, 255, 0.18);
	--surface-border-2:    rgba(32, 227, 255, 0.28);

	/* Text */
	--text-primary:        #F4F7FF;
	--text-secondary:      #9DB2CE;
	--text-muted:          #6E84A3;
	--text-on-cta:         #FFFFFF;

	/* CTA */
	--cta-bg:              #2D7DFF;
	--cta-bg-hover:        #4A8FFF;
	--cta-text:            #FFFFFF;
	--cta-glow:            0 0 0 0 rgba(45, 125, 255, 0);
	--cta-glow-hover:      0 8px 24px rgba(45, 125, 255, 0.45), 0 0 32px rgba(32, 227, 255, 0.25);

	/* Ghost button */
	--ghost-border:        rgba(32, 227, 255, 0.6);
	--ghost-border-hover:  rgba(32, 227, 255, 1);
	--ghost-bg-hover:      rgba(32, 227, 255, 0.06);
	--ghost-text:          #20E3FF;

	/* Glass panels */
	--glass-bg:            rgba(11, 42, 74, 0.55);
	--glass-border:        rgba(32, 227, 255, 0.25);
	--glass-shadow:        0 0 0 0 transparent;
	--glass-glow:          inset 0 0 0 1px rgba(32, 227, 255, 0.12);

	/* Header */
	--header-bg:           rgba(7, 22, 43, 0.7);
	--header-border:       rgba(32, 227, 255, 0.12);

	/* Status (shared) */
	--status-success:      #22C55E;
	--status-warning:      #F59E0B;
	--status-risk:         #EF4444;

	/* Focus */
	--focus-ring:          0 0 0 2px var(--brand-cyan-glow);
	--focus-ring-offset:   3px;

	/* Logo */
	--logo-color:          var(--text-primary);
}

:root[data-theme="light"] {
	--surface-bg:          #F7F9FC;
	--surface-panel:       #FFFFFF;
	--surface-panel-2:     rgba(255, 255, 255, 0.88);
	--surface-border:      rgba(15, 23, 42, 0.08);
	--surface-border-2:    rgba(15, 23, 42, 0.16);

	--text-primary:        #0F172A;
	--text-secondary:      #475569;
	--text-muted:          #64748B;

	--cta-glow:            0 0 0 0 rgba(45, 125, 255, 0);
	--cta-glow-hover:      0 4px 12px rgba(45, 125, 255, 0.35), 0 0 0 1px rgba(45, 125, 255, 0.2);

	--ghost-border:        rgba(45, 125, 255, 0.8);
	--ghost-border-hover:  rgba(45, 125, 255, 1);
	--ghost-bg-hover:      rgba(45, 125, 255, 0.08);
	--ghost-text:          #2D7DFF;

	--glass-bg:            rgba(255, 255, 255, 0.88);
	--glass-border:        rgba(15, 23, 42, 0.08);
	--glass-shadow:        0 6px 24px rgba(15, 23, 42, 0.08);
	--glass-glow:          none;

	--header-bg:           rgba(255, 255, 255, 0.85);
	--header-border:       rgba(15, 23, 42, 0.08);

	--focus-ring:          0 0 0 2px var(--brand-electric-azure);

	--logo-color:          var(--text-primary);
}

/* Type scale */
:root {
	--font-heading: "Segoe UI Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-body:    "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
	--font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

	--fs-h1-d:      4.5rem;   /* 72 */
	--fs-h1-m:      2.75rem;  /* 44 */
	--fs-h2:        2.5rem;   /* 40 */
	--fs-h3:        1.75rem;  /* 28 */
	--fs-lead:      1.25rem;  /* 20 */
	--fs-body:      1rem;     /* 16 */
	--fs-small:     0.875rem; /* 14 */
	--fs-eyebrow:   0.75rem;  /* 12 */

	--lh-h1-d:      5rem;
	--lh-h1-m:      3.25rem;
	--lh-h2:        3rem;
	--lh-h3:        2.25rem;
	--lh-lead:      1.875rem;
	--lh-body:      1.625rem;
	--lh-small:     1.375rem;

	/* Spacing scale (4px base) */
	--s-1:  0.25rem;
	--s-2:  0.5rem;
	--s-3:  0.75rem;
	--s-4:  1rem;
	--s-5:  1.25rem;
	--s-6:  1.5rem;
	--s-8:  2rem;
	--s-10: 2.5rem;
	--s-12: 3rem;
	--s-16: 4rem;
	--s-20: 5rem;
	--s-24: 6rem;
	--s-32: 8rem;

	/* Layout */
	--container-max: 1280px;
	--container-pad: clamp(1rem, 4vw, 5rem);
	--gutter:        1.5rem;
	--header-h:      4rem;

	/* Radius */
	--radius-sm:  6px;
	--radius-md:  10px;
	--radius-lg:  16px;
	--radius-xl:  24px;
	--radius-pill: 999px;

	/* Transitions */
	--t-fast:  150ms cubic-bezier(.2, .8, .2, 1);
	--t-base:  200ms cubic-bezier(.2, .8, .2, 1);
	--t-slow:  250ms cubic-bezier(.2, .8, .2, 1);
}

/* Prefers-reduced-motion contract */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}