/* Compatibility boundary for inherited web surfaces. The editable palette is
   design/stride.tokens.json. Component migration is tracked in the design plan;
   authored documents and third-party embeds keep their own colors. */
/* Palette (AJ 2026-09-23): LIGHT = Daybreak, DARK = Graphite (Clear dark). Every value
   comes from design/stride.tokens.json (generated stride-tokens.css) or the
   call/glass block at the end of this file, which mirrors the palette's
   glass-over-video recipe. Native reads the same source. */

html:root,
html[data-theme="dark"] {
  --paper-0: var(--stride-color-surface);
  --paper-25: var(--stride-color-surface);
  --paper-50: var(--stride-color-canvas);
  --paper-100: var(--stride-color-surface-inset);
  --paper-200: var(--stride-color-surface-inset);
  --bg-app: var(--stride-color-canvas);
  --bg-room-canvas: var(--stride-color-canvas); /* Call canvas migrates with its foregrounds. */
  --bg-stage: var(--stride-constant-video-letterbox);
  --surface-1: var(--stride-color-surface);
  --surface-2: var(--stride-color-surface);
  --surface-3: var(--stride-color-surface-inset);
  --surface-flood: var(--stride-color-surface);
  --ground: var(--bg-app);
  --surface-0: var(--bg-app);
  --well: var(--surface-3);
  --text-1: var(--stride-color-text);
  --text-2: var(--stride-color-text-secondary);
  --text-3: var(--stride-color-text-muted);
  --text-disabled: var(--stride-color-text-disabled);
  --ink-1: var(--text-1);
  --ink-2: var(--text-2);
  --ink-3: var(--text-3);
  --ink-4: var(--text-disabled);
  --line-1: var(--stride-color-border);
  --line-2: var(--stride-color-border-control);
  --line: var(--line-1);
  --line-strong: var(--line-2);
  --selection: var(--stride-color-selection);
  --bubble-own: #EFEAE4;
  --on-bubble-own: #1C1A18;
  --accent: var(--stride-color-action);
  --accent-hover: var(--stride-color-action-hover);
  --accent-press: var(--stride-color-action-pressed);
  --accent-soft: var(--stride-color-selection);
  --on-accent: var(--stride-color-on-action);
  --ring: var(--stride-color-focus);
  --live-text: var(--stride-color-live);
  --live-soft: var(--stride-color-live-surface);
  --success-text: var(--stride-color-success);
  --success-soft: var(--stride-color-success-surface);
  --danger-text: var(--stride-color-danger);
  --danger-soft: var(--stride-color-danger-surface);
  --warn-text: var(--stride-color-warning);
  --warn-soft: var(--stride-color-warning-surface);
  --info-text: var(--stride-color-info);
  --info-soft: var(--stride-color-info-surface);
  --speaker-accent: var(--stride-constant-speaking);
  --scrim: var(--stride-color-scrim);
  --wordmark: var(--stride-color-wordmark);
  --backdrop-ambient: var(--stride-color-canvas);
  --glass-chrome: var(--stride-color-surface);
  --glass-panel: var(--stride-color-surface);
  --glass-border: var(--stride-color-border);
  --glass-highlight: inset 0 0 0 transparent;
  --glass-blur: blur(20px) saturate(1.4);
  --glass-blur-chrome: blur(20px) saturate(1.4);
  --glass-chrome-fill: var(--stride-color-surface);
  --glass-float-fill: var(--popover-glass-fill);
  --glass-sheet-fill: var(--stride-color-surface);
  --glass-opaque-fill: var(--stride-color-surface);
  --glass-chrome-filter: none;
  --glass-float-filter: blur(24px) saturate(1.4);
  --glass-sheet-filter: none;
  --glass-media: var(--stride-constant-stage-chrome);
  --glass-media-hover: var(--stride-constant-stage-chrome);
  --glass-media-border: var(--stride-constant-stage-control-border);
  --glass-media-highlight: inset 0 0 0 transparent;
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--stride-color-shadow-color) 8%, transparent);
  --shadow-2: 0 8px 32px color-mix(in srgb, var(--stride-color-shadow-color) 14%, transparent);
  --shadow-3: 0 16px 48px color-mix(in srgb, var(--stride-color-shadow-color) 20%, transparent);
  --shadow-float: var(--shadow-2);
  --glass-shadow: var(--shadow-2);
  --glass-float-shadow: var(--popover-shadow);
  --glass-sheet-shadow: var(--shadow-3);
  --glow-accent: 0 0 0 1.5px var(--accent);
  --r-sm: var(--stride-radius-control);
  --r-md: var(--stride-radius-control);
  --r-lg: var(--stride-radius-surface);
  --r-xl: var(--stride-radius-sheet);
  --r-2xl: var(--stride-radius-sheet);
  --r-full: var(--stride-radius-pill);
  --hit-min: var(--stride-size-hit-min);
  --dur-fast: var(--stride-motion-feedback);
  --dur-med: var(--stride-motion-transition);
  --dur-slow: var(--stride-motion-reveal);
  --ease: var(--stride-motion-ease);
  /* one motion set (audits): no overshoot anywhere, one press */
  --ease-spring: var(--stride-motion-ease);
  --ease-out: var(--stride-motion-ease);
  --press-scale: 0.98;
  --type-button: 500 16px/1.2 var(--font-sans);
  --brand: var(--accent);
}

