/* ============================================================
   SEEMOTIONS — REFERENCE VIOLET MATERIAL V1.1

   Approved visual source: user-supplied lavender/violet UI reference.
   This is a color/material adaptation layer only. It does not change layout,
   component ownership, loading state semantics, or motion architecture.

   Sampled palette:
   primary #968DED · mid #887CEB · deep #7A6BE5 · shadow #6459BB · dark #453B8E
   ============================================================ */

:root {
  --sm-ref-violet: #968DED !important;
  --sm-ref-violet-mid: #887CEB !important;
  --sm-ref-violet-deep: #7A6BE5 !important;
  --sm-ref-violet-shadow: #6459BB !important;
  --sm-ref-violet-dark: #453B8E !important;
  --sm-ref-ink: #121016 !important;

  /* Product-level compatibility aliases. */
  --seemotions-orange: var(--sm-ref-violet) !important;
  --seemotions-orange-deep: var(--sm-ref-violet-shadow) !important;
  --seemotions-orange-soft: var(--sm-ref-violet-mid) !important;
  --seemotions-amber: var(--sm-ref-violet-mid) !important;
  --seemotions-coral: var(--sm-ref-violet-deep) !important;
  --brand-orange: var(--sm-ref-violet) !important;
  --accent: var(--sm-ref-violet) !important;
  --liquid-lava: var(--sm-ref-violet) !important;
  --accent-soft: rgba(150,141,237,.14) !important;
  --accent-glow: rgba(150,141,237,.28) !important;
  --orange: var(--sm-ref-violet) !important;
  --orange-deep: var(--sm-ref-violet-shadow) !important;
  --orange-soft: var(--sm-ref-violet-mid) !important;
  --amber: var(--sm-ref-violet-mid) !important;
  --coral: var(--sm-ref-violet-deep) !important;
  --sm-orange: var(--sm-ref-violet) !important;
  --sm-orange-hot: var(--sm-ref-violet-deep) !important;

  /* Create / shared command hardware. */
  --sm7-orange: var(--sm-ref-violet) !important;
  --sm7-orange-hover: var(--sm-ref-violet-mid) !important;
  --sm7-orange-bg: rgba(150,141,237,.16) !important;
  --sm7-orange-border: rgba(150,141,237,.42) !important;
  --smc-accent: var(--sm-ref-violet) !important;
  --smc-accent-hover: var(--sm-ref-violet-mid) !important;
  --smc-accent-bg: rgba(150,141,237,.16) !important;
  --smc-accent-border: rgba(150,141,237,.42) !important;
  --smc-accent-shadow:
    0 1px 0 rgba(255,255,255,.16),
    0 8px 18px rgba(69,59,142,.20),
    0 18px 38px rgba(69,59,142,.13),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(69,59,142,.24) !important;
  --smc-accent-shadow-hover:
    0 1px 0 rgba(255,255,255,.18),
    0 10px 22px rgba(69,59,142,.24),
    0 22px 44px rgba(69,59,142,.17),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(69,59,142,.22) !important;
  --smui-accent: var(--sm-ref-violet) !important;

  /* CTA material. Optical depth is intentionally restrained: no neon glow. */
  --sm-orange-cta-start: var(--sm-ref-violet) !important;
  --sm-orange-cta-end: var(--sm-ref-violet-deep) !important;
  --sm-orange-cta-ink: var(--sm-ref-ink) !important;
  --sm-orange-cta-border: rgba(226,223,255,.34) !important;
  --sm-orange-cta-shadow:
    0 1px 0 rgba(255,255,255,.16),
    0 8px 18px rgba(69,59,142,.20),
    0 18px 38px rgba(69,59,142,.13),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(69,59,142,.24) !important;
  --sm-orange-cta-shadow-hover:
    0 1px 0 rgba(255,255,255,.18),
    0 10px 22px rgba(69,59,142,.24),
    0 22px 44px rgba(69,59,142,.17),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(69,59,142,.22) !important;

  /* Canonical async material; motion remains owned by the existing loading contract. */
  --sm-loading-orange: var(--sm-ref-violet-deep) !important;
  --sm-loading-orange-border: rgba(122,107,229,.08) !important;
  --sm-loading-orange-glow: rgba(150,141,237,.22) !important;
  --sm-loading-orange-sweep: rgba(150,141,237,.10) !important;
  --sm-loading-line: rgba(150,141,237,.14) !important;

  /* Auth / admin compatibility. */
  --mfa-accent: var(--sm-ref-violet) !important;
  --ops-accent: var(--sm-ref-violet) !important;
}

