/*
 * OMNICASTS DESIGN SYSTEM v1
 *
 * Platform-owned tokens and opt-in primitives.
 * Safety contract:
 * - No unprefixed component selectors.
 * - No recording/stage layout selectors.
 * - No Show-theme variables such as --custom-primary / --custom-accent.
 * - Existing surface CSS remains authoritative unless a surface explicitly adopts an --omni-* token.
 */

:root {
  /* Brand primitives */
  --omni-color-ink: #070A0E;
  --omni-color-ink-2: #0B141A;
  --omni-color-panel: #0D1820;
  --omni-color-panel-2: #101E27;
  --omni-color-paper: #F5F6F3;
  --omni-color-slate: #A7AFB6;
  --omni-color-cyan: #42E8F5;
  --omni-color-gold: #F4C45E;
  --omni-color-success: #72E2AD;
  --omni-color-danger: #FF8295;

  /* Semantic color roles: dark is the platform default. */
  --omni-surface-page: var(--omni-color-ink);
  --omni-surface-panel: var(--omni-color-panel);
  --omni-surface-raised: var(--omni-color-panel-2);
  --omni-surface-soft: #121C26;
  --omni-surface-input: #081118;
  --omni-surface-strong: #0B3037;
  --omni-text-primary: var(--omni-color-paper);
  --omni-text-secondary: #C0CCD3;
  --omni-text-muted: var(--omni-color-slate);
  --omni-text-inverse: #062028;
  --omni-border-subtle: rgba(255, 255, 255, .07);
  --omni-border-default: #17333D;
  --omni-border-strong: #24505E;
  --omni-accent-primary: var(--omni-color-cyan);
  --omni-accent-participation: var(--omni-color-gold);
  --omni-status-success: var(--omni-color-success);
  --omni-status-warning: var(--omni-color-gold);
  --omni-status-danger: var(--omni-color-danger);

  /* Typography */
  --omni-font-editorial: Georgia, "Times New Roman", serif;
  --omni-font-interface: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --omni-font-label: "Arial Narrow", Impact, sans-serif;
  --omni-type-micro: 10px;
  --omni-type-meta: 12px;
  --omni-type-ui: 14px;
  --omni-type-body: 16px;
  --omni-type-body-lg: 18px;
  --omni-leading-tight: 1.08;
  --omni-leading-ui: 1.35;
  --omni-leading-body: 1.58;
  --omni-track-label: .16em;

  /* Spacing */
  --omni-space-1: 4px;
  --omni-space-2: 8px;
  --omni-space-3: 12px;
  --omni-space-4: 16px;
  --omni-space-5: 20px;
  --omni-space-6: 24px;
  --omni-space-8: 32px;
  --omni-space-10: 40px;
  --omni-space-12: 48px;
  --omni-space-16: 64px;

  /* Shape */
  --omni-radius-xs: 8px;
  --omni-radius-sm: 12px;
  --omni-radius-md: 16px;
  --omni-radius-lg: 22px;
  --omni-radius-xl: 28px;
  --omni-radius-2xl: 32px;
  --omni-radius-pill: 999px;

  /* Elevation */
  --omni-shadow-card: 0 16px 50px rgba(0, 0, 0, .22);
  --omni-shadow-raised: 0 24px 80px rgba(0, 0, 0, .38);
  --omni-shadow-dialog: 0 32px 90px rgba(0, 0, 0, .42);
  --omni-shadow-signal: 0 0 22px rgba(66, 232, 245, .28);

  /* Layout */
  --omni-container-reading: 760px;
  --omni-container-content: 960px;
  --omni-container-shell: 1240px;
  --omni-container-workspace: 1440px;
  --omni-page-gutter: 32px;
  --omni-touch-target: 44px;
  --omni-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Motion */
  --omni-motion-fast: 140ms;
  --omni-motion-base: 180ms;
  --omni-motion-slow: 280ms;
  --omni-ease-standard: cubic-bezier(.2, .7, .2, 1);

  /* Layering */
  --omni-z-nav: 40;
  --omni-z-float: 70;
  --omni-z-backdrop: 108;
  --omni-z-dialog: 110;
  --omni-z-toast: 120;
}

