/* Handsfriend shared visual tokens.
 * Keep semantic colors here so equivalent controls, surfaces and chat bubbles
 * do not invent page-local palettes. Domain CSS may alias these tokens, but
 * should only introduce a new color when it represents a genuinely different
 * state or product meaning.
 */
:root {
  /* Brand / primary action */
  --hf-color-primary: #00aeef;
  --hf-color-primary-hover: #03a0da;
  --hf-color-primary-active: #049bd1;
  --hf-color-primary-text: #0590c3;
  --hf-color-primary-soft: #edf8fc;
  --hf-color-primary-soft-hover: #e2f2f8;
  --hf-color-primary-border: #bddfea;
  --hf-color-primary-rgb: 0, 174, 239;

  /* Neutral surfaces */
  --hf-color-page: #ffffff;
  --hf-color-surface-elevated: #ffffff;
  --hf-color-text-strong: #27343b;
  --hf-color-text: #3b484f;
  --hf-color-muted: #74818a;
  --hf-color-muted-light: #929ca2;
  --hf-color-line: #dfe7eb;
  --hf-color-line-strong: #ced9df;
  --hf-color-surface: #ffffff;
  --hf-color-surface-soft: #f6f8f9;
  --hf-color-surface-hover: #eef3f5;
  --hf-color-surface-pressed: #e6ecef;

  /* Semantic states */
  --hf-color-success: #3fa66f;
  --hf-color-success-hover: #348b5e;
  --hf-color-success-soft: #edf8f2;
  --hf-color-warning: #d39a39;
  --hf-color-warning-hover: #b7802c;
  --hf-color-warning-soft: #fff8ea;
  --hf-color-danger: #f48b91;
  --hf-color-danger-hover: #b94b52;
  --hf-color-danger-soft: #fff0f1;

  /* Shared component colors */
  --hf-button-primary-bg: var(--hf-color-primary);
  --hf-button-primary-hover-bg: var(--hf-color-primary-hover);
  --hf-button-primary-active-bg: var(--hf-color-primary-active);
  --hf-button-primary-text: #ffffff;

  --hf-button-secondary-bg: var(--hf-color-surface);
  --hf-button-secondary-hover-bg: var(--hf-color-surface-hover);
  --hf-button-secondary-border: var(--hf-color-line);
  --hf-button-secondary-text: #43545f;

  --hf-card-bg: var(--hf-color-surface);
  --hf-card-border: var(--hf-color-line);
  --hf-card-soft-bg: var(--hf-color-surface-soft);

  --hf-chat-bubble-mine-bg: var(--hf-color-primary);
  --hf-chat-bubble-mine-text: #ffffff;
  --hf-chat-bubble-peer-bg: #f1f4f6;
  --hf-chat-bubble-peer-text: #2d373d;
  --hf-chat-bubble-peer-border: #e4eaed;

  /* Shared typography */
  --hf-chat-message-font-family: Helvetica, Arial, sans-serif;
  --hf-textarea-font-family: Helvetica, Arial, sans-serif;

  --hf-focus-color: #69b8d6;
  --hf-focus-ring: rgba(var(--hf-color-primary-rgb), 0.16);

  /* Stateful controls */
  --hf-control-selected-bg: var(--hf-color-primary-soft);
  --hf-control-selected-hover-bg: var(--hf-color-primary-soft-hover);
  --hf-control-selected-border: var(--hf-color-primary);
  --hf-control-selected-text: var(--hf-color-primary-text);
  --hf-control-disabled-bg: var(--hf-color-surface-pressed);
  --hf-control-disabled-border: var(--hf-color-line);
  --hf-control-disabled-text: var(--hf-color-muted-light);

  /* Toggle / switch */
  --hf-switch-off-bg: #cbd3d7;
  --hf-switch-off-border: #bbc6cb;
  --hf-switch-on-bg: var(--hf-color-primary);
  --hf-switch-on-hover-bg: var(--hf-color-primary-hover);
  --hf-switch-knob-bg: #ffffff;
  --hf-switch-knob-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);

  /* Branded information surfaces */
  --hf-color-brand-panel: #eef8fc;
  --hf-color-brand-panel-strong: #e1f1f8;
  --hf-color-brand-panel-border: #c6e5f1;
  --hf-color-brand-panel-text: #1c4353;

  /* Rich article HTML. Content data consumes these variables directly so
   * inline layout remains stable while colors follow the global theme. */
  --hf-rich-surface: #ffffff;
  --hf-rich-surface-soft: #f8fafb;
  --hf-rich-surface-muted: #fafbfc;
  --hf-rich-surface-accent: #eef9fd;
  --hf-rich-text-strong: #1f2c32;
  --hf-rich-text: #4f5c63;
  --hf-rich-muted: #65727a;
  --hf-rich-line: #e4e8ea;
  --hf-rich-line-soft: #edf0f2;
  --hf-rich-accent-line: #d5edf7;
  --hf-rich-link: #008ec2;

  --hf-modal-backdrop-color: rgba(18, 29, 37, 0.56);
}