/* Primary buttons use dark ink and the reference's soft raised lavender body. */
:where(
  .create-btn,
  .dock-create,
  .auth-submit,
  .auth-primary,
  .sm-profile-login,
  .sm-button-primary,
  .media-admin-actions .primary,
  .media-upload:not(.secondary),
  .media-save,
  .ex-button:not(.secondary),
  .ex-section-control > button,
  .ex-bottom .save,
  .cmd-generate,
  #smV5Mount .sm-v5-generate,
  .new-project-btn,
  .empty-cta .btn-primary,
  [data-sm-orange-cta='true']
) {
  border: 1px solid rgba(226,223,255,.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.055) 44%, rgba(69,59,142,.11) 100%),
    linear-gradient(135deg, var(--sm-ref-violet), var(--sm-ref-violet-deep)) !important;
  color: var(--sm-ref-ink) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.16),
    0 8px 18px rgba(69,59,142,.20),
    0 18px 38px rgba(69,59,142,.13),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(69,59,142,.24) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.14) !important;
}

@media (hover:hover) and (pointer:fine) {
  :where(
    .create-btn,
    .dock-create,
    .auth-submit,
    .auth-primary,
    .sm-profile-login,
    .sm-button-primary,
    .media-admin-actions .primary,
    .media-upload:not(.secondary),
    .media-save,
    .ex-button:not(.secondary),
    .ex-section-control > button,
    .ex-bottom .save,
    .cmd-generate,
    #smV5Mount .sm-v5-generate,
    .new-project-btn,
    .empty-cta .btn-primary,
    [data-sm-orange-cta='true']
  ):hover:not(:disabled) {
    border-color: rgba(235,233,255,.46) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.075) 45%, rgba(69,59,142,.09) 100%),
      linear-gradient(135deg, var(--sm-ref-violet), var(--sm-ref-violet-mid)) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.18),
      0 10px 22px rgba(69,59,142,.24),
      0 22px 44px rgba(69,59,142,.17),
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 -1px 0 rgba(69,59,142,.22) !important;
    transform: translateY(-1px) !important;
    filter: saturate(1.025) brightness(1.015) !important;
  }
}

:where(
  .create-btn,
  .dock-create,
  .auth-submit,
  .auth-primary,
  .sm-profile-login,
  .sm-button-primary,
  .media-admin-actions .primary,
  .media-upload:not(.secondary),
  .media-save,
  .ex-button:not(.secondary),
  .ex-section-control > button,
  .ex-bottom .save,
  .cmd-generate,
  #smV5Mount .sm-v5-generate,
  .new-project-btn,
  .empty-cta .btn-primary,
  [data-sm-orange-cta='true']
):active:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(69,59,142,.12)),
    linear-gradient(135deg, var(--sm-ref-violet-mid), var(--sm-ref-violet-deep)) !important;
  box-shadow:
    0 5px 14px rgba(69,59,142,.16),
    inset 0 1px 2px rgba(69,59,142,.16),
    inset 0 -1px 0 rgba(255,255,255,.14) !important;
  transform: translateY(1px) !important;
  filter: none !important;
}

/* Login/MFA styles declare button-local accent variables after the global palette. */
.auth-submit,
.auth-primary,
button[type='submit'] {
  --auth-accent-start: var(--sm-ref-violet-deep) !important;
  --auth-accent-end: var(--sm-ref-violet) !important;
}

.mfa-shell::after {
  background: radial-gradient(circle, rgba(150,141,237,.06), transparent 66%) !important;
}
html[data-theme='day'] .mfa-shell::after {
  background: radial-gradient(circle, rgba(150,141,237,.05), transparent 66%) !important;
}

/* Admin scopes set their own local variables, so bind them explicitly. */
.ops-shell { --ops-accent: var(--sm-ref-violet) !important; }
html[data-theme='day'] .ops-shell { --ops-accent: var(--sm-ref-violet) !important; }
.ops-nav-item.is-active > span,
.ops-view-head > div > span,
.ops-panel header > div > span,
.ops-hero > div > span {
  color: color-mix(in srgb, var(--sm-ref-violet) 72%, var(--ops-text)) !important;
}
.media-switch input:checked + i {
  background: var(--sm-ref-violet) !important;
  border-color: var(--sm-ref-violet) !important;
}

/* Specialist surfaces that declare accent variables on their own root element. */
html[data-theme='day'] .cinema-workspace-shell {
  --cinema-orange: var(--sm-ref-violet) !important;
  --cinema-orange-hover: var(--sm-ref-violet-mid) !important;
}
.cmw-shell,
html[data-theme='day'] .cmw-shell {
  --cmw-orange: var(--sm-ref-violet) !important;
  --cmw-orange-hover: var(--sm-ref-violet-mid) !important;
  --cmw-orange-soft: rgba(150,141,237,.13) !important;
}
.marketing-template-visual[data-tone='bold'] {
  background: linear-gradient(145deg, var(--sm-ref-violet), var(--sm-ref-violet-dark) 72%) !important;
}

