/* THM Tecnologia — tema do Organizador (AppFlowy Web)
   Especificidade html:root vence o :root original sem depender da ordem de carga.
   Paleta: DESIGN-SYSTEM.md da landing THM (navy + accent #38BDF8 / #2563EB). */

/* ---------- CLARO ---------- */
html:root {
  --background-primary: #ffffff;
  --surface-primary: #ffffff;
  --surface-primary-hover: #f4f6fa;
  --surface-layer-01: #ffffff;
  --surface-layer-01-hover: #f4f6fa;
  --surface-layer-02: #ffffff;
  --surface-layer-02-hover: #f4f6fa;
  --surface-layer-03: #ffffff;
  --surface-layer-03-hover: #f4f6fa;
  --surface-layer-04: #ffffff;
  --surface-layer-04-hover: #f4f6fa;
  --surface-container-layer-00: #f4f6fa;
  --surface-container-layer-01: #f4f6fa;
  --surface-container-layer-02: #e8edf5;
  --surface-container-layer-03: #dde3ee;
  --surface-inverse: #0B1437;

  --text-primary: #0B1437;
  --text-secondary: #44506a;
  --text-tertiary: #76808f;
  --text-action: #2563EB;
  --text-action-hover: #1d4ed8;
  --text-info: #2563EB;
  --text-info-hover: #1d4ed8;
  --text-featured: #2563EB;
  --text-featured-hover: #1d4ed8;

  --icon-primary: #0B1437;
  --icon-secondary: #44506a;
  --icon-tertiary: #76808f;
  --icon-info-thick: #2563EB;
  --icon-info-thick-hover: #1d4ed8;
  --icon-featured-thick: #2563EB;
  --icon-featured-thick-hover: #1d4ed8;

  --border-primary: #dde3ee;
  --border-primary-hover: #c3cbd9;
  --border-theme-thick: #2563EB;
  --border-theme-thick-hover: #1d4ed8;
  --border-info-thick: #2563EB;
  --border-info-thick-hover: #1d4ed8;
  --border-featured-thick: #2563EB;
  --border-featured-thick-hover: #1d4ed8;

  --fill-primary: #f4f6fa;
  --fill-primary-hover: #e8edf5;
  --fill-theme-thick: #2563EB;
  --fill-theme-thick-hover: #1d4ed8;
  --fill-theme-select: rgba(37, 99, 235, .12);
  --fill-text-select: rgba(37, 99, 235, .20);
  --fill-button-active: rgba(37, 99, 235, .10);
  --fill-info-thick: #2563EB;
  --fill-info-thick-hover: #1d4ed8;
  --fill-featured-thick: #2563EB;
  --fill-featured-thick-hover: #1d4ed8;

  /* conjunto legado */
  --fill-default: #2563EB;
  --fill-hover: #dbe7fd;
  --content-blue-400: #2563EB;
  --content-blue-300: #3b82f6;
  --content-blue-600: #1d4ed8;
  --content-blue-100: #dbe7fd;
  --content-blue-50: #eef4ff;
  --text-title: #0B1437;
  --text-caption: #44506a;
  --text-link-default: #2563EB;
  --text-link-hover: #1d4ed8;
  --bg-brand: #0B1437;
}

