/*
 * Healing Wisdom Design System — Tool surface tokens
 * Source: Figma HW Design System → Foundations (Tool Light / Tool Dark)
 * Public API for tools: --hw-tool-* (stable). Semantic --hw-* aliases included.
 */

:root,
[data-hw-theme="light"],
.hw-tool-page {
  /* Primitives (subset) */
  --hw-purple-900: #21214f;
  --hw-dark-page: #101829;
  --hw-dark-panel: #172338;
  --hw-dark-line: #273753;
  --hw-dark-text-soft: #9fb0d3;
  --hw-tool-accent-light: #324b91;
  --hw-tool-accent-dark: #6c93ef;

  /* Tool Light semantic (default) */
  --hw-bg-canvas: #eef1f7;
  --hw-bg-surface: #ffffff;
  --hw-bg-surface-muted: #eef1f7;
  --hw-fg-default: #0f1a33;
  --hw-fg-display: #21214f;
  --hw-fg-muted: #5d6890;
  --hw-line-default: #cdd6e8;
  --hw-accent-primary: #324b91;
  --hw-accent-secondary: #6a78b1;
  --hw-action-bg: #324b91;
  --hw-action-fg: #ffffff;
  --hw-link-default: #324b91;
  --hw-state-info: #2d6da8;
  --hw-state-success: #4a7a26;
  --hw-state-warn: #756038;
  --hw-state-danger: #a91e1e;

  /* Hub chrome (dark header/footer — intentional on Tool Light) */
  --hw-tool-header-bg-start: #1a1a42;
  --hw-tool-header-bg-end: #21214f;

  /* Page atmosphere — soft blue field across the canvas (same family, readable gradient) */
  --hw-page-bg:
    radial-gradient(ellipse 110% 70% at 8% -5%, rgba(50, 75, 145, 0.12), transparent 58%),
    radial-gradient(ellipse 90% 55% at 100% 95%, rgba(106, 120, 177, 0.1), transparent 52%),
    linear-gradient(168deg, #d9e3f2 0%, #e8eef7 38%, #f1f4f9 72%, #eef1f7 100%);
  --hw-dot-grid-size: 22px;
  --hw-dot-grid-radius: 1.15px;
  --hw-dot-grid-color: rgba(50, 75, 145, 0.2);

  /* Section accents — restrained, semantic (not rainbow washes) */
  --hw-accent-tools: #324b91;
  --hw-accent-guidelines: #b45309;

  /* Public tool aliases (existing classnames consume these) */
  --hw-tool-ink: var(--hw-fg-default);
  --hw-tool-ocean: var(--hw-accent-primary);
  --hw-tool-mist: var(--hw-bg-canvas);
  --hw-tool-white: var(--hw-bg-surface);
  --hw-tool-line: var(--hw-line-default);
  --hw-tool-text-soft: var(--hw-fg-muted);
  --hw-tool-layout-max-width: 1020px;

  /* Type */
  --hw-font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;
  --hw-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Prefer tight corners — avoid pill-y chrome */
  --hw-radius-sm: 3px;
  --hw-radius-md: 4px;
  --hw-radius-lg: 6px;
  /* Soft lift — enough depth on the mist canvas, not floating panels */
  --hw-elevation-1: 0 1px 2px rgba(15, 26, 51, 0.04), 0 2px 8px rgba(15, 26, 51, 0.04);
  --hw-elevation-2: 0 2px 4px rgba(15, 26, 51, 0.05), 0 8px 20px rgba(15, 26, 51, 0.06);
  --hw-elevation-hover: 0 2px 6px rgba(15, 26, 51, 0.06), 0 10px 24px rgba(15, 26, 51, 0.08);
}

[data-hw-theme="dark"] {
  --hw-bg-canvas: #101829;
  --hw-bg-surface: #172338;
  --hw-bg-surface-muted: #1c2a42;
  --hw-fg-default: #f1f5ff;
  --hw-fg-display: #f1f5ff;
  --hw-fg-muted: #9fb0d3;
  --hw-line-default: #273753;
  --hw-accent-primary: #6c93ef;
  --hw-accent-secondary: #acc0e2;
  --hw-action-bg: #6c93ef;
  --hw-action-fg: #21214f;
  --hw-link-default: #6c93ef;
  --hw-state-info: #6c93ef;
  --hw-state-success: #45b19b;
  --hw-state-warn: #f4c361;
  --hw-state-danger: #e16435;

  --hw-tool-ink: var(--hw-fg-default);
  --hw-tool-ocean: var(--hw-accent-primary);
  --hw-tool-mist: var(--hw-bg-canvas);
  --hw-tool-white: var(--hw-bg-surface);
  --hw-tool-line: var(--hw-line-default);
  --hw-tool-text-soft: var(--hw-fg-muted);
  --hw-tool-header-bg-start: #0c0d10;
  --hw-tool-header-bg-end: #161922;
  --hw-page-bg: linear-gradient(180deg, #0b0c0f 0%, #111318 48%, #0f1115 100%);
  --hw-dot-grid-color: rgba(255, 255, 255, 0.08);
}

/* Tool type utilities (Foundations tool/* scale) */
.hw-type-tool-heading-20 {
  font-family: var(--hw-font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 29px;
  color: var(--hw-fg-display);
}

.hw-type-tool-heading-18 {
  font-family: var(--hw-font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 26.1px;
  color: var(--hw-fg-display);
}

.hw-type-tool-body-16 {
  font-family: var(--hw-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  color: var(--hw-fg-default);
}

.hw-type-tool-body-14 {
  font-family: var(--hw-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 20.3px;
  color: var(--hw-fg-default);
}

.hw-type-tool-label-12 {
  font-family: var(--hw-font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 17.4px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--hw-fg-muted);
}