/* ============================================================
   SEEMOTIONS MARK — canonical square lockup, one visible brand owner
   ============================================================ */

/*
   The brand owns the brand. Three unrelated stylesheets used to ride in here
   as imports, which meant every document had to download and parse this file
   before it could even discover them: a second render-blocking round trip on
   the critical path of every surface, including a landing page that uses none
   of the loading, Generate-button or reference material they carry.

   Each is now linked by the surfaces that actually use it:
     seemotions-processing-shimmer.css  → app/layout.tsx, workspace.html,
                                          billing.html, profile.html
     seemotions-orange-cta-v170.css     → app/(app)/layout.tsx, workspace.html
     seemotions-reference-violet-v1.css → app/layout.tsx, workspace.html,
                                          explore-v61-production.html
*/

:root {
  /* Exact owner-approved lockup: #9280FA square + black/white SVG glyph. */
  --sm-brand-tile: #9280FA;
  --sm-brand-radius: 9px;
  --sm-brand-radius-small: 7px;
  --sm-brand-mark-purple: url('/brand/seemotions-s-purple.svg');
  --sm-brand-mark-white: url('/brand/seemotions-s-white.svg');
  --sm-brand-mark-black: url('/brand/seemotions-s-black.svg');
  --sm-brand-mark: var(--sm-brand-mark-black);
}

:where(.brand-logo, .mc-brand, [data-seemotions-wordmark]) {
  position: relative !important;
  display: inline-block !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  flex: 0 0 30px !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
  border: 0 !important;
  border-radius: var(--sm-brand-radius) !important;
  box-shadow: none !important;
  background-color: var(--sm-brand-tile) !important;
  background-image: var(--sm-brand-mark) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  text-decoration: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  isolation: isolate !important;
}

:where(.brand-logo, .mc-brand, [data-seemotions-wordmark])[data-sm-brand-tone='white'] {
  --sm-brand-mark: var(--sm-brand-mark-white);
}

:where(.brand-logo, .mc-brand, [data-seemotions-wordmark])[data-sm-brand-tone='black'] {
  --sm-brand-mark: var(--sm-brand-mark-black);
}

/* Legacy tone name must still resolve to the approved square lockup, never a
   standalone purple glyph. */
:where(.brand-logo, .mc-brand, [data-seemotions-wordmark])[data-sm-brand-tone='purple'] {
  --sm-brand-mark: var(--sm-brand-mark-black);
}

:where(.brand-logo, .mc-brand, [data-seemotions-wordmark]) > *,
:where(.brand-logo, .mc-brand, [data-seemotions-wordmark])::before,
:where(.brand-logo, .mc-brand, [data-seemotions-wordmark])::after {
  display: none !important;
  content: none !important;
}

.mc-brand {
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  flex-basis: 24px !important;
  border-radius: var(--sm-brand-radius-small) !important;
}

.auth-header .brand-logo {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  flex-basis: 34px !important;
}

/* A page gets one brand owner. Footers and secondary mobile chrome never
   repeat the mark. Workspace's embedded V5 topbar yields to the app shell. */
:where(.site-footer, .footer, .footer-bottom, .footer-brand, .drawer-top) :where(.brand-logo, .mc-brand, [data-seemotions-wordmark]),
.topbar .brand-logo,
html[data-sm-brand-owner='shell'] :where(.brand-logo, .mc-brand, [data-seemotions-wordmark]) {
  display: none !important;
}

@media (max-width: 680px) {
  :where(.brand-logo, [data-seemotions-wordmark]) {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    flex-basis: 28px !important;
    border-radius: 8px !important;
  }
}

