/*
 * unified-ui.css — canonical design tokens for UNIFIED_UI mode.
 *
 * Source of truth: mygpt-ui, public/unified-ui/unified-ui.css (branch unified-ui).
 * Every other app vendors this file byte-for-byte and never edits its copy;
 * token changes are made here and re-synced (see UNIFIED_UI_PLAN.md §4.5).
 *
 * Everything is scoped under html[data-unified-ui="true"], which
 * unified-ui-boot.js sets before first paint. With the flag off this file
 * has no effect.
 *
 * Values are measured from the MyGPT primary chat UI
 * (src/theme/themeConfig.ts, src/styles/globals.scss, live computed styles).
 * App adapters must reference these --uu-* tokens rather than raw colors,
 * so the dark theme follows automatically.
 *
 * v1.1 (2026-09-29): added tokens for gaps reported by the first round
 * (danger background, AA status text, faint text, primary RGB triplet,
 * pressed opacity, paper surface, button font sizes). Base rules no longer
 * set font smoothing (the chat UI does not), and the keyboard focus ring and
 * selection color live in a low-priority cascade layer so app styles win.
 */

html[data-unified-ui="true"] {
  color-scheme: light;

  /* Typography */
  --uu-font-sans: "Noto Sans", "SF Pro SC", "SF Pro Text", "SF Pro Icons",
    "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --uu-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas,
    "Liberation Mono", monospace;
  --uu-font-size: 16px;
  --uu-font-size-sm: 14px;
  --uu-font-size-xs: 13px;
  --uu-font-size-2xs: 12px;
  --uu-font-weight-regular: 400;
  --uu-font-weight-medium: 500;
  --uu-font-weight-semibold: 600;
  --uu-font-size-title: 20px;
  --uu-font-weight-title: 700;
  --uu-font-size-dialog-title: 18px;
  --uu-font-weight-dialog-title: 600;
  --uu-line-height: 1.5;
  --uu-button-font-size: 16px;
  --uu-button-font-size-sm: 14px;

  /* Text. --uu-text-2 is the muted body text (4.7:1 on white). --uu-text-3
     matches the chat UI's inactive tabs but is only 3.4:1: use it for
     secondary labels at 14px+, not for running text. --uu-text-4 is
     decorative only (placeholders' icons, dividers' labels). */
  --uu-text: rgb(48, 48, 48);
  --uu-text-2: rgba(0, 0, 0, 0.55);
  --uu-text-3: rgba(0, 0, 0, 0.45);
  --uu-text-4: rgba(0, 0, 0, 0.25);

  /* Surfaces */
  --uu-bg: rgb(255, 255, 255);
  --uu-bg-subtle: rgb(246, 246, 246);
  --uu-bg-elevated: rgb(255, 255, 255);
  --uu-bg-hover: rgba(230, 230, 230, 0.5);
  --uu-bg-selected: rgb(230, 230, 230);
  --uu-mask: rgba(0, 0, 0, 0.45);

  /* Borders */
  --uu-border: rgb(230, 230, 230);
  --uu-border-control: rgb(217, 217, 217);
  --uu-border-strong: rgb(180, 180, 180);
  --uu-border-focus: rgb(188, 188, 188);
  --uu-focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.06);

  /* Actions */
  --uu-primary: rgb(48, 48, 48);
  --uu-primary-hover: rgb(0, 0, 0);
  --uu-primary-fg: rgb(255, 255, 255);
  --uu-primary-disabled: rgb(188, 188, 188);
  --uu-primary-rgb: 48, 48, 48;
  --uu-pressed-opacity: 0.85;
  --uu-accent: rgb(2, 133, 255);
  --uu-accent-bg: rgb(218, 238, 255);

  /* Status. The *-text colors meet WCAG AA on their own *-bg. */
  --uu-success: #52c41a;
  --uu-warning: #f5a400;
  --uu-danger: #ef4444;
  --uu-success-bg: #f6ffed;
  --uu-warning-bg: #fff7e6;
  --uu-danger-bg: #fef2f2;
  --uu-info-bg: #f0f4ff;
  --uu-success-text: #237804;
  --uu-warning-text: #874d00;
  --uu-danger-text: #cf1322;

  /* A document page stays paper-white in both themes. */
  --uu-paper: rgb(255, 255, 255);
  --uu-paper-text: rgb(48, 48, 48);

  /* Shape */
  --uu-radius-xs: 4px;
  --uu-radius: 8px;
  --uu-radius-card: 12px;
  --uu-radius-composer: 28px;
  --uu-radius-pill: 9999px;

  /* Sizing */
  --uu-control-h-sm: 32px;
  --uu-control-h: 36px;
  --uu-control-h-lg: 48px;
  --uu-sidebar-w: 300px;
  --uu-sidebar-item-h: 38px;
  --uu-menu-item-h: 40px;
  --uu-menu-pad: 8px;

  /* Elevation */
  --uu-shadow-card: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  --uu-shadow-pop: 0 8px 12px 0 rgba(0, 0, 0, 0.08);
  --uu-shadow-modal: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --uu-tooltip-bg: #0d0d0d;
  --uu-tooltip-fg: #ffffff;

  /* Loading placeholders */
  --uu-skeleton: rgba(0, 0, 0, 0.06);
  --uu-skeleton-hi: rgba(0, 0, 0, 0.15);

  /* Motion */
  --uu-motion-fast: 100ms;
  --uu-motion: 200ms;
  --uu-motion-slow: 300ms;
  --uu-ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --uu-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);

  --uu-selection: rgba(2, 133, 255, 0.18);
}

