/* Getwebup customer panel: design tokens (hPanel-style redesign).
   Loaded by every customer layout (user, auth, bare, file manager) after the legacy stylesheets.
   Never set --accent, --accent-dark, --accent-text or --accent-soft here: Brand::css() owns them; hp reads them only. */

:root{
  color-scheme:light;
  --hp-bg:#f5f6f8; --hp-surface:#ffffff; --hp-surface-2:#f9fafb; --hp-surface-3:#f2f4f7; --hp-hover:#f2f4f7;
  --hp-border:#e4e7ec; --hp-border-strong:#d0d5dd; --hp-divider:#eaecf0;
  --hp-text:#101828; --hp-text-2:#344054; --hp-muted:#667085; --hp-subtle:#98a2b3;
  --hp-accent:var(--accent); --hp-accent-hover:var(--accent-dark); --hp-accent-text:var(--accent-text); --hp-accent-soft:var(--accent-soft);
  --hp-accent-ring:color-mix(in srgb,var(--accent) 30%,transparent);
  --hp-accent-line:color-mix(in srgb,var(--accent) 35%,var(--hp-border));
  --hp-on-accent:#ffffff;            /* each layout overrides it from UserTheme::onAccent() */
  --hp-ok:#067647;   --hp-ok-soft:#ecfdf3;   --hp-ok-line:#abefc6;
  --hp-warn:#b54708; --hp-warn-soft:#fffaeb; --hp-warn-line:#fedf89;
  --hp-bad:#b42318;  --hp-bad-soft:#fef3f2;  --hp-bad-line:#fecdca;
  --hp-info:#175cd3; --hp-info-soft:#eff8ff; --hp-info-line:#b2ddff;
  --hp-mute:#475467; --hp-mute-soft:#f2f4f7;
  --hp-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hp-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --hp-fs-11:11px; --hp-fs-12:12px; --hp-fs-13:13px; --hp-fs-14:14px; --hp-fs-16:16px;
  --hp-fs-18:18px; --hp-fs-20:20px; --hp-fs-24:24px; --hp-fs-28:28px;
  --hp-1:4px; --hp-2:8px; --hp-3:12px; --hp-4:16px; --hp-5:20px; --hp-6:24px; --hp-8:32px; --hp-10:40px; --hp-12:48px;
  --hp-r-xs:6px; --hp-r-sm:8px; --hp-r-md:12px; --hp-r-lg:16px; --hp-r-pill:999px;
  --hp-sh-xs:0 1px 2px rgba(16,24,40,.05);
  --hp-sh-sm:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --hp-sh-md:0 4px 8px -2px rgba(16,24,40,.08),0 2px 4px -2px rgba(16,24,40,.04);
  --hp-sh-lg:0 12px 24px -4px rgba(16,24,40,.12),0 4px 8px -2px rgba(16,24,40,.06);
  --hp-side-w:256px; --hp-top-h:64px; --hp-bottom-h:64px; --hp-max:1280px;
  /* z-index scale: topbar < bottom bar < menus < scrim < drawer < .modal 100 < .fm-drop 150 < .ctx 160 < .toasts 200 < .skip/.gw-bar 300 */
  --hp-z-top:30; --hp-z-bottom:40; --hp-z-menu:45; --hp-z-scrim:55; --hp-z-drawer:60;
  --hp-ease:cubic-bezier(.2,.8,.2,1); --hp-t:160ms;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --hp-bg:#0b0e11; --hp-surface:#14181d; --hp-surface-2:#191e24; --hp-surface-3:#20262d; --hp-hover:#1e242b;
  --hp-border:#283039; --hp-border-strong:#36404b; --hp-divider:#222932;
  --hp-text:#eef1f4; --hp-text-2:#cdd3da; --hp-muted:#9aa4b0; --hp-subtle:#6c7682;
  --hp-ok:#47cd89;   --hp-ok-soft:rgba(71,205,137,.12);  --hp-ok-line:rgba(71,205,137,.32);
  --hp-warn:#fdb022; --hp-warn-soft:rgba(253,176,34,.12); --hp-warn-line:rgba(253,176,34,.32);
  --hp-bad:#f97066;  --hp-bad-soft:rgba(249,112,102,.12); --hp-bad-line:rgba(249,112,102,.32);
  --hp-info:#53b1fd; --hp-info-soft:rgba(83,177,253,.12); --hp-info-line:rgba(83,177,253,.32);
  --hp-mute:#cdd3da; --hp-mute-soft:#20262d;
  --hp-sh-xs:none; --hp-sh-sm:none; --hp-sh-md:0 0 0 1px var(--hp-border); --hp-sh-lg:0 16px 32px rgba(0,0,0,.55);
}

