/* styles/01-tokens.css — ONE token set.
   Product ladder copied verbatim from openwav-refine-sound/studio/src/styles/tokens.css
   (lines 53-140 colours incl. track-1..6 and timeline tokens; 150-200 type/radii/spacing),
   then marketing additions, then alias blocks for lifted Mootionblue and Raycast CSS. */

:root {
	color-scheme: dark;

	/* Linear surface ladder, adapted to the Studio workspace. */
	--background: #010102;
	--surface-1: #0f1011;
	--surface-2: #141516;
	--surface-3: #18191a;
	--surface-4: #191a1b;
	--segmented-active-bg: #3e3e44;
	--surface-float: var(--surface-3);
	--surface-hover: rgb(255 255 255 / 0.05);
	--surface-active: rgb(255 255 255 / 0.08);
	--surface-recessed: #0a0b0c;
	--tile-face: #1c1d1f;
	--tile-face-hover: #232427;

	/* Text */
	--foreground: #f7f8f8;
	--foreground-muted: #d0d6e0;
	--foreground-subtle: #8a8f98;
	--foreground-disabled: #62666d;

	/* Lines and fields */
	--border-subtle: #23252a;
	--border: #34343a;
	--border-strong: #3e3e44;
	--input: rgb(255 255 255 / 0.04);

	/* Brand identity is independent of neutral interface accents. */
	--brand-mark: #a8ade0;
	--brand-word: #f7f8f8;
	--brand-ground: #141516;

	/* Accent */
	--accent: #f7f8f8;
	--accent-hover: #ffffff;
	--accent-foreground: #0b0b0b;
	--accent-muted: rgb(247 248 248 / 0.08);
	--accent-muted-hover: rgb(247 248 248 / 0.12);
	--accent-border: rgb(247 248 248 / 0.28);
	--focus-wash: rgb(127 127 127 / 0.18);
	--focus-brightness: 1.12;
	--ring: #f7f8f8;
	--ring-soft: rgb(247 248 248 / 0.50);
	--selection: rgb(247 248 248 / 0.18);

	/* Semantic */
	--danger: #ff6b6b;
	--danger-muted: rgb(255 107 107 / 0.12);
	--danger-border: rgb(255 107 107 / 0.35);
	--warning: #ffb547;
	--warning-muted: rgb(255 181 71 / 0.16);
	--warning-border: rgb(255 181 71 / 0.35);
	--success: #27a644;
	--success-muted: rgb(39 166 68 / 0.12);
	--info: var(--foreground-muted);

	/* Meters */
	--meter-ok: var(--foreground-muted);
	--meter-warn: var(--warning);
	--meter-danger: var(--danger);

	/* Track series (data colours; only inside product frames / data graphics) */
	--track-1: #efae7f;
	--track-2: #99bfee;
	--track-3: #a1c873;
	--track-4: #f5a2d3;
	--track-5: #d2acf7;
	--track-6: #6dce9e;
	--track-7: #ffe14d;

	/* Timeline and piano roll */
	--playhead-live: var(--foreground);
	--playhead-idle: var(--foreground-muted);
	--live-cycle: rgb(255 255 255 / 0.04);
	--loop-on: rgb(255 255 255 / 0.60);
	--loop-off: rgb(102 102 102 / 0.30);
	--ruler-tick: rgb(255 255 255 / 0.12);
	--ruler-tick-cycle: rgb(255 255 255 / 0.22);
	--grid-step: rgb(255 255 255 / 0.03);
	--grid-beat: rgb(255 255 255 / 0.06);
	--grid-cycle: rgb(255 255 255 / 0.10);
	--grid-octave: rgb(255 255 255 / 0.08);
	--lane-zebra: rgb(255 255 255 / 0.015);
	--lane-beat: rgb(255 255 255 / 0.03);
	--lane-cycle: rgb(255 255 255 / 0.07);
	--clip-ink: rgb(0 0 0 / 0.80);
	--clip-ink-soft: rgb(0 0 0 / 0.34);
	--scrim: rgb(0 0 0 / 0.72);

	/* ---- Marketing additions ---- */

	/* Edges */
	--edge: #ffffff12;
	--edge-2: #ffffff1f;

	/* Accent washes */
	--accent-tint: rgb(247 248 248 / .08);
	--accent-glow: rgb(247 248 248 / .10);
	--accent-glow-2: rgb(247 248 248 / .18);
	--accent-ring: rgb(247 248 248 / .5);

	/* Dusk field (closing + footer wordmark) */
	--dusk-1: #151620;
	--dusk-2: #282b43;
	--dusk-3: #585f91;
	--dusk-4: #a8ade0;
	--dusk-5: #d8dbf2;

	/* Type */
	--font-sans: "Geist Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-serif: "Newsreader Variable", Georgia, serif;
	--font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
	--h1: clamp(40px, 3.95vw + 24.6px, 72px);
	--h2: clamp(30px, 2.22vw + 21.3px, 48px);
	--h2-light: clamp(40px, 2.96vw + 28.5px, 64px);
	--h3: clamp(18px, .2vw + 17.3px, 20px);
	--hero-sub: clamp(15px, .5vw + 13px, 19px);
	--lede: clamp(16px, .2vw + 15.3px, 18px);
	--body: 15px; --body-lh: 24px;
	--ui: 14px; --ui-lh: 20px;
	--small: 13px;
	--micro: 11px;
	--wall: clamp(20px, .5vw + 18px, 24px);

	/* Radii */
	--r-14: 14px;
	--r-12: 12px;
	--r-8: 8px;
	--r-6: 6px;
	--r-4: 4px;
	--r-pill: 999px;
	/* Nested navbar geometry: outer radius = inner radius + inset. */
	--landing-cta-height: 40px;
	--landing-cta-radius: 20px;
	--landing-nav-inset: calc((var(--navbar-height) - var(--landing-cta-height)) / 2);
	--landing-nav-radius: calc(var(--landing-cta-radius) + var(--landing-nav-inset));

	/* Layout */
	--col: 1200px;
	--measure: min(620px, 100% - 32px);
	--gutter: 24px;
	--section-y: 128px;
	--panel-under: 168px;
	--navbar-height: 58px;

	/* Motion */
	--ease-out: cubic-bezier(.23, 1, .32, 1);
	--ease: cubic-bezier(.2, .8, .2, 1);
	--ease-press: cubic-bezier(.34, 1.56, .64, 1);
	--ease-slide: cubic-bezier(.215, .61, .355, 1);
	--t-hover: 150ms;
	--t-reveal: 240ms;
	--t-enter: 700ms;

	/* Surface recipes */
	--card-bg: linear-gradient(137deg, #121214 4.87%, #0c0d0f 75.88%);
	--card-bg-glass: linear-gradient(137deg, rgb(18 18 20 / .8) 4.87%, rgb(12 13 15 / .8) 75.88%);
	--card-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--edge-2);
	--pop-shadow: 0 8px 24px -8px rgb(0 0 0 / .45);
	--shell-shadow: 0 40px 90px -40px #000000d9;
	--glow-hover: 0 2px 40px 10px var(--accent-glow), 0 0 16px -7px var(--accent-glow);

	/* ---- Alias block: Mootionblue variable names ---- */
	--home-bg: var(--background);
	--home-card: var(--surface-1);
	--home-edge: var(--edge);
	--sheet-edge: var(--edge);
	--board: var(--surface-1);
	--surface: var(--surface-2);
	--head: var(--surface-3);
	--well: var(--surface-recessed);
	--viewport: var(--surface-recessed);
	--icon: var(--foreground);
	--icon-2: var(--foreground-muted);
	--icon-3: var(--foreground-subtle);
	--icon-4: var(--foreground-disabled);
	--accent-fill: var(--accent);
	--action-fill: var(--accent);
	--on-action: var(--accent-foreground);
	--sel-ink: var(--accent);
	--sel-tint: var(--accent-muted);
	--ph: var(--foreground);
	--tl-col: var(--surface-2);
	--tl-lane: var(--surface-1);
	--r-xs: var(--r-4);
	--r-s: var(--r-6);
	--r-m: var(--r-8);
	--r-l: var(--r-12);
	--r-xl: var(--r-14);
	--font-display: var(--font-sans);
	--page-font: var(--font-sans);
	--mono: var(--font-mono);
	--ink: var(--foreground);
	--bg: var(--background);
	--r-2xs: 2px;
	--r-sm: var(--r-6);
	--r-md: var(--r-8);
	--r-lg: var(--r-12);
	--viz-1: var(--accent);
	--accent-soft: var(--accent-muted);
	--action-fill-hover: var(--accent-hover);
	--action-fill-press: var(--accent-muted-hover);
	--line: var(--border-subtle);
	--line-2: var(--border);
	--ink-3: var(--foreground-subtle);
	--ink-4: var(--foreground-disabled);
	--window-font-family: var(--font-sans);

	/* ---- Alias block: Raycast variable names ---- */
	--grey-900: var(--background);
	--grey-800: #0c0d0f;
	--grey-700: #111214;
	--grey-600: var(--surface-3);
	--grey-500: #2f3031;
	--grey-400: var(--foreground-disabled);
	--grey-300: var(--foreground-subtle);
	--grey-200: var(--foreground-muted);
	--grey-100: #cdcece;
	--grey-50: #e6e6e6;
	--Text-Loud: var(--foreground);
	--Text-Default: var(--foreground-muted);
	--Text-Muted: var(--foreground-subtle);
	--Text-Faint: var(--foreground-disabled);
	--Card-BG: var(--card-bg);
	--Card-Border: var(--edge);
	--Red-Default: var(--accent);
	--red-dark: var(--accent);
	--Red-Muted: var(--accent-muted);
	--Red-Faint: var(--accent-tint);
	--theme-color: 192, 128, 137;
	--spacing-none: 0;
	--spacing-05: 2px;
	--spacing-1: 4px;
	--spacing-1-5: 6px;
	--spacing-2: 8px;
	--spacing-2-5: 10px;
	--spacing-3: 12px;
	--spacing-4: 16px;
	--spacing-5: 20px;
	--spacing-6: 24px;
	--spacing-7: 28px;
	--spacing-8: 32px;
	--spacing-9: 36px;
	--spacing-10: 40px;
	--spacing-12: 48px;
	--spacing-13: 52px;
	--spacing-16: 64px;
	--rounded-md: var(--r-12);
	--rounding-sm: var(--r-4);
	--rounding-md: 10px;
	--rounding-lg: var(--r-12);
	--rounding-normal: var(--r-6);
	--rounding-large: var(--r-12);
	--transition-duration: .25s;
	--separatorColor: var(--edge-2);
	--container-width: var(--col);
	--navbar-total-spacing: 96px;
	--main-font: var(--font-sans);
	--monospace-font: var(--font-mono);
	--font-jetbrains-mono: var(--font-mono);
}

@media (min-width: 880px) {
	:root { --navbar-height: 76px; }
}
@media (max-width: 700px) {
	:root {
		--gutter: 16px;
		--section-y: 80px;
		--panel-under: 72px;
	}
}