/* Getwebup customer panel: design tokens ("Getwebup Console" restyle of the 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;
  /* light --hp-surface-2 equals --hp-bg on purpose: wells inside white cards are the page ground colour */
  --hp-bg:#f6f7f6; --hp-surface:#ffffff; --hp-surface-2:#f6f7f6; --hp-surface-3:#eef0ef; --hp-hover:#f1f3f2;
  --hp-border:#e4e7e5; --hp-border-strong:#d5dbd8; --hp-divider:#eef0ef;
  --hp-text:#0e1512; --hp-text-2:#3d4842; --hp-muted:#5b6660; --hp-subtle:#8a968f;
  --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-accent-on-ink:color-mix(in srgb,var(--accent) 40%,#fff);   /* accent-coloured text and icons on ink surfaces */
  --hp-on-accent:#ffffff;            /* each layout overrides it from UserTheme::onAccent() */
  --hp-ok:#067647;   --hp-ok-soft:#ecfdf3;   --hp-ok-line:#abefc6;
  --hp-warn:#b45309; --hp-warn-soft:#fff7ed; --hp-warn-line:#f3d9b8; --hp-warn-ink:#7a4a12;
  --hp-bad:#b42318;  --hp-bad-soft:#fef2f2;  --hp-bad-line:#fecdca;
  --hp-info:#3730a3; --hp-info-soft:#eef2ff; --hp-info-line:#c7d2fe;
  --hp-mute:#3d4842; --hp-mute-soft:#eef0ef;
  /* ink: the dark hero, help cards and toasts (text on it: --hp-on-ink / --hp-on-ink-2 / --hp-accent-on-ink, never --hp-accent-text) */
  --hp-ink:#0e1512; --hp-ink-2:#1f2a25; --hp-ink-3:#2a3631; --hp-ink-line:transparent;
  --hp-on-ink:#ffffff; --hp-on-ink-2:#c9d2cd;
  --hp-btn-ink-bg:#0e1512; --hp-btn-ink-fg:#ffffff; --hp-btn-ink-hover:#1f2a25;
  --hp-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hp-font-display:"Manrope","Inter",system-ui,-apple-system,"Segoe UI",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;
  /* xs tags and inline code · sm buttons, inputs, nav pills, icon tiles · in tiles and wells inside a card, menus ·
     md cards, KPI tiles, rows, lists, banners · lg hero, modals */
  --hp-r-xs:6px; --hp-r-sm:10px; --hp-r-in:12px; --hp-r-md:16px; --hp-r-lg:18px; --hp-r-pill:999px;
  --hp-sh-xs:0 1px 2px rgba(14,21,18,.04);
  --hp-sh-sm:0 1px 3px rgba(14,21,18,.06);
  --hp-sh-md:0 4px 12px -2px rgba(14,21,18,.08);
  --hp-sh-lg:0 16px 32px -8px rgba(14,21,18,.18),0 4px 8px -2px rgba(14,21,18,.06);
  --hp-side-w:256px; --hp-top-h:64px; --hp-bottom-h:64px; --hp-max:none;
  /* 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;
  /* motion (hp/components.css "Motion"): a long soft landing for entrances, a small overshoot for pops and lifts,
     the stagger step and its cap, the hover states of cards (tinted line, soft shadow) and tiles (lift shadow) */
  --hp-ease-out:cubic-bezier(.16,1,.3,1); --hp-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --hp-step:50ms; --hp-step-max:450ms;
  --hp-line-hover:color-mix(in srgb,var(--accent) 24%,var(--hp-border));
  --hp-sh-hover:0 8px 20px -10px rgba(14,21,18,.14);
  --hp-sh-lift:0 16px 30px -16px color-mix(in srgb,var(--accent) 50%,transparent),0 4px 10px -6px rgba(14,21,18,.14);
  --hp-glow:color-mix(in srgb,var(--accent) 30%,transparent);   /* the moving glow inside ink cards */
  --hp-skel:#eceeed; --hp-skel-hi:#f8f9f8;                       /* skeleton base and its shimmer band */
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --hp-bg:#0b100e; --hp-surface:#121916; --hp-surface-2:#161e1a; --hp-surface-3:#1c2621; --hp-hover:#1a231f;
  --hp-border:#25302a; --hp-border-strong:#34413a; --hp-divider:#1f2924;
  --hp-text:#eef2f0; --hp-text-2:#c9d2cd; --hp-muted:#9aa6a0; --hp-subtle:#6f7b75;
  --hp-ok:#47cd89;   --hp-ok-soft:rgba(71,205,137,.12);  --hp-ok-line:rgba(71,205,137,.32);
  --hp-warn:#f5b454; --hp-warn-soft:rgba(245,180,84,.12); --hp-warn-line:rgba(245,180,84,.32); --hp-warn-ink:#f9d9a6;
  --hp-bad:#f97066;  --hp-bad-soft:rgba(249,112,102,.12); --hp-bad-line:rgba(249,112,102,.32);
  --hp-info:#a5b4fc; --hp-info-soft:rgba(165,180,252,.12); --hp-info-line:rgba(165,180,252,.32);
  --hp-mute:#c9d2cd; --hp-mute-soft:#1c2621;
  /* ink keeps a hairline so ink cards separate from the dark page; the ink button inverts */
  --hp-ink:#18211d; --hp-ink-2:#24302a; --hp-ink-3:#2e3b34; --hp-ink-line:#2e3b34;
  --hp-on-ink:#ffffff; --hp-on-ink-2:#c9d2cd;
  --hp-btn-ink-bg:#eef2f0; --hp-btn-ink-fg:#0b100e; --hp-btn-ink-hover:#ffffff;
  --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);
  /* dark: shadows barely read on the dark ground, so the lift is mostly an accent glow under the tile */
  --hp-sh-hover:0 10px 24px -12px rgba(0,0,0,.7);
  --hp-sh-lift:0 18px 36px -14px rgba(0,0,0,.75),0 10px 28px -12px color-mix(in srgb,var(--accent) 38%,transparent);
  --hp-glow:color-mix(in srgb,var(--accent) 34%,transparent);
  --hp-skel:#1c2621; --hp-skel-hi:#29352f;
}

