/*
 * Imago UI v3 foundation
 *
 * This file is intentionally loaded after legacy page CSS. It is the stable
 * visual authority for shared color, focus, motion, and control behavior.
 */

@layer imago.application {
:root {
  --im3-canvas: #f5f6f8;
  --im3-canvas-strong: #eef1f4;
  --im3-surface: #ffffff;
  --im3-surface-raised: #ffffff;
  --im3-surface-subtle: #f8f9fb;
  --im3-surface-muted: #f0f3f6;
  --im3-control: #ffffff;
  --im3-control-hover: #f2f5f8;
  --im3-ink: #171a21;
  --im3-ink-soft: #414958;
  --im3-muted: #646e7e;
  --im3-faint: #687486;
  --im3-line: rgba(28, 34, 44, 0.11);
  --im3-line-strong: rgba(28, 34, 44, 0.2);
  --im3-accent: #1267c4;
  --im3-accent-hover: #0d55a4;
  --im3-accent-soft: #e7f1fc;
  --im3-success: #16805c;
  --im3-warning: #a86808;
  --im3-danger: #b52a3c;
  --im3-focus: #0b61bd;
  --im3-focus-outer: rgba(255, 255, 255, 0.96);
  --im3-focus-ring: 0 0 0 3px rgba(18, 103, 196, 0.24);
  --im3-success-soft: color-mix(in srgb, var(--im3-success) 12%, transparent);
  --im3-warning-soft: color-mix(in srgb, var(--im3-warning) 12%, transparent);
  --im3-danger-soft: color-mix(in srgb, var(--im3-danger) 10%, transparent);
  --im3-shadow-1:
    0 1px 2px rgba(17, 24, 39, 0.05),
    0 0 0 1px rgba(17, 24, 39, 0.015);
  --im3-shadow-2:
    0 14px 34px -26px rgba(17, 24, 39, 0.34),
    0 2px 8px -6px rgba(17, 24, 39, 0.16);
  --im3-shadow-3:
    0 24px 60px -34px rgba(17, 24, 39, 0.5),
    0 8px 24px -18px rgba(17, 24, 39, 0.28);
  --im3-radius-xs: 4px;
  --im3-radius-sm: 5px;
  --im3-radius: 8px;
  --im3-radius-lg: 10px;
  --im3-radius-pill: 999px;
  --im3-control-h: 44px;
  --im3-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --im3-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --im3-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --im3-ease: var(--im3-ease-out);
  --im3-press: 100ms;
  --im3-fast: 140ms;
  --im3-base: 200ms;
  --im3-exit: 140ms;

  /* Canonical type and spacing scale. Legacy namespaces map to these values. */
  --im3-text-xs: 11px;
  --im3-text-sm: 12px;
  --im3-text-body: 14px;
  --im3-text-lead: 16px;
  --im3-text-section: 20px;
  --im3-text-page: 30px;
  --im3-leading-tight: 1.2;
  --im3-leading-body: 1.5;
  --im3-leading-relaxed: 1.6;
  --im3-space-1: 4px;
  --im3-space-2: 8px;
  --im3-space-3: 12px;
  --im3-space-4: 16px;
  --im3-space-5: 20px;
  --im3-space-6: 24px;
  --im3-space-7: 32px;
  --im3-space-8: 40px;
  --im3-space-10: 48px;
  --im3-space-12: 64px;
  --im3-font-sans: "ImagoDisplay", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --im3-content: 1500px;
  --im3-reading: 72ch;
  --im3-dialog: 680px;
  --im3-dialog-wide: 1040px;
  --im3-dialog-workspace: 1280px;
  --im3-dialog-radius: 10px;
  --im3-z-popover: 400;
  --im3-z-dialog: 1000;
  --im3-z-toast: 1200;
  --im3-sidebar-width: 248px;
  --im3-topbar-height: 64px;
  --im3-bottom-nav-height: 72px;

  /* Compatibility aliases: v3 is the single visual source of truth. */
  --imago-canvas: var(--im3-canvas);
  --imago-surface: var(--im3-surface);
  --imago-surface-raised: var(--im3-surface-raised);
  --imago-surface-soft: var(--im3-surface-subtle);
  --imago-control: var(--im3-control);
  --imago-control-hover: var(--im3-control-hover);
  --imago-ink: var(--im3-ink);
  --imago-ink-soft: var(--im3-ink-soft);
  --imago-muted: var(--im3-muted);
  --imago-faint: var(--im3-faint);
  --imago-line: var(--im3-line);
  --imago-line-strong: var(--im3-line-strong);
  --imago-accent: var(--im3-accent);
  --imago-accent-hover: var(--im3-accent-hover);
  --imago-accent-soft: var(--im3-accent-soft);
  --imago-ok: var(--im3-success);
  --imago-warn: var(--im3-warning);
  --imago-danger: var(--im3-danger);
  --imago-radius-card: var(--im3-radius);
  --imago-radius-control: var(--im3-radius);
  --imago-radius-shell: var(--im3-radius-lg);
  --imago-shadow-card: var(--im3-shadow-1);
  --imago-shadow-popover: var(--im3-shadow-2);

  --pn-bg: var(--im3-canvas);
  --pn-surface-main: var(--im3-surface);
  --pn-surface-raised: var(--im3-surface-raised);
  --pn-surface-sunken: var(--im3-surface-subtle);
  --pn-surface-hover: var(--im3-control-hover);
  --pn-surface-active: var(--im3-accent-soft);
  --pn-text-primary: var(--im3-ink);
  --pn-text-secondary: var(--im3-ink-soft);
  --pn-text-tertiary: var(--im3-muted);
  --pn-text: var(--im3-ink);
  --pn-muted: var(--im3-muted);
  --pn-line: var(--im3-line);
  --pn-line-strong: var(--im3-line-strong);
  --pn-border-subtle: var(--im3-line);
  --pn-border-default: var(--im3-line);
  --pn-border-strong: var(--im3-line-strong);
  --pn-brand-500: var(--im3-accent);
  --pn-brand-hover: var(--im3-accent-hover);
  --pn-brand-active: var(--im3-accent-hover);
  --pn-brand-soft: var(--im3-accent-soft);
  --pn-accent: var(--im3-accent);
  --pn-ok: var(--im3-success);
  --pn-warn: var(--im3-warning);
  --pn-danger: var(--im3-danger);
  --pn-radius-xl: var(--im3-radius-lg);
  --pn-radius-lg: var(--im3-radius-lg);
  --pn-radius-md: var(--im3-radius);
  --pn-radius-sm: var(--im3-radius-sm);
  --pn-shadow-sm: var(--im3-shadow-1);
  --pn-shadow-md: var(--im3-shadow-2);
  --pn-shadow-lg: var(--im3-shadow-3);
  --pn-motion-fast: var(--im3-fast);
  --pn-motion-base: var(--im3-base);
  --pn-motion-slow: 280ms;
  --pn-ease-standard: var(--im3-ease-out);
  --pn-ease-decel: var(--im3-ease-out);
  --pn-ease-out-expo: var(--im3-ease-out);
}

@media (prefers-color-scheme: dark) {
  :root {
    --im3-canvas: #0b0e13;
    --im3-canvas-strong: #080b0f;
    --im3-surface: #12161d;
    --im3-surface-raised: #171c24;
    --im3-surface-subtle: #161b23;
    --im3-surface-muted: #1b212a;
    --im3-control: #171c24;
    --im3-control-hover: #202733;
    --im3-ink: #f2f4f7;
    --im3-ink-soft: #c8ced8;
    --im3-muted: #939dab;
    --im3-faint: #a8b1bf;
    --im3-line: rgba(235, 240, 248, 0.1);
    --im3-line-strong: rgba(235, 240, 248, 0.19);
    --im3-accent: #63a9ee;
    --im3-accent-hover: #86bdf3;
    --im3-accent-soft: rgba(55, 137, 220, 0.18);
    --im3-success: #57c99d;
    --im3-warning: #edb65c;
    --im3-danger: #ff8f9b;
    --im3-focus: #83c3ff;
    --im3-focus-outer: rgba(7, 10, 14, 0.96);
    --im3-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32);
    --im3-shadow-2: 0 18px 42px -28px rgba(0, 0, 0, 0.76);
    --im3-shadow-3: 0 30px 72px -38px rgba(0, 0, 0, 0.88);
  }
}