/* Global site theme. The early head bootstrap sets data-hf-theme before the
 * first paint; theme_ui.js owns runtime switching and persistence. */
html[data-hf-theme="light"] {
  color-scheme: light;
}

html[data-hf-theme="dark"] {
  color-scheme: dark;

  --hf-color-page: #0d141b;
  --hf-color-surface: #111820;
  --hf-color-surface-elevated: #151f28;
  --hf-color-surface-soft: #17212b;
  --hf-color-surface-hover: #1d2a35;
  --hf-color-surface-pressed: #24333f;

  --hf-color-text-strong: #f1f6f8;
  --hf-color-text: #d4dee4;
  --hf-color-muted: #9aabb5;
  --hf-color-muted-light: #7f919c;
  --hf-color-line: #2a3944;
  --hf-color-line-strong: #344854;

  --hf-color-primary-text: #70d3f7;
  --hf-color-primary-soft: #142d38;
  --hf-color-primary-soft-hover: #1a3845;
  --hf-color-primary-border: #285164;

  --hf-color-success: #55c688;
  --hf-color-success-hover: #68d59a;
  --hf-color-success-soft: #173126;
  --hf-color-warning: #e2b45b;
  --hf-color-warning-hover: #e9c374;
  --hf-color-warning-soft: #332816;
  --hf-color-danger: #f48b91;
  --hf-color-danger-hover: #ff9ca2;
  --hf-color-danger-soft: #351f24;

  --hf-button-secondary-bg: #18242d;
  --hf-button-secondary-hover-bg: #22323d;
  --hf-button-secondary-border: #344854;
  --hf-button-secondary-text: #d9e4e9;

  --hf-card-bg: #151f28;
  --hf-card-border: #2a3944;
  --hf-card-soft-bg: #17212b;

  --hf-chat-bubble-peer-bg: #26343e;
  --hf-chat-bubble-peer-text: #f0f5f7;
  --hf-chat-bubble-peer-border: #344650;

  --hf-focus-color: #70d3f7;
  --hf-focus-ring: rgba(112, 211, 247, 0.18);

  --hf-control-selected-bg: #173846;
  --hf-control-selected-hover-bg: #1c4657;
  --hf-control-selected-border: #55bfe7;
  --hf-control-selected-text: #8edfff;
  --hf-control-disabled-bg: #17212b;
  --hf-control-disabled-border: #2a3944;
  --hf-control-disabled-text: #738691;

  --hf-switch-off-bg: #34434e;
  --hf-switch-off-border: #435560;
  --hf-switch-on-bg: #007fae;
  --hf-switch-on-hover-bg: #008fc5;
  --hf-switch-knob-bg: #f5fbfd;
  --hf-switch-knob-shadow: 0 1px 5px rgba(0, 0, 0, 0.38);

  --hf-color-brand-panel: #0f2029;
  --hf-color-brand-panel-strong: #0c1b21;
  --hf-color-brand-panel-border: #244654;
  --hf-color-brand-panel-text: #d8ebf2;

  --hf-rich-surface: #151f28;
  --hf-rich-surface-soft: #17212b;
  --hf-rich-surface-muted: #18242d;
  --hf-rich-surface-accent: #142d38;
  --hf-rich-text-strong: #eef5f7;
  --hf-rich-text: #d4dee4;
  --hf-rich-muted: #9aabb5;
  --hf-rich-line: #344854;
  --hf-rich-line-soft: #2a3944;
  --hf-rich-accent-line: #285164;
  --hf-rich-link: #70d3f7;

  --hf-modal-backdrop-color: rgba(0, 0, 0, 0.72);
}