/* 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:#f6f7f6; --hp-surface:#ffffff; --hp-surface-2:#f6f7f6; --hp-surface-3:#eef0ef; --hp-hover:#f1f3f2;
  --hp-border:#e4e7e5; --hp-border-strong:#d5dbd8; --hp-divider:#eef0ef;
  --hp-text:#0e1512; --hp-text-2:#3d4842; --hp-muted:#5b6660; --hp-subtle:#8a968f;
  --hp-ok:#067647;   --hp-ok-soft:#ecfdf3;   --hp-ok-line:#abefc6;
  --hp-warn:#b45309; --hp-warn-soft:#fff7ed; --hp-warn-line:#f3d9b8; --hp-warn-ink:#7a4a12;
  --hp-bad:#b42318;  --hp-bad-soft:#fef2f2;  --hp-bad-line:#fecdca;
  --hp-info:#3730a3; --hp-info-soft:#eef2ff; --hp-info-line:#c7d2fe;
  --hp-mute:#3d4842; --hp-mute-soft:#eef0ef;
  --hp-btn-ink-bg:#0e1512; --hp-btn-ink-fg:#ffffff; --hp-btn-ink-hover:#1f2a25;
  --hp-sh-xs:0 1px 2px rgba(14,21,18,.04);
  --hp-sh-sm:0 1px 3px rgba(14,21,18,.06);
  --hp-sh-md:0 4px 12px -2px rgba(14,21,18,.08);
  --hp-sh-lg:0 16px 32px -8px rgba(14,21,18,.18),0 4px 8px -2px rgba(14,21,18,.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%,#e4e7e5);
}
/* on the dark page the white island keeps a hairline edge */
:root[data-theme="dark"] .hp-light{box-shadow:0 0 0 1px #25302a}

/* 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-display); --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);
}