/* Semantic light palette. Surfaces decide when to opt into light mode. */
html[data-omni-theme="light"],
html[data-canvas-theme="light"] {
  --omni-surface-page: #F4F7FA;
  --omni-surface-panel: #FFFFFF;
  --omni-surface-raised: #F8FAFC;
  --omni-surface-soft: #EDF3F7;
  --omni-surface-input: #FFFFFF;
  --omni-surface-strong: #BCE8E7;
  --omni-text-primary: #10202D;
  --omni-text-secondary: #30485A;
  --omni-text-muted: #607689;
  --omni-text-inverse: #F5F6F3;
  --omni-border-subtle: rgba(22, 52, 68, .08);
  --omni-border-default: #CFDAE3;
  --omni-border-strong: #9DB5C4;
  --omni-shadow-card: 0 14px 34px rgba(33, 55, 73, .10);
  --omni-shadow-raised: 0 18px 45px rgba(33, 55, 73, .12);
  --omni-shadow-dialog: 0 28px 70px rgba(33, 55, 73, .20);
}

/*
 * Compatibility bridge for surfaces whose legacy core brand tokens are already
 * identical to the Design System. This intentionally excludes Studio modes:
 * recording UIs keep their proven local --accent/--surface contracts in v1.
 */
html[data-omni-surface="public"],
html[data-omni-surface="canvas"],
html[data-omni-surface="chat"] {
  --ink: var(--omni-color-ink);
  --cyan: var(--omni-color-cyan);
  --gold: var(--omni-color-gold);
  --paper: var(--omni-color-paper);
  --slate: var(--omni-color-slate);
  --green: var(--omni-color-success);
  --serif: var(--omni-font-editorial);
  --sans: var(--omni-font-interface);
  --condensed: var(--omni-font-label);
}

/* Opt-in layout primitives */
.omni-shell {
  width: min(var(--omni-container-shell), calc(100% - var(--omni-page-gutter)));
  margin-inline: auto;
}
.omni-workspace {
  width: min(var(--omni-container-workspace), calc(100% - var(--omni-page-gutter)));
  margin-inline: auto;
}
.omni-reading {
  width: min(var(--omni-container-reading), 100%);
  margin-inline: auto;
}

/* Opt-in buttons. Cyan = platform action. Gold = participation/editorial action. */
.omni-button {
  min-height: var(--omni-touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--omni-space-2);
  padding: 10px 16px;
  border: 1px solid var(--omni-border-default);
  border-radius: var(--omni-radius-pill);
  background: var(--omni-surface-panel);
  color: var(--omni-text-primary);
  font: 800 var(--omni-type-ui)/1 var(--omni-font-interface);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--omni-motion-base) var(--omni-ease-standard), border-color var(--omni-motion-base) var(--omni-ease-standard), background var(--omni-motion-base) var(--omni-ease-standard);
}
.omni-button:hover { transform: translateY(-1px); border-color: var(--omni-border-strong); }
.omni-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--omni-accent-primary) 42%, transparent); outline-offset: 3px; }
.omni-button--primary { background: linear-gradient(135deg, var(--omni-accent-primary), #8CF7FF); color: var(--omni-text-inverse); border-color: transparent; }
.omni-button--participate { background: linear-gradient(135deg, var(--omni-accent-participation), #FFDF91); color: #201609; border-color: transparent; }
.omni-button--ghost { background: transparent; }
.omni-button--danger { color: var(--omni-status-danger); border-color: color-mix(in srgb, var(--omni-status-danger) 45%, var(--omni-border-default)); }

/* Opt-in panels/cards */
.omni-panel,
.omni-card {
  border: 1px solid var(--omni-border-default);
  background: var(--omni-surface-panel);
  color: var(--omni-text-primary);
  box-shadow: var(--omni-shadow-card);
}
.omni-panel { border-radius: var(--omni-radius-xl); padding: var(--omni-space-6); }
.omni-card { border-radius: var(--omni-radius-lg); overflow: hidden; }
.omni-card--signal { background: linear-gradient(145deg, color-mix(in srgb, var(--omni-accent-primary) 12%, var(--omni-surface-panel)), var(--omni-surface-panel)); }
.omni-card--participate { background: linear-gradient(145deg, color-mix(in srgb, var(--omni-accent-participation) 11%, var(--omni-surface-panel)), var(--omni-surface-panel)); }

/* Opt-in labels, pills and statuses */
.omni-eyebrow {
  color: var(--omni-accent-primary);
  font: 800 var(--omni-type-micro)/1 var(--omni-font-label);
  letter-spacing: var(--omni-track-label);
  text-transform: uppercase;
}
.omni-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--omni-border-default);
  border-radius: var(--omni-radius-pill);
  background: var(--omni-surface-soft);
  color: var(--omni-text-secondary);
  font: 760 var(--omni-type-meta)/1 var(--omni-font-interface);
}
.omni-pill--active { border-color: color-mix(in srgb, var(--omni-accent-primary) 58%, var(--omni-border-default)); color: var(--omni-text-primary); }
.omni-status--success { color: var(--omni-status-success); }
.omni-status--warning { color: var(--omni-status-warning); }
.omni-status--danger { color: var(--omni-status-danger); }

/* Omnicasts signal primitive: cyan broadcast ring + gold participation core. */
.omni-signal {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 4px solid var(--omni-accent-primary);
  border-radius: 50%;
  box-shadow: var(--omni-shadow-signal), inset 0 0 18px rgba(66, 232, 245, .09);
}
.omni-signal::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--omni-text-primary) 25%, transparent);
  border-radius: inherit;
}
.omni-signal::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--omni-accent-participation);
  box-shadow: 0 0 14px color-mix(in srgb, var(--omni-accent-participation) 88%, transparent);
}

