/* Hanok colour + chrome only. Do not set font-family, --font-*, or heading weight. */

:root,
:root[data-theme="dark"],
:root[data-theme="openknot"] {
  --ring: #7dae6e;
  --accent: #7dae6e;
  --accent-hover: #8fbc7a;
  --accent-muted: #7dae6e;
  --accent-subtle: rgba(125, 174, 110, 0.14);
  --accent-glow: rgba(125, 174, 110, 0.22);
  --primary: #5e7e4e;
  --primary-hover: #4d6a40;
  --primary-foreground: #fafafa;

  --bg: #09090b;
  --bg-accent: #0f0f12;
  --bg-elevated: #18181b;
  --bg-hover: #27272a;
  --bg-muted: #27272a;

  --card: #18181b;
  --card-highlight: rgba(255, 255, 255, 0.03);
  --popover: #18181b;

  --panel: #09090b;
  --panel-strong: #18181b;
  --panel-hover: #27272a;
  --chrome: rgba(9, 9, 11, 0.96);
  --chrome-strong: rgba(9, 9, 11, 0.98);

  --text: #d4d4d8;
  --text-strong: #fafafa;
  --chat-text: #d4d4d8;
  --muted: #a1a1aa;
  --muted-strong: #a1a1aa;
  --muted-foreground: #a1a1aa;

  --border: #27272a;
  --border-strong: #3f3f46;
  --border-hover: #52525b;
  --input: #27272a;

  --secondary: #18181b;
  --accent-2: #a1a1aa;
  --accent-2-muted: rgba(161, 161, 170, 0.7);
  --accent-2-subtle: rgba(161, 161, 170, 0.1);

  --grid-line: rgba(255, 255, 255, 0.03);
}

:root[data-theme-mode="light"],
:root[data-theme="light"],
:root[data-theme="openknot-light"] {
  --ring: #5e7e4e;
  --accent: #5e7e4e;
  --accent-hover: #4d6a40;
  --accent-muted: #5e7e4e;
  --accent-subtle: rgba(94, 126, 78, 0.1);
  --accent-glow: rgba(94, 126, 78, 0.14);
  --primary: #5e7e4e;
  --primary-hover: #4d6a40;
  --primary-foreground: #fafafa;

  --bg: #fafafa;
  --bg-accent: #f4f4f5;
  --bg-hover: #e4e4e7;
  --bg-muted: #f4f4f5;
  --bg-content: #f4f4f5;
  --bg-elevated: #ffffff;

  --card-foreground: #18181b;
  --card-highlight: rgba(0, 0, 0, 0.02);
  --popover-foreground: #18181b;

  --panel: #fafafa;
  --panel-strong: #f4f4f5;
  --panel-hover: #e4e4e7;
  --chrome: rgba(250, 250, 250, 0.96);
  --chrome-strong: rgba(250, 250, 250, 0.98);

  --text: #3f3f46;
  --text-strong: #18181b;
  --chat-text: #3f3f46;
  --muted: #71717a;
  --muted-strong: #52525b;
  --muted-foreground: #71717a;

  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --border-hover: #a1a1aa;
  --input: #e4e4e7;

  --secondary: #f4f4f5;
  --secondary-foreground: #3f3f46;
  --accent-2: #5e7e4e;
  --accent-2-muted: rgba(94, 126, 78, 0.75);
  --accent-2-subtle: rgba(94, 126, 78, 0.08);

  --grid-line: rgba(0, 0, 0, 0.04);
}

/* The pre-auth connect gate stays Hanok dark even when the OS is in light mode.
   openclaw-login-gate renders into light DOM (no shadow root), so :has() reaches
   it. Scoped to the gate/splash so the logged-in app keeps its normal theming. */
html:has(.login-gate),
html:has(.connect-splash) {
  background: #09090b !important;
  color-scheme: dark;
}

html[data-theme-mode="light"]:has(.login-gate),
html[data-theme-mode="light"]:has(.connect-splash),
html[data-theme="light"]:has(.login-gate),
html[data-theme="light"]:has(.connect-splash) {
  --ring: #7dae6e;
  --accent: #7dae6e;
  --accent-hover: #8fbc7a;
  --accent-muted: #7dae6e;
  --accent-subtle: rgba(125, 174, 110, 0.14);
  --accent-glow: rgba(125, 174, 110, 0.22);

  --bg: #09090b;
  --bg-accent: #0f0f12;
  --bg-elevated: #18181b;
  --bg-hover: #27272a;
  --bg-muted: #27272a;
  --bg-content: #0f0f12;

  --card: #18181b;
  --card-foreground: #d4d4d8;
  --card-highlight: rgba(255, 255, 255, 0.03);
  --popover: #18181b;
  --popover-foreground: #d4d4d8;

  --panel: #09090b;
  --panel-strong: #18181b;
  --panel-hover: #27272a;
  --chrome: rgba(9, 9, 11, 0.96);
  --chrome-strong: rgba(9, 9, 11, 0.98);

  --text: #d4d4d8;
  --text-strong: #fafafa;
  --chat-text: #d4d4d8;
  --muted: #a1a1aa;
  --muted-strong: #a1a1aa;
  --muted-foreground: #a1a1aa;

  --border: #27272a;
  --border-strong: #3f3f46;
  --border-hover: #52525b;
  --input: #27272a;

  --secondary: #18181b;
  --secondary-foreground: #d4d4d8;
  --accent-2: #a1a1aa;
  --accent-2-muted: rgba(161, 161, 170, 0.7);
  --accent-2-subtle: rgba(161, 161, 170, 0.1);

  --grid-line: rgba(255, 255, 255, 0.03);
}

#hanok-powered {
  position: fixed;
  right: 0.85rem;
  bottom: 0.55rem;
  z-index: 20;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: #71717a;
  pointer-events: none;
}