/* Model picker and duration control both have late/local style owners. */
html {
  --sm-model-row-selected: rgba(150,141,237,.115) !important;
  --sm-model-row-selected-border: rgba(150,141,237,.42) !important;
  --sm-model-focus: rgba(150,141,237,.60) !important;
}
html[data-theme='day'] {
  --sm-model-row-selected: rgba(150,141,237,.105) !important;
  --sm-model-row-selected-border: rgba(122,107,229,.38) !important;
  --sm-model-focus: rgba(122,107,229,.56) !important;
}
#smV5Mount .sm-v13-model-search-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(150,141,237,.11) !important;
}
#smV5Mount .sm-v5-duration-control,
html[data-theme='day'] #smV5Mount .sm-v5-duration-control {
  --sm-duration-active: var(--sm-ref-violet) !important;
  --sm-duration-focus: rgba(150,141,237,.34) !important;
  --sm-duration-glow: rgba(100,89,187,.20) !important;
}
#smV5Mount .sm-v5-duration-control:focus-within,
html[data-theme='day'] #smV5Mount .sm-v5-duration-control:focus-within {
  border-color: rgba(150,141,237,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 2px rgba(150,141,237,.09) !important;
}
#smV5Mount .sm-v5-duration-readout strong {
  color: var(--sm-ref-ink) !important;
  box-shadow: 0 0 14px rgba(100,89,187,.22), 0 2px 8px rgba(0,0,0,.20) !important;
}
html[data-theme='day'] #smV5Mount .sm-v5-duration-readout strong {
  box-shadow: 0 1px 8px rgba(100,89,187,.20) !important;
}

/* Landing accent materials; composition and neutral palette stay untouched. */
.mega-start {
  background: linear-gradient(135deg, rgba(150,141,237,.20), rgba(136,124,235,.10)) !important;
  border-color: rgba(150,141,237,.32) !important;
}
.mega-model::before {
  background: radial-gradient(circle at 80% 10%, rgba(150,141,237,.30), transparent 34%), linear-gradient(150deg,rgba(255,255,255,.04),transparent) !important;
}
.mega-live { box-shadow: 0 0 0 4px rgba(150,141,237,.14) !important; }
.hero-shot:hover { border-color: rgba(150,141,237,.52) !important; }
.model-pill:hover { border-color: rgba(150,141,237,.38) !important; }
.accent-dot { box-shadow: 0 0 0 4px rgba(150,141,237,.10) !important; }
.model-card:hover,
.workflow-card:hover,
.project-card:hover { border-color: rgba(150,141,237,.44) !important; }
.fallback-art {
  background: radial-gradient(circle at 76% 18%, rgba(150,141,237,.34), transparent 27%), radial-gradient(circle at 18% 80%, rgba(136,124,235,.13), transparent 22%), linear-gradient(145deg,var(--surface-2),var(--bg)) !important;
}
.feature-row:hover { background: linear-gradient(90deg, rgba(150,141,237,.06), transparent) !important; }

html[data-theme='night'] .hero-fallback {
  background: radial-gradient(circle at 72% 34%,rgba(150,141,237,.18),transparent 29%), radial-gradient(circle at 88% 14%,rgba(122,107,229,.09),transparent 26%), linear-gradient(145deg,#0B0A0D 0%,#09080D 62%,#0D0B12 100%) !important;
}
html[data-theme='day'] .hero-fallback {
  background: radial-gradient(circle at 72% 34%,rgba(150,141,237,.13),transparent 28%), radial-gradient(circle at 88% 14%,rgba(136,124,235,.10),transparent 26%), linear-gradient(145deg,#F7F4EF 0%,#F4F1FA 58%,#EEEAF6 100%) !important;
}

html[data-theme='night'] .final-card {
  background: radial-gradient(circle at 78% 18%,rgba(150,141,237,.28),transparent 30%), linear-gradient(130deg,#0B0A0D 0%,#171326 38%,#453B8E 72%,#968DED 100%) !important;
}
html[data-theme='night'] .final-card h2 em { color: #D8D3FF !important; }
html[data-theme='day'] .final-card {
  background: radial-gradient(circle at 82% 14%,rgba(255,255,255,.58),transparent 29%), linear-gradient(132deg,#FBFAFF 0%,#ECE8FF 36%,#B2A9F5 70%,#968DED 100%) !important;
}
html[data-theme='day'] .final-card h2 em { color: var(--sm-ref-violet-dark) !important; }

/* Workspace focus rings were a separate literal orange. */
button:focus-visible,
[role='button']:focus-visible,
a:focus-visible,
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline-color: var(--sm-ref-violet) !important;
}