/* Legacy design-token names → Web Awesome tokens.
   Loaded after cmbot-theme.css and before every stylesheet that still speaks the old vocabulary
   (styles.css, sub-editor.css, the Video Lab). New code should read --wa-* directly. */
:root{
  /* Every token below is an ALIAS of a Web Awesome token (see cmbot-theme.css for the values). The legacy names stay so
     the many existing rules keep working, but there is exactly one source of truth: change the theme, not these. */

  /* --- surfaces: lowered (page) < default (cards, sidebar) < raised < raised+text tint --- */
  --bg:var(--wa-color-surface-lowered);
  --surface:var(--wa-color-surface-default);
  --surface-2:var(--wa-color-surface-raised);
  --surface-3:color-mix(in oklab, var(--wa-color-surface-raised), var(--wa-color-text-normal) 8%);
  --border:var(--wa-color-surface-border);
  --border-strong:var(--wa-color-neutral-border-loud);
  --overlay:var(--wa-color-overlay-modal);

  /* --- text --- */
  --text:var(--wa-color-text-normal);
  --muted:var(--wa-color-text-quiet);
  --faint:color-mix(in oklab, var(--wa-color-text-quiet), var(--wa-color-surface-default) 38%);

  /* --- primary = the brand role --- */
  --primary:var(--wa-color-brand-fill-loud);
  --primary-hover:color-mix(in oklab, var(--primary), var(--wa-color-text-normal) 14%);
  --primary-press:color-mix(in oklab, var(--primary), var(--wa-color-text-normal) 26%);
  --primary-text:var(--wa-color-brand-on-loud);
  --primary-soft:color-mix(in oklab, var(--primary) 12%, transparent);
  --on-primary:var(--primary-text);
  --secondary:var(--wa-color-neutral-on-normal);
  --secondary-soft:color-mix(in oklab, var(--secondary) 12%, transparent);
  --tertiary:var(--wa-color-neutral-on-quiet);
  --tertiary-soft:color-mix(in oklab, var(--tertiary) 12%, transparent);

  /* --- ink: the neutral "loud" fill, for the final-commit action --- */
  --ink:var(--wa-color-neutral-fill-loud);
  --ink-hover:color-mix(in oklab, var(--ink), var(--wa-color-text-normal) 14%);
  --ink-text:var(--wa-color-neutral-on-loud);

  /* --- accents --- */
  --accent-amber:var(--wa-color-yellow-70);
  --accent-rose:var(--wa-color-pink-60);

  /* --- semantic (library variants: success / warning / danger) --- */
  --success:var(--wa-color-success-fill-loud);
  --success-soft:color-mix(in oklab, var(--success) 16%, transparent);
  --success-text:var(--wa-color-success-on-quiet);
  --warning:var(--wa-color-warning-fill-loud);
  --warning-soft:color-mix(in oklab, var(--warning) 16%, transparent);
  --warning-text:var(--wa-color-warning-on-quiet);
  --danger:var(--wa-color-danger-fill-loud);
  --danger-soft:color-mix(in oklab, var(--danger) 16%, transparent);
  --danger-text:var(--wa-color-danger-on-quiet);

  /* --- platform identity colours (not part of the library; tuned per colour scheme) --- */
  --facebook:light-dark(#2766B2, #5293D8);
  --instagram:light-dark(#B73371, #E173A0);
  --youtube:light-dark(#B92B27, #E2554E);
  --linkedin:light-dark(#25649B, #4A93C9);
  --facebook-soft:color-mix(in oklab, var(--facebook) 16%, transparent);
  --instagram-soft:color-mix(in oklab, var(--instagram) 16%, transparent);
  --youtube-soft:color-mix(in oklab, var(--youtube) 16%, transparent);
  --linkedin-soft:color-mix(in oklab, var(--linkedin) 16%, transparent);

  /* --- focus --- */
  --focus-ring:color-mix(in oklab, var(--wa-color-focus) 38%, transparent);

  /* --- spacing (WA space scale; the odd 5/7 steps are fractions of it) --- */
  --s-1:var(--wa-space-2xs); --s-2:var(--wa-space-xs); --s-3:var(--wa-space-s); --s-4:var(--wa-space-m);
  --s-5:var(--wa-space-l); --s-6:var(--wa-space-l); --s-7:var(--wa-space-xl);
  --s-8:var(--wa-space-xl); --s-10:var(--wa-space-2xl); --s-12:var(--wa-space-3xl); --s-16:var(--wa-space-4xl);

  /* --- radii (WA radius scale: --wa-border-radius-scale moves them all) --- */
  --r-xs:var(--wa-border-radius-m);
  --r-sm:calc(var(--wa-border-radius-m) * 1.3333);
  --r-md:var(--wa-border-radius-l);
  --r-lg:calc(var(--wa-border-radius-l) * 1.3333);
  --r-xl:calc(var(--wa-border-radius-l) * 1.6667);
  --r-pill:var(--wa-border-radius-pill);

  /* --- shadows --- */
  --shadow-xs:var(--wa-shadow-s);
  --shadow-sm:var(--wa-shadow-m);
  --shadow-md:0 12px 32px var(--wa-color-shadow);
  --shadow-lg:0 24px 64px var(--wa-color-shadow);
  --shadow-focus:0 0 0 3px var(--focus-ring);
  --glow-render: 0 0 0 2px color-mix(in oklab, var(--success) 60%, transparent), 0 0 22px color-mix(in oklab, var(--success) 35%, transparent);

  /* --- typography --- */
  --font-display:var(--wa-font-family-heading);
  --font-ui:var(--wa-font-family-body);
  --font-mono:var(--wa-font-family-code);

  /* --- motion --- */
  --ease-out: cubic-bezier(0.22,0.61,0.36,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:var(--wa-transition-fast); --dur:var(--wa-transition-normal); --dur-slow:var(--wa-transition-slow);

  /* --- layout --- */
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --content-max: 1440px;

  /* chart-only semantic colors; components consume these through var() */
  --chart-blue:var(--wa-color-blue-60); --chart-green:var(--wa-color-green-70); --chart-orange:var(--wa-color-orange-50);
  --chart-violet:var(--wa-color-purple-70); --chart-amber:var(--wa-color-yellow-70); --chart-muted:var(--wa-color-gray-50);
  --chart-system:var(--wa-color-neutral-20);
}