/* Textarea typography is a project-wide input primitive. Page CSS may own
 * size/spacing/state, but not replace the readable Helvetica-first family. */
textarea {
  font-family: var(
    --hf-textarea-font-family,
    Helvetica,
    Arial,
    sans-serif
  ) !important;
}

@media (hover: hover) and (pointer: fine) {
  :where(
      button,
      input[type="button"],
      input[type="submit"],
      input[type="reset"],
      a.btn,
      a[class*="-button"],
      a[class*="_button"],
      [role="button"]
    ):not(:disabled):not([disabled]):not([aria-disabled="true"]):not(
      .disabled
    ):not(.is-disabled) {
    transition:
      background-color 0.14s ease,
      border-color 0.14s ease,
      color 0.14s ease,
      box-shadow 0.14s ease;
  }

  :where(
      .room-secondary-button,
      .secondary-button,
      .btn-default,
      .mypage-message-button.is-secondary,
      .mypage-conversation-icon-button
    ):not(:disabled):not([disabled]):not([aria-disabled="true"]):hover {
    background-color: var(--hf-button-secondary-hover-bg);
    border-color: var(--hf-color-line-strong);
  }

  :where(
      .room-secondary-button,
      .secondary-button,
      .btn-default,
      .mypage-message-button.is-secondary,
      .mypage-conversation-icon-button
    ):not(:disabled):not([disabled]):not([aria-disabled="true"]):active {
    background-color: var(--hf-color-surface-pressed);
    border-color: var(--hf-color-line-strong);
  }
}

/* Pointer/touch activation and keyboard navigation use different focus
 * affordances. Browser :focus-visible heuristics are inconsistent after touch
 * activation on some mobile engines, so interaction_ui.js records the actual
 * input modality. Pointer focus stays visually clean; keyboard Tab focus keeps
 * one shared accessible ring. */
:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.btn,
  a[class*="-button"],
  a[class*="_button"],
  [role="button"]
) {
  -webkit-tap-highlight-color: transparent;
}

:where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  a.btn,
  a[class*="-button"],
  a[class*="_button"],
  [role="button"]
):focus {
  outline: none !important;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none !important;
}

html[data-hf-input-modality="pointer"]
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    a[class*="-button"],
    a[class*="_button"],
    [role="button"]
  ):focus-visible {
  outline: none !important;
  outline-offset: 0;
}

html[data-hf-input-modality="keyboard"]
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    a[class*="-button"],
    a[class*="_button"],
    [role="button"]
  ):focus {
  outline: 2px solid var(--hf-focus-color) !important;
  outline-offset: 2px;
}

/* No-JS / very early-load fallback. Once interaction_ui.js records a
 * modality, the explicit pointer/keyboard rules above own the result. */
html:not([data-hf-input-modality])
  :where(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    a[class*="-button"],
    a[class*="_button"],
    [role="button"]
  ):focus-visible {
  outline: 2px solid var(--hf-focus-color) !important;
  outline-offset: 2px;
}