html[data-theme="dark"] {
  --bubble-own: #2B2C31;
  --on-bubble-own: #F5F5F7;
  --shadow-2: 0 8px 32px color-mix(in srgb, var(--stride-color-shadow-color) 36%, transparent);
  --shadow-3: 0 16px 48px color-mix(in srgb, var(--stride-color-shadow-color) 46%, transparent);
}

/* Navigation, search matches and agent activity are separate semantic roles.
   Retain inherited ember aliases only outside these migrated surfaces until
   their capture/brand/decorative usages have been classified. */
:is(.pd1-primary-nav, .tool-rail, .topbar, #accessPanel, .stride-operating-home) {
  --ember: var(--stride-color-action);
  --ember-text: var(--stride-color-action);
  --ember-hover: var(--stride-color-action-hover);
  --ember-press: var(--stride-color-action-pressed);
  --ember-soft: var(--stride-color-selection);
  --on-ember: var(--stride-color-on-action);
}
.wordmark {
  background: var(--stride-color-wordmark);
  mask: url(/public/stride-wordmark-black.png) no-repeat center / contain;
  -webkit-mask: url(/public/stride-wordmark-black.png) no-repeat center / contain;
}
.stride-operating-home .office-launch__line {
  font-size: clamp(32px, 3.3vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.03em;
}
.stride-operating-home .home-scout-composer { border-radius: var(--stride-radius-sheet); }
.operating-work { border-radius: var(--stride-radius-surface); }
.operating-work__status[data-state="running"]::before {
  background: var(--stride-color-action);
  border-color: var(--stride-color-action);
}
.operating-work__title { letter-spacing: -0.005em; }
.operating-section-head h2 { letter-spacing: -0.015em; }
.operating-eyebrow,
.operating-section-head .operating-eyebrow { font-size: 12px; letter-spacing: 0.02em; }
.operating-work__status,
.operating-work__foot { font-size: 12px; }
.work-review__submit {
  background: var(--stride-color-action);
  color: var(--stride-color-on-action);
  border-color: var(--stride-color-action);
  border-radius: var(--stride-radius-control);
}
.work-review__select,
.work-review__note {
  border-color: var(--stride-color-border-control);
  border-radius: var(--stride-radius-control);
}
@media (prefers-reduced-motion: reduce) {
  html:root,
  html[data-theme="dark"] {
    --dur-fast: 0ms;
    --dur-med: 0ms;
    --dur-slow: 0ms;
    --dur-breathe: 0ms;
  }
}

/* Theme foreground and background change together; do not crossfade contrast. */
html[data-stride-appearance-updating] *,
html[data-stride-appearance-updating] *::before,
html[data-stride-appearance-updating] *::after { transition: none !important; }


/* Semantic call/popover/glass tokens (2026-09-23). workspace.css references
   ONLY these names, so the palette lives here and in the token source.
   LIGHT = Daybreak, DARK = Graphite (scratchpad palette/final.mjs):
   glass-over-video = 80% (light) / 84% (dark). */
html:root {
  /* W-18: one over-media glass (stays dark over video in both themes) */
  --glass-media: rgba(38, 29, 24, 0.84);
  --glass-media-hover: rgba(38, 29, 24, 0.92);
  --glass-media-border: rgba(255, 236, 220, 0.16);
  --glass-media-highlight: inset 0 1px 0 rgba(255, 236, 220, 0.16);
  --signal: #FF5A19;                 /* raw Stride Orange: dots and icons only */
  --ember: var(--stride-color-action);
  --ember-text: #B83B07;   /* the text-carrying orange (palette signalText) */
  --ember-hover: var(--stride-color-action-hover);
  --ember-press: var(--stride-color-action-pressed);
  --ember-soft: color-mix(in srgb, var(--stride-color-text) 6%, transparent);
  --ember-soft-text: var(--stride-color-text);
  --accent-soft: color-mix(in srgb, var(--stride-color-text) 6%, transparent);
  --unread: #D2420A;
  --on-unread: #FFFFFF;
  --mention: #FFE7D9;
  --mention-text: #9C3103;
  --live: #DB2A1C;
  --on-live: #FFFFFF;
  --bg-stage: #110D0B;
  --ink-video: #110D0B;
  --tile-fill: #110D0B;
  --tile-edge: rgba(255, 255, 255, 0.08);
  --tile-monogram-fill: #FFEDE3;
  --tile-monogram-text: #1D1916;
  --stage-overlay-fill: rgba(17, 13, 11, 0.76);
  --stage-overlay-text: #FBF6F1;
  --stage-inset-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
  --video-letterbox: var(--bg-stage);
  --speaker-accent: var(--stride-constant-speaking);
  --call-leave-fill: rgba(219, 42, 28, 0.88);
  --call-leave-fill-hover: rgba(194, 37, 48, 0.94);
  --call-leave-fill-press: #C22530;
  --call-leave-solid: var(--stride-constant-leave-fill);
  --on-call-leave: var(--stride-constant-on-leave);
  --call-leave-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --call-glass-fill: rgba(255, 246, 239, 0.8);
  --call-glass-solid: #FFF6EF;
  --call-glass-highlight: rgba(255, 255, 255, 0.9);
  --call-glass-edge: rgba(120, 60, 20, 0.10);
  --call-glass-hover: rgba(90, 45, 15, 0.07);
  --call-glass-press: rgba(90, 45, 15, 0.12);
  --call-glass-off: rgba(210, 66, 10, 0.10);
  --call-glass-shadow: 0 12px 32px rgba(90, 45, 15, 0.16), 0 2px 6px rgba(90, 45, 15, 0.08);
  --popover-fill: var(--stride-color-surface);
  --popover-edge: var(--stride-color-border);
  --popover-glass-fill: rgba(255, 253, 251, 0.9);
  --popover-glass-edge: rgba(120, 60, 20, 0.10);
  --popover-shadow: 0 16px 40px rgba(90, 45, 15, 0.16), 0 2px 6px rgba(90, 45, 15, 0.08);
  --pip-glass-fill: rgba(255, 246, 239, 0.8);
  --shadow-hairline: 0 1px 2px rgba(90, 45, 15, 0.06);
  --shadow-tooltip: 0 4px 14px rgba(90, 45, 15, 0.18);
  --status-warn-dot: var(--warn-text);
  --theme-swatch-sand-ground: #FBF8F4;
  --theme-swatch-sand-accent: #D2420A;
  --theme-swatch-sand-ink: #1D1916;
  --theme-swatch-ink-ground: #0B0B0D;
  --theme-swatch-ink-accent: #F5F5F7;
  /* sign-in film (creative/signin v2). The film is always dark; the card
     follows the theme: Daybreak glass (light) / Graphite glass (dark). */
  --login-film-ground: #0B0B0D;
  --login-film-ink: 11 11 13;
  --login-film-wordmark: #8A8A92;
  --login-card-text-1: #1D1916;
  --login-card-text-2: #584F48;
  --login-card-text-3: #6F665E;
  --login-card-accent: #D2420A;
  --login-card-on-accent: #FFFFFF;
  --login-card-fill: linear-gradient(180deg, rgb(255 253 251 / .92), rgb(251 248 244 / .88));
  --login-card-fill-solid: rgb(251 248 244 / .97);
  --login-card-filter: blur(32px) saturate(1.5) brightness(1.2);
  --login-card-stroke: rgb(255 255 255 / .55);
  --login-card-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 2px rgb(0 0 0 / .3), 0 32px 90px -28px rgb(0 0 0 / .7);
  --login-field-fill: rgb(255 255 255 / .72);
  --login-field-stroke: rgb(120 60 20 / .14);
  --login-rim: rgb(255 150 90 / .38);
  /* hearth glow (PROTOTYPE, Home + Meetings lobby only): the one switch is
     --hearth-glow (1 on, 0 off). Warm peach in light, ember in dark. */
  --hearth-glow: 1;
  --hearth-glow-warm: rgb(255 138 90 / .055);
  --hearth-glow-cool: rgb(255 255 255 / 0);
}
html[data-theme="dark"] {
  --glass-media: rgba(28, 28, 32, 0.84);
  --glass-media-hover: rgba(28, 28, 32, 0.92);
  --glass-media-border: rgba(255, 255, 255, 0.16);
  --glass-media-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --signal: #FF6A2B;
  --ember-text: #FF8A55;
  --ember-soft: #26272C;
  --ember-soft-text: #F5F5F7;
  --accent-soft: #26272C;
  --unread: #FF6A2B;
  --on-unread: #1A0800;
  --mention: #3A1F13;
  --mention-text: #FFB08A;
  --live: #D92D22;
  --bg-stage: #000000;
  --ink-video: #000000;
  --tile-fill: #141417;
  --tile-monogram-fill: #26272C;
  --tile-monogram-text: #F5F5F7;
  --stage-overlay-fill: rgba(11, 11, 13, 0.8);
  --stage-overlay-text: #F5F5F7;
  --call-glass-fill: rgba(38, 38, 43, 0.55);
  --call-glass-solid: #26262B;
  --call-glass-highlight: rgba(255, 255, 255, 0.16);
  --call-glass-edge: rgba(0, 0, 0, 0.5);
  --call-glass-hover: rgba(255, 255, 255, 0.08);
  --call-glass-press: rgba(255, 255, 255, 0.14);
  --call-glass-off: rgba(255, 255, 255, 0.12);
  --call-glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --popover-glass-fill: rgba(29, 29, 33, 0.9);
  --popover-glass-edge: rgba(255, 255, 255, 0.12);
  --popover-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  --pip-glass-fill: rgba(28, 28, 32, 0.84);
  --shadow-hairline: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-tooltip: 0 4px 14px rgba(0, 0, 0, 0.4);
  --login-card-text-1: #F5F5F7;
  --login-card-text-2: #B3B5BC;
  --login-card-text-3: #8E919A;
  --login-card-accent: #F5F5F7;
  --login-card-on-accent: #0B0B0D;
  --login-card-fill: rgb(38 38 43 / .55);
  --login-card-fill-solid: rgb(29 29 33 / .96);
  --login-card-filter: blur(32px) saturate(1.5) brightness(.72);
  --login-card-stroke: rgba(255, 255, 255, 0.16);
  --login-card-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 1px 2px rgb(0 0 0 / .4), 0 32px 90px -28px rgb(0 0 0 / .8);
  --login-field-fill: rgb(11 11 13 / .46);
  --login-field-stroke: rgba(255, 255, 255, 0.12);
  --login-rim: rgb(255 150 90 / .30);
  --hearth-glow-warm: rgb(255 90 25 / .07);
  --hearth-glow-cool: rgb(140 150 190 / .035);
}

/* Conversations redesign (AJ approved 2026-09-24; components §0.6 gaps).
   Selected-on-glass capsule, T1 chrome glass for the floating sidebar /
   composer / thread pane, and the linear() spring approximations. */
html:root {
  --selected-glass: #1C1A1814;
  --chrome-glass: var(--stride-color-glass-panel);
  --chrome-glass-filter: blur(24px) saturate(1.4);
  --ease-spring-pop: linear(0, 0.21 6%, 0.56 14%, 0.86 24%, 1.03 34%, 1.06 40%, 1.04 50%, 1.01 62%, 0.995 76%, 1);
  --ease-spring-sheet: linear(0, 0.25 8%, 0.6 20%, 0.84 34%, 0.95 48%, 0.99 64%, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
}
html[data-theme="dark"] {
  --selected-glass: #FFFFFF1F;
}