/* ---------- ESCURO (padrão da marca) ---------- */
html:root[data-dark-mode=true],
html:root[data-dark-mode='true'] {
  --background-primary: #0b1428;
  --surface-primary: #0f1b35;
  --surface-primary-hover: #162447;
  --surface-layer-01: #0f1b35;
  --surface-layer-01-hover: #162447;
  --surface-layer-02: #121f3e;
  --surface-layer-02-hover: #1a2a52;
  --surface-layer-03: #162447;
  --surface-layer-03-hover: #1f3160;
  --surface-layer-04: #1a2a52;
  --surface-layer-04-hover: #1f3160;
  --surface-container-layer-00: #0f1b35;
  --surface-container-layer-01: #162447;
  --surface-container-layer-02: #1f3160;
  --surface-container-layer-03: #2a3d6e;
  --surface-inverse: #1f3160;
  --surface-overlay: rgba(6, 11, 24, .72);

  --text-primary: #f4f6fa;
  --text-secondary: #a8b1c2;
  --text-tertiary: #76808f;
  --text-quaternary: #0b1428;
  --text-inverse: #0b1428;
  --text-action: #38BDF8;
  --text-action-hover: #7dd3fc;
  --text-info: #38BDF8;
  --text-info-hover: #7dd3fc;
  --text-info-on-fill: #bae6fd;
  --text-featured: #7dd3fc;
  --text-featured-hover: #38BDF8;
  --text-featured-on-fill: #bae6fd;

  --icon-primary: #f4f6fa;
  --icon-secondary: #a8b1c2;
  --icon-tertiary: #76808f;
  --icon-quaternary: #44506a;
  --icon-info-thick: #38BDF8;
  --icon-info-thick-hover: #7dd3fc;
  --icon-featured-thick: #38BDF8;
  --icon-featured-thick-hover: #7dd3fc;

  --border-primary: #22335e;
  --border-primary-hover: #2c4178;
  --border-theme-thick: #38BDF8;
  --border-theme-thick-hover: #2563EB;
  --border-info-thick: #38BDF8;
  --border-info-thick-hover: #7dd3fc;
  --border-featured-thick: #38BDF8;
  --border-featured-thick-hover: #7dd3fc;

  --fill-primary: #162447;
  --fill-primary-hover: #1f3160;
  --fill-content-hover: rgba(244, 246, 250, .05);
  --fill-content-visible: rgba(244, 246, 250, .05);
  --fill-content-visible-hover: rgba(244, 246, 250, .10);
  --fill-theme-thick: #2563EB;
  --fill-theme-thick-hover: #1d4ed8;
  --fill-theme-select: rgba(56, 189, 248, .16);
  --fill-text-select: rgba(56, 189, 248, .28);
  --fill-button-active: rgba(56, 189, 248, .12);
  --fill-info-light: #0c3a66;
  --fill-info-light-hover: #0f4a80;
  --fill-info-thick: #38BDF8;
  --fill-info-thick-hover: #7dd3fc;
  --fill-featured-light: rgba(37, 99, 235, .35);
  --fill-featured-light-hover: rgba(37, 99, 235, .5);
  --fill-featured-thick: #2563EB;
  --fill-featured-thick-hover: #1d4ed8;

  --other-colors-text-highlight: #0c3a66;
  --other-colors-text-event: #bae6fd;
  --other-colors-filled-event: #0c3a66;
  --other-colors-filled-event-hover: #0f4a80;

  /* conjunto legado */
  --bg-body: #0b1428;
  --bg-base: #0f1b35;
  --bg-header: rgba(11, 20, 40, .82);
  --bg-tips: #0c3a66;
  --bg-brand: #0B1437;
  --bg-selection: rgba(56, 189, 248, .28);
  --text-title: #f4f6fa;
  --text-caption: #a8b1c2;
  --text-placeholder: #76808f;
  --text-link-default: #38BDF8;
  --text-link-hover: #7dd3fc;
  --text-link-pressed: #2563EB;
  --line-border: #2c4178;
  --line-divider: #1f3160;
  --line-default: #1a2a52;
  --line-card: #22335e;
  --fill-default: #38BDF8;
  --fill-hover: #0c3a66;
  --fill-toolbar: #060b18;
  --fill-selector: #0f1b35;
  --fill-list-active: #1f3160;
  --fill-list-hover: #162447;
  --content-blue-400: #38BDF8;
  --content-blue-300: #7dd3fc;
  --content-blue-600: #2563EB;
  --content-blue-100: #0c3a66;
  --content-blue-50: #0a2748;
  --content-on-fill: #0b1428;
  --scrollbar-track: #0b1428;
  --scrollbar-thumb: #2a3d6e;
}

/* ---------- Tipografia da marca ---------- */
html:root body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01';
}
html:root h1, html:root h2 {
  letter-spacing: -0.014em;
}
::selection { background: rgba(56, 189, 248, .28); }