/* Opt-in form controls. Never targets unprefixed input/select/textarea. */
.omni-field {
  display: grid;
  gap: 6px;
  color: var(--omni-text-secondary);
  font: 700 var(--omni-type-meta)/1.25 var(--omni-font-interface);
}
.omni-field__control {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--omni-border-default);
  border-radius: var(--omni-radius-md);
  background: var(--omni-surface-input);
  color: var(--omni-text-primary);
  padding: 12px 14px;
  font: 400 16px/1.45 var(--omni-font-interface);
  outline: none;
}
.omni-field__control:focus { border-color: color-mix(in srgb, var(--omni-accent-primary) 62%, var(--omni-border-default)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--omni-accent-primary) 12%, transparent); }

/* Opt-in sheet/dialog shell shared by future Canvas, Episodes, Reactions and Media Room work. */
.omni-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--omni-z-backdrop);
  background: rgba(3, 7, 10, .62);
  backdrop-filter: blur(6px);
}
.omni-sheet {
  position: fixed;
  z-index: var(--omni-z-dialog);
  right: 18px;
  top: 18px;
  bottom: 18px;
  width: min(520px, calc(100vw - 36px));
  border: 1px solid var(--omni-border-default);
  border-radius: var(--omni-radius-xl);
  background: var(--omni-surface-raised);
  color: var(--omni-text-primary);
  box-shadow: var(--omni-shadow-dialog);
  overflow: auto;
}

/* Opt-in empty/loading language */
.omni-empty { padding: var(--omni-space-10); text-align: center; color: var(--omni-text-muted); }
.omni-skeleton {
  min-height: 14px;
  border-radius: var(--omni-radius-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--omni-accent-primary) 8%, var(--omni-surface-soft)), color-mix(in srgb, var(--omni-accent-primary) 20%, var(--omni-surface-soft)), color-mix(in srgb, var(--omni-accent-primary) 8%, var(--omni-surface-soft)));
  background-size: 220% 100%;
  animation: omniSkeleton 1.65s linear infinite;
}
@keyframes omniSkeleton { from { background-position: 190% 0; } to { background-position: -30% 0; } }

@media (max-width: 720px) {
  :root { --omni-page-gutter: 24px; }
  .omni-sheet {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: min(88dvh, 760px);
    border-radius: 24px 24px 0 0;
    padding-bottom: var(--omni-safe-bottom);
  }
}

@media (prefers-reduced-motion: reduce) {
  .omni-button,
  .omni-skeleton { transition: none; animation: none; }
}