/* ==========================================================================
   Design Tokens — COMP2110 Finance Dashboard
   --------------------------------------------------------------------------
   Palette and typography modelled on TradingView's professional look:
     - Cool dark surfaces (slight blue cast) rather than pure black
     - Brand blue accent, teal-green / coral-red for market signal
     - Trebuchet MS as the primary face (TradingView's historical typeface)
       with system fallbacks for Linux/no-Trebuchet machines

   These properties live on :root so they cascade through every component's
   shadow DOM. Reference tokens — never hard-coded values — in widget styles.
   ========================================================================== */

:root {
	/* ---------- Surfaces / backgrounds (TradingView-style cool darks) ------ */
	--surface-base: #131722; /* main page */
	--surface-raised: #1e222d; /* panel background */
	--surface-overlay: #2a2e39; /* hover / nested panels */
	--surface-inset: #131722; /* inputs, frames */
	--surface-header: #1e222d; /* top app bar */
	--surface-status: #131722; /* bottom status bar */

	/* ---------- Borders / dividers ---------- */
	--border-subtle: #2a2e39;
	--border-default: #363a45;
	--border-strong: #50535e;
	--border-focus: #2962ff;

	/* ---------- Text ---------- */
	--text-primary: #d1d4dc;
	--text-secondary: #9598a1;
	--text-tertiary: #6a6d78;
	--text-muted: #4a4d57;
	--text-inverse: #131722;
	--text-on-accent: #ffffff;

	/* ---------- Brand / accents ---------- */
	--accent-primary: #2962ff; /* TradingView blue */
	--accent-primary-hi: #5887ff;
	--accent-primary-lo: #1e4bd1;
	--accent-secondary: #2196f3; /* lighter info blue */
	--accent-secondary-hi: #4fc3f7;

	/* ---------- Semantic / market signal (TradingView teal & coral) ------- */
	--signal-positive: #26a69a;
	--signal-positive-bg: rgba(38, 166, 154, 0.14);
	--signal-negative: #ef5350;
	--signal-negative-bg: rgba(239, 83, 80, 0.14);
	--signal-warning: #ffb74d;
	--signal-warning-bg: rgba(255, 183, 77, 0.14);
	--signal-info: #2196f3;
	--signal-info-bg: rgba(33, 150, 243, 0.14);

	/* ---------- Spacing scale (4px base) ---------- */
	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 40px;
	--space-9: 48px;
	--space-10: 64px;

	/* ---------- Radii ---------- */
	--radius-none: 0;
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-pill: 999px;

	/* ---------- Typography (TradingView-style sans, kept-mono for numerics) */
	--font-sans:
		'Trebuchet MS', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
		sans-serif;
	--font-display:
		'Trebuchet MS', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu,
		sans-serif;
	--font-mono:
		ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;

	--fs-2xs: 10px;
	--fs-xs: 11px;
	--fs-sm: 12px;
	--fs-base: 13px;
	--fs-md: 14px;
	--fs-lg: 16px;
	--fs-xl: 20px;
	--fs-2xl: 28px;
	--fs-3xl: 40px; /* used by the hero "Last" price */

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--lh-tight: 1.15;
	--lh-base: 1.4;
	--lh-relaxed: 1.6;

	--tracking-tight: -0.01em;
	--tracking-base: 0;
	--tracking-wide: 0.02em;
	--tracking-caps: 0.08em;

	/* ---------- Shadows ---------- */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
	--shadow-glow-accent:
		0 0 0 1px rgba(41, 98, 255, 0.35), 0 6px 24px rgba(41, 98, 255, 0.18);

	/* ---------- Layout (left rail removed) ---------- */
	--layout-header-h: 56px;
	--layout-ticker-h: 32px;
	--layout-status-h: 28px;
	--layout-rail-w-r: 320px;
	--layout-gap: var(--space-3);
	--layout-max-w: 1600px;

	/* ---------- Motion ---------- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-fast: 120ms;
	--dur-base: 200ms;
}

/* Global resets that complement the token system. */
html,
body {
	background: var(--surface-base);
	color: var(--text-primary);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

news-widget {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1000; /* Ensure it stays above the dashboard */
	background: #333;
	padding: 10px;
	border-radius: 8px;
	display: block; /* Ensure it is visible */
}

* {
	box-sizing: border-box;
}

/* Tabular figures for price/number rendering — works in both sans & mono. */
.num,
[data-num] {
	font-variant-numeric: tabular-nums;
}