html[data-unified-ui="true"][data-uu-theme="dark"] {
  color-scheme: dark;

  --uu-text: rgb(255, 255, 255);
  --uu-text-2: rgba(255, 255, 255, 0.65);
  --uu-text-3: rgba(255, 255, 255, 0.45);
  --uu-text-4: rgba(255, 255, 255, 0.25);

  --uu-bg: rgb(33, 33, 33);
  --uu-bg-subtle: rgb(21, 21, 21);
  --uu-bg-elevated: rgb(40, 40, 40);
  --uu-bg-hover: rgba(255, 255, 255, 0.08);
  --uu-bg-selected: rgba(255, 255, 255, 0.12);
  --uu-mask: rgba(0, 0, 0, 0.6);

  --uu-border: rgba(255, 255, 255, 0.192);
  --uu-border-control: rgba(255, 255, 255, 0.25);
  --uu-border-strong: rgba(255, 255, 255, 0.35);
  --uu-border-focus: rgba(255, 255, 255, 0.55);
  --uu-focus-ring: 0 0 0 2px rgba(255, 255, 255, 0.12);

  --uu-primary: rgb(245, 245, 245);
  --uu-primary-hover: rgb(255, 255, 255);
  --uu-primary-fg: rgb(33, 33, 33);
  --uu-primary-disabled: rgb(99, 99, 99);
  --uu-primary-rgb: 245, 245, 245;
  --uu-accent: rgb(72, 170, 255);
  --uu-accent-bg: rgb(42, 74, 109);

  --uu-success-bg: rgba(82, 196, 26, 0.15);
  --uu-warning-bg: rgba(250, 173, 20, 0.15);
  --uu-danger-bg: rgba(239, 68, 68, 0.15);
  --uu-info-bg: rgba(22, 119, 255, 0.15);
  --uu-success-text: #95de64;
  --uu-warning-text: #ffd666;
  --uu-danger-text: #ff7875;

  --uu-shadow-card: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  --uu-shadow-pop: 0 8px 24px 0 rgba(0, 0, 0, 0.5);
  --uu-shadow-modal: 0 12px 32px 0 rgba(0, 0, 0, 0.55);

  --uu-skeleton: rgba(255, 255, 255, 0.08);
  --uu-skeleton-hi: rgba(255, 255, 255, 0.16);

  --uu-selection: rgba(72, 170, 255, 0.3);
}

/* Base: typography and page surface. */
html[data-unified-ui="true"] body {
  font-family: var(--uu-font-sans);
  color: var(--uu-text);
  background-color: var(--uu-bg);
}

/*
 * Defaults an app may override. Declared in a cascade layer that is declared
 * before any app layer, so every unlayered or later-layered app rule wins
 * (e.g. the chat UI's own outline suppression and selection color). Browsers
 * without @layer support skip the block, which only loses these defaults.
 */
@layer unified-ui-base {
  /* Keyboard focus ring for controls. Text fields are left out: they match
     :focus-visible on every click and already show their focus border. */
  html[data-unified-ui="true"] :is(a, button, summary, [role="button"],
      [role="tab"], [role="menuitem"], [role="option"], [role="checkbox"],
      [role="radio"], [role="switch"], input[type="checkbox"],
      input[type="radio"], input[type="button"], input[type="submit"],
      input[type="reset"]):focus-visible {
    outline: 2px solid var(--uu-accent);
    outline-offset: 2px;
  }

  html[data-unified-ui="true"] ::selection {
    background: var(--uu-selection);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-unified-ui="true"] *,
  html[data-unified-ui="true"] *::before,
  html[data-unified-ui="true"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}