/* ============================================================
   SEEMOTIONS REFERENCE VIOLET MATERIAL V1
   The previous orange accent family is retained only as legacy variable names
   so old surfaces inherit the new palette without duplicating visual owners.
   Sampled reference colors: #968DED / #887CEB / #7A6BE5 / #6459BB / #453B8E.
   ============================================================ */

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

  --brand-orange: var(--sm-reference-violet);
  --accent: var(--sm-reference-violet);
  --liquid-lava: var(--sm-reference-violet);
  --accent-soft: rgba(150, 141, 237, .14);
  --accent-glow: rgba(150, 141, 237, .28);
  --orange-deep: var(--sm-reference-violet-shadow);
  --orange-soft: var(--sm-reference-violet-mid);
  --amber: var(--sm-reference-violet-mid);
  --coral: var(--sm-reference-violet-deep);
  --dark-void: #09080D;
  --gluon-grey: #15141A;
  --slate-grey: #1C1A20;
  --dusty-grey: #85818B;
  --snow: #F8F7F3;
  --sm-orange: var(--sm-reference-violet);
  --sm-orange-hot: var(--sm-reference-violet-deep);

  /* Canonical Create / legacy command aliases. */
  --sm7-orange: var(--sm-reference-violet);
  --sm7-orange-hover: var(--sm-reference-violet-mid);
  --sm7-orange-bg: rgba(150, 141, 237, .16);
  --sm7-orange-border: rgba(150, 141, 237, .42);

  /* Canonical primary CTA material: soft lavender body, dark ink, diffused violet depth. */
  --sm-orange-cta-start: var(--sm-reference-violet-deep);
  --sm-orange-cta-end: var(--sm-reference-violet);
  --sm-orange-cta-ink: var(--sm-reference-violet-ink);
  --sm-orange-cta-border: rgba(255, 255, 255, .16);
  --sm-orange-cta-shadow: 0 8px 28px rgba(100, 89, 187, .22), inset 0 1px 0 rgba(255,255,255,.20);
  --sm-orange-cta-shadow-hover: 0 12px 34px rgba(100, 89, 187, .30), inset 0 1px 0 rgba(255,255,255,.24);

  /* One loading color family across every existing async surface. Important is intentional:
     Landing loads the loading contract again after brand.css. */
  --sm-loading-orange: var(--sm-reference-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;
}

html[data-theme='night'] {
  --bg: #09080D;
  --body-bg: #09080D;
  --bg-elev: #111015;
  --bg-card: #15141A;
  --bg-card-hover: #1C1A20;
  --bg-panel: #15141A;
  --bg-input: #15141A;
  --bg-sunken: #09080D;
  --ink: #F8F7F3;
  --text: #F8F7F3;
  --ink-soft: #B8B5BD;
  --text-muted: #85818B;
  --ink-faint: rgba(248,247,243,.56);
  --ink-ghost: rgba(248,247,243,.34);
  --ink-mute: rgba(248,247,243,.22);
  --line: rgba(248,247,243,.12);
  --line-soft: rgba(248,247,243,.07);
  --line-faint: rgba(248,247,243,.045);
  --chip-bg: rgba(255,255,255,.055);
  --chip-border: rgba(248,247,243,.10);
  --chip-hover: rgba(248,247,243,.08);

  --sm-bg: #09080D;
  --sm-panel: #15141A;
  --sm-panel-2: #111015;
  --sm-hover: #1C1A20;
  --sm-input: #15141A;
  --sm-ink: #F8F7F3;
  --sm-soft: rgba(248,247,243,.72);
  --sm-faint: rgba(248,247,243,.52);
  --sm-line: rgba(248,247,243,.10);
  --sm-line-strong: rgba(248,247,243,.18);
  --sm-disc: #F8F7F3;
  --sm-ring: rgba(248,247,243,.9);
  --sm-ring-track: rgba(248,247,243,.16);
}

html[data-theme='day'] {
  --bg: #F7F4EF;
  --body-bg: #F7F4EF;
  --bg-elev: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F0ECE6;
  --bg-panel: #FFFFFF;
  --bg-input: #FFFFFF;
  --bg-sunken: #F0ECE6;
  --ink: #131217;
  --text: #131217;
  --ink-soft: #55515A;
  --text-muted: #858087;
  --ink-faint: rgba(19,18,23,.52);
  --ink-ghost: rgba(19,18,23,.32);
  --ink-mute: rgba(19,18,23,.20);
  --line: rgba(19,18,23,.12);
  --line-soft: rgba(19,18,23,.07);
  --line-faint: rgba(19,18,23,.045);
  --chip-bg: rgba(19,18,23,.045);
  --chip-border: rgba(19,18,23,.10);
  --chip-hover: rgba(19,18,23,.07);

  --sm-bg: #F7F4EF;
  --sm-panel: #FFFFFF;
  --sm-panel-2: #F0ECE6;
  --sm-hover: #E9E4DD;
  --sm-input: #FFFFFF;
  --sm-ink: #131217;
  --sm-soft: rgba(19,18,23,.72);
  --sm-faint: rgba(19,18,23,.52);
  --sm-line: rgba(19,18,23,.10);
  --sm-line-strong: rgba(19,18,23,.18);
  --sm-disc: #131217;
  --sm-ring: rgba(19,18,23,.92);
  --sm-ring-track: rgba(19,18,23,.16);
}