/* Light island inside dark mode: the invoice paper (and anything else that must stay a white document). */
.hp-light{
  color-scheme:light; color:var(--hp-text); background:#fff;
  --hp-bg:#f5f6f8; --hp-surface:#ffffff; --hp-surface-2:#f9fafb; --hp-surface-3:#f2f4f7; --hp-hover:#f2f4f7;
  --hp-border:#e4e7ec; --hp-border-strong:#d0d5dd; --hp-divider:#eaecf0;
  --hp-text:#101828; --hp-text-2:#344054; --hp-muted:#667085; --hp-subtle:#98a2b3;
  --hp-ok:#067647;   --hp-ok-soft:#ecfdf3;   --hp-ok-line:#abefc6;
  --hp-warn:#b54708; --hp-warn-soft:#fffaeb; --hp-warn-line:#fedf89;
  --hp-bad:#b42318;  --hp-bad-soft:#fef3f2;  --hp-bad-line:#fecdca;
  --hp-info:#175cd3; --hp-info-soft:#eff8ff; --hp-info-line:#b2ddff;
  --hp-mute:#475467; --hp-mute-soft:#f2f4f7;
  --hp-sh-xs:0 1px 2px rgba(16,24,40,.05);
  --hp-sh-sm:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --hp-sh-md:0 4px 8px -2px rgba(16,24,40,.08),0 2px 4px -2px rgba(16,24,40,.04);
  --hp-sh-lg:0 12px 24px -4px rgba(16,24,40,.12),0 4px 8px -2px rgba(16,24,40,.06);
  --hp-accent-soft:color-mix(in srgb,var(--accent) 12%,#fff);
  --hp-accent-text:color-mix(in srgb,var(--accent) 78%,#000);
  --hp-accent-ring:color-mix(in srgb,var(--accent) 30%,transparent);
  --hp-accent-line:color-mix(in srgb,var(--accent) 35%,#e4e7ec);
}
/* on the dark page the white island keeps a hairline edge */
:root[data-theme="dark"] .hp-light{box-shadow:0 0 0 1px #283039}

/* Legacy remap: un-migrated customer CSS follows the new palette. Listed again for .hp-light because a custom property
   that uses var() is resolved where it is declared, and descendants inherit the resolved value. */
:root,:root[data-theme="dark"],.hp-light{
  --paper:var(--hp-bg); --paper-2:var(--hp-surface-2); --paper-3:var(--hp-surface-3); --surface:var(--hp-surface);
  --ink:var(--hp-text); --ink-2:var(--hp-text-2); --ink-3:var(--hp-muted); --ink-4:var(--hp-subtle);
  --rule:var(--hp-border); --rule-soft:var(--hp-divider); --rule-strong:var(--hp-border-strong);
  --ok:var(--hp-ok); --ok-tint:var(--hp-ok-soft); --warn:var(--hp-warn); --warn-tint:var(--hp-warn-soft); --bad:var(--hp-bad); --bad-tint:var(--hp-bad-soft);
  --bg:var(--hp-bg); --line:var(--hp-border); --text:var(--hp-text); --muted:var(--hp-muted);
  --ok-bg:var(--hp-ok-soft); --warn-bg:var(--hp-warn-soft); --bad-bg:var(--hp-bad-soft);
  --font:var(--hp-font); --font-display:var(--hp-font); --mono:var(--hp-mono);
  --r-card:var(--hp-r-md); --r-btn:var(--hp-r-sm); --r-input:var(--hp-r-sm); --radius:var(--hp-r-md);
  --sh-1:var(--hp-sh-xs); --sh-2:var(--hp-sh-sm); --sh-3:var(--hp-sh-md); --shadow:var(--hp-sh-xs);
}