/**
 * DEFAULT TOKEN VALUES (C26).
 *
 * The package is fully opinionated that these tokens MUST exist, and ships this
 * sheet so it renders correctly UNTHEMED in a fresh app — that is what makes
 * the drop-in test pass in under an hour. A host sets its brand by overriding
 * the same names; it never forks a component to change a color.
 *
 * Import order matters: `tokens.css` first, then your brand overrides, then
 * `styles.css`. Hardcoded colors inside package components are banned, so every
 * color the meeting UI can draw is named here.
 *
 * A meeting surface is DARK-FIRST in spirit — video reads better on a calm dark
 * stage — but the light palette is the default definition (never inside a media
 * query), so a page with no theme signal is still correct.
 */

:root {
  /* Surfaces */
  --mx-meet-bg: #ffffff;
  --mx-meet-bg-subtle: #f6f7f9;
  --mx-meet-bg-raised: #ffffff;
  --mx-meet-bg-hover: rgba(0, 0, 0, 0.05);
  --mx-meet-bg-active: rgba(0, 0, 0, 0.09);
  --mx-meet-border: rgba(0, 0, 0, 0.09);
  --mx-meet-border-strong: rgba(0, 0, 0, 0.18);

  /* The stage is deliberately its own surface: video always sits on dark. */
  --mx-meet-stage-bg: #101216;
  --mx-meet-tile-bg: #1b1e25;
  --mx-meet-tile-text: #f2f4f8;
  /* The stage stays dark in every host theme, so its foregrounds must not
     inherit a light page's foreground or accent tokens. */
  --mx-meet-stage-text: #f2f4f8;
  --mx-meet-stage-text-muted: #c1c7d2;
  --mx-meet-stage-label-bg: rgba(0, 0, 0, 0.68);

  /* Text */
  --mx-meet-text: #0b0d12;
  --mx-meet-text-muted: #5c6270;
  --mx-meet-text-faint: #8b909c;
  --mx-meet-text-on-accent: #ffffff;

  /* Accent + state */
  --mx-meet-accent: #2f6bff;
  --mx-meet-accent-hover: #2559e0;
  --mx-meet-accent-subtle: rgba(47, 107, 255, 0.14);
  --mx-meet-danger: #d7263d;
  --mx-meet-danger-hover: #b81f33;
  --mx-meet-success: #17864a;
  --mx-meet-warning: #b26a00;
  --mx-meet-recording: #e5484d;
  --mx-meet-speaking: #3ecf8e;
  --mx-meet-focus-ring: rgba(47, 107, 255, 0.45);

  /* Avatar palette — deterministic per person, never random per render. */
  --mx-meet-avatar-0: #5b8def;
  --mx-meet-avatar-1: #4aa96c;
  --mx-meet-avatar-2: #d98324;
  --mx-meet-avatar-3: #b45bd1;
  --mx-meet-avatar-4: #d15b6f;
  --mx-meet-avatar-5: #2fa3a3;
  --mx-meet-avatar-6: #8a7fdb;
  --mx-meet-avatar-7: #c2913a;

  /* Geometry + motion */
  --mx-meet-radius: 14px;
  --mx-meet-radius-sm: 10px;
  --mx-meet-space: 12px;
  --mx-meet-control-size: 48px;
  --mx-meet-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --mx-meet-font-size: 15px;
  --mx-meet-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
  /* Meet wave 5: the whiteboard is paper in every theme (ink colors are content). */
  --mx-meet-board-paper: #ffffff;
  /* A spring-ish curve: macOS/iOS motion, not a linear slide. */
  --mx-meet-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --mx-meet-duration: 180ms;
}

/* System dark. Guarded so an explicit light choice still wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mx-meet-bg: #0d0f13;
    --mx-meet-bg-subtle: #14171d;
    --mx-meet-bg-raised: #171a21;
    --mx-meet-bg-hover: rgba(255, 255, 255, 0.07);
    --mx-meet-bg-active: rgba(255, 255, 255, 0.12);
    --mx-meet-border: rgba(255, 255, 255, 0.1);
    --mx-meet-border-strong: rgba(255, 255, 255, 0.2);
    --mx-meet-stage-bg: #08090c;
    --mx-meet-tile-bg: #15181f;
    --mx-meet-text: #eef1f6;
    --mx-meet-text-muted: #a2a9b8;
    --mx-meet-text-faint: #767d8d;
    --mx-meet-accent: #5b8dff;
    --mx-meet-accent-hover: #7aa3ff;
    --mx-meet-accent-subtle: rgba(91, 141, 255, 0.2);
    --mx-meet-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  }
}

/* An explicit host toggle. Defined separately so it wins in BOTH directions. */
:root[data-theme="dark"] {
  --mx-meet-bg: #0d0f13;
  --mx-meet-bg-subtle: #14171d;
  --mx-meet-bg-raised: #171a21;
  --mx-meet-bg-hover: rgba(255, 255, 255, 0.07);
  --mx-meet-bg-active: rgba(255, 255, 255, 0.12);
  --mx-meet-border: rgba(255, 255, 255, 0.1);
  --mx-meet-border-strong: rgba(255, 255, 255, 0.2);
  --mx-meet-stage-bg: #08090c;
  --mx-meet-tile-bg: #15181f;
  --mx-meet-text: #eef1f6;
  --mx-meet-text-muted: #a2a9b8;
  --mx-meet-text-faint: #767d8d;
  --mx-meet-accent: #5b8dff;
  --mx-meet-accent-hover: #7aa3ff;
  --mx-meet-accent-subtle: rgba(91, 141, 255, 0.2);
  --mx-meet-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}