@media (prefers-contrast: more) {
  :root {
    --im3-muted: #505a6a;
    --im3-faint: #646e7e;
    --im3-line: rgba(28, 34, 44, 0.28);
    --im3-line-strong: rgba(28, 34, 44, 0.5);
    --im3-focus: #004f9f;
  }
}

@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root {
    --im3-muted: #d1d7e0;
    --im3-faint: #aeb7c4;
    --im3-line: rgba(235, 240, 248, 0.28);
    --im3-line-strong: rgba(235, 240, 248, 0.52);
    --im3-focus: #b8dcff;
  }
}

:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) {
  color: var(--im3-ink);
  background: var(--im3-canvas);
  font-family: var(--im3-font-sans);
  font-size: var(--im3-text-body);
  line-height: var(--im3-leading-body);
  font-feature-settings: "kern" 1, "liga" 1;
  font-optical-sizing: auto;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) :where(button, input, textarea, select) {
  font: inherit;
  letter-spacing: 0;
}

:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) :where(
  button,
  [role="button"],
  a[href],
  input[type="button"],
  input[type="submit"]
) {
  cursor: pointer;
}

:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) :where(
  button,
  [role="button"],
  a[href],
  input,
  textarea,
  select
):focus-visible {
  outline: 2px solid var(--im3-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--im3-focus-outer) !important;
}

:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) :where(button, [role="button"], input, textarea, select) {
  transition:
    color var(--im3-fast) var(--im3-ease),
    background-color var(--im3-fast) var(--im3-ease),
    border-color var(--im3-fast) var(--im3-ease),
    box-shadow var(--im3-fast) var(--im3-ease),
    opacity var(--im3-fast) var(--im3-ease);
}

:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) :where(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"]
):not(:disabled):not([aria-disabled="true"]) {
  transform-origin: center;
  transition:
    color var(--im3-fast) var(--im3-ease),
    background-color var(--im3-fast) var(--im3-ease),
    border-color var(--im3-fast) var(--im3-ease),
    box-shadow var(--im3-fast) var(--im3-ease),
    opacity var(--im3-fast) var(--im3-ease),
    scale var(--im3-press) var(--im3-ease-out);
}

:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) :where(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"]
):not(:disabled):not([aria-disabled="true"]):active {
  scale: 0.98;
}

:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) :where(button, [role="button"]):disabled,
:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) :where(button, [role="button"])[aria-disabled="true"] {
  cursor: default !important;
  opacity: 0.48;
}

:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) ::selection {
  color: var(--im3-ink);
  background: color-mix(in srgb, var(--im3-accent) 22%, transparent);
}

:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--im3-muted) 42%, transparent) transparent;
}

:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) ::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

:where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) ::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--im3-muted) 42%, transparent);
  background-clip: padding-box;
}

@media (prefers-reduced-motion: reduce) {
  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) *,
  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) *::before,
  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) *::after {
    scroll-behavior: auto !important;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    button,
    [role="button"],
    input[type="button"],
    input[type="submit"]
  ):not(:disabled):not([aria-disabled="true"]):active {
    scale: none;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    button,
    [role="button"],
    a[href],
    input,
    textarea,
    select
  ) {
    transition-property:
      color,
      background-color,
      border-color,
      box-shadow,
      opacity !important;
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
    transition-timing-function: linear !important;
  }
}

html.pn-motion-downgraded :where(
  body.page-gallery,
  body.page-admin,
  body.page-share,
  body.page-login,
  body.page-share-review
) :where(
  button,
  [role="button"],
  a[href],
  input,
  textarea,
  select
) {
  transition-property:
    color,
    background-color,
    border-color,
    box-shadow,
    opacity !important;
  transition-duration: 120ms !important;
  transition-delay: 0ms !important;
  transition-timing-function: linear !important;
}

@media (prefers-reduced-transparency: reduce) {
  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    .gallery-topbar,
    .admin-header-v2,
    .admin-sidebar,
    .share-toolbar-v2,
    .mobile-bottom-nav,
    .mobile-bottom-sheet,
    .modal-card,
    .ai-modal-card
  ) {
    background: var(--im3-surface-raised) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (forced-colors: active) {
  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    button,
    [role="button"],
    a[href],
    input,
    textarea,
    select
  ):focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    [aria-current="page"],
    [aria-selected="true"],
    [aria-pressed="true"],
    button.is-active,
    [role="button"].is-active
  ) {
    outline: 2px solid Highlight !important;
    outline-offset: -2px !important;
  }

  :where(
    body.page-gallery,
    body.page-admin,
    body.page-share,
    body.page-login,
    body.page-share-review
  ) :where(
    button:disabled,
    input:disabled,
    textarea:disabled,
    select:disabled,
    [role="button"][aria-disabled="true"]
  ) {
    color: GrayText !important;
    opacity: 1 !important;
  }
}
}