/*
  Design tokens — Voice Studio
  Original design language inspired by modern AI SaaS products
  (generous whitespace, one confident accent color, dark sidebar / light canvas).
  Not a copy of any specific product's branding or layout.
*/
:root {
  /* Brand accent */
  --accent-50:  #f1efff;
  --accent-100: #e4e0ff;
  --accent-200: #c9c0ff;
  --accent-300: #a99bff;
  --accent-400: #8b77fb;
  --accent-500: #6a52f0;
  --accent-600: #5639dd;
  --accent-700: #452cb3;
  --accent-800: #362389;
  --accent-contrast: #ffffff;

  /* Secondary accent (success / audio / positive actions) */
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;

  /* Status */
  --danger-50:  #fef2f2;
  --danger-300: #fca5a5;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;

  /* Neutrals */
  --ink-900: #11121a;
  --ink-800: #1b1c27;
  --ink-700: #2c2e3d;
  --ink-600: #474a5f;
  --ink-500: #6b6e85;
  --ink-400: #8d90a3;
  --ink-300: #b4b6c4;
  --ink-200: #dcdde4;
  --ink-100: #ededf2;
  --ink-50:  #f6f6f9;
  --white: #ffffff;

  /* Surfaces */
  --bg-canvas: var(--ink-50);
  --bg-surface: var(--white);
  --bg-surface-raised: var(--white);
  --bg-sidebar: #131420;
  --bg-sidebar-hover: #1d1e2e;
  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --topbar-bg: rgba(246, 246, 249, 0.85);

  /* Ambient app-shell backdrop (behind the workspace canvas) */
  --app-grid-line: rgba(17, 18, 26, 0.05);
  --app-blob-opacity: 0.55;
  --app-blob-color-1: #9b8bff;
  --app-blob-color-2: #35d9c4;
  --app-blob-color-3: #c9a3ff;
  --app-particle-color: rgba(90, 70, 200, 0.4);

  /* Text */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-400);
  --text-on-accent: #ffffff;
  --text-on-dark: #e9e9f4;
  --text-on-dark-muted: #9293ab;

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

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(17, 18, 26, 0.04);
  --shadow-sm: 0 2px 8px rgba(17, 18, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 18, 26, 0.08);
  --shadow-lg: 0 16px 48px rgba(17, 18, 26, 0.12);
  --shadow-focus: 0 0 0 3px rgba(106, 82, 240, 0.25);

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;

  /* Layout */
  --sidebar-w: 264px;
  --topbar-h: 72px;
  --content-max-w: 1180px;

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

/*
  Dark mode — applied app-wide via the theme toggle (not the public
  marketing pages, which keep their always-dark glass look).
  Overrides the raw neutral scale + surface/text aliases; every
  component built on those tokens adapts automatically.
*/
:root[data-theme="dark"] {
  --ink-50:  #15161e;
  --ink-100: #1b1c27;
  --ink-200: #262838;
  --ink-300: #363a52;
  --ink-400: #4b4e68;
  --ink-500: #80829a;
  --ink-600: #9c9eb5;
  --ink-700: #c0c2d2;
  --ink-800: #dcdde8;
  --ink-900: #f3f3f8;
  --white: #15161e;

  --accent-50: #221d3f;

  --bg-canvas: #0b0c11;
  --bg-surface: var(--ink-50);
  --bg-surface-raised: var(--ink-100);
  --topbar-bg: rgba(11, 12, 17, 0.75);

  --app-grid-line: rgba(255, 255, 255, 0.07);
  --app-blob-opacity: 0.55;
  --app-blob-color-1: var(--accent-400);
  --app-blob-color-2: var(--teal-400);
  --app-blob-color-3: #8b5cf6;
  --app-particle-color: rgba(255, 255, 255, 0.55);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.55);
}