/* ScaleLounge portals V2: design tokens.
 *
 * Every rule here (and in every pv-*.css file) is scoped under html.pv-app, so nothing leaks into
 * the public site. The portal pages put class="pv-app" on <html>; no other page does.
 *
 * Theme: html.pv-app[data-pv-theme="dark"] switches the semantic tokens. The attribute is set by
 * the inline boot snippet in <head> (see pv-theme.js) before any CSS paints, so there is no flash.
 *
 * Measured contrast (WCAG 2.2, sRGB). server/test/portal-v2-foundation.test.js recomputes these
 * from this file, so a value change that breaks a ratio fails CI.
 *   LIGHT  text #15171A on #FFFFFF ............ 17.96:1
 *          secondary #4A4F56 on #FFFFFF ....... 8.25:1
 *          metadata #5D636A on #FFFFFF ........ 6.07:1
 *          champagne ink #7E663A on #FFFFFF ... 5.46:1  (champagne as text on white)
 *          champagne #B79A63 on #FFFFFF ....... 2.69:1  NEVER text or a meaningful line on white
 *          control border #8A9099 on #FFFFFF .. 3.22:1
 *   DARK   white on #17191C ................... 17.61:1
 *          white on raised #23262A ............ 15.19:1
 *          secondary #D9DDE3 on #23262A ....... 11.14:1
 *          metadata #B9C2CD on #23262A ........ 8.44:1
 *          champagne #B79A63 on #17191C ....... 6.56:1  (eyebrows, ring, focus ring on dark)
 *          champagne #B79A63 on #23262A ....... 5.65:1
 *   BOTH   charcoal #15171A on champagne ...... 6.68:1  (the primary action on charcoal panels)
 */

@font-face {
  font-family: 'pv-dmsans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../../fonts/dmsans-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'pv-instrument';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../../fonts/instrumentsans-variable.woff2') format('woff2');
}

/* ---- Shared constants and the LIGHT theme --------------------------------------------------- */
html.pv-app {
  color-scheme: light;

  /* type */
  --pv-font-heading: 'pv-dmsans', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pv-font-body: 'pv-instrument', 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pv-fs-display: 32px;
  --pv-fs-title: 28px;
  --pv-fs-card-title: 20px;
  --pv-fs-body: 16px;
  --pv-fs-support: 15px;
  --pv-fs-meta: 14px;
  --pv-fs-label: 12px;

  /* shape and space */
  --pv-radius-xs: 4px;
  --pv-radius-sm: 6px;
  --pv-radius: 8px;
  --pv-radius-card: 14px;
  --pv-sidebar-w: 264px;
  --pv-header-h: 68px;
  --pv-gap: 20px;
  --pv-pad: 32px;
  --pv-touch: 44px;
  --pv-ease: cubic-bezier(.2, .7, .2, 1);

  /* brand constants (identical in both themes) */
  --pv-champagne: #B79A63;
  --pv-champagne-hover: #C4A974;
  --pv-champagne-ink: #7E663A;
  --pv-charcoal: #17191C;
  --pv-charcoal-raised: #23262A;
  --pv-ink: #15171A;
  --pv-white: #FFFFFF;

  /* surfaces */
  --pv-page: #FFFFFF;
  --pv-surface: #FFFFFF;
  --pv-surface-muted: #F2F5F6;
  --pv-surface-hover: #F7F8F9;
  --pv-surface-pop: #FFFFFF;

  /* text */
  --pv-text: #15171A;
  --pv-text-secondary: #4A4F56;
  --pv-text-meta: #5D636A;
  --pv-accent-text: #7E663A;
  --pv-link: #15171A;

  /* lines */
  --pv-border: #DFE2E7;
  --pv-border-subtle: #E8EAEE;
  --pv-divider: #D9DDE3;
  --pv-control-border: #8A9099;

  /* focus: a charcoal ring on light, separated from the control by a page-coloured gap */
  --pv-focus-ring: #15171A;
  --pv-focus-gap: #FFFFFF;
  /* The page's own ring, which no panel re-declares: a panel that is itself the focus target (the
     Home lead tile is a link) has its ring drawn outside it, on the page (pv-base.css). */
  --pv-page-focus-ring: #15171A;

  /* buttons */
  --pv-btn-primary-bg: #15171A;
  --pv-btn-primary-text: #FFFFFF;
  --pv-btn-primary-hover: #2E3237;
  --pv-btn-secondary-border: #8A9099;
  --pv-btn-secondary-text: #15171A;
  --pv-btn-secondary-hover: #F2F5F6;

  /* statuses: always a text label too, never colour alone */
  --pv-status-neutral-bg: #F2F5F6;
  --pv-status-neutral-text: #4A4F56;
  --pv-status-attention-bg: #FAF0D9;
  --pv-status-attention-text: #754F0D;
  --pv-status-success-bg: #E6F2EA;
  --pv-status-success-text: #1E6B3C;
  --pv-status-danger-bg: #FBEAE8;
  --pv-status-danger-text: #A3281B;
  --pv-status-info-bg: #E9F0F8;
  --pv-status-info-text: #22528A;
  --pv-invalid: #A3281B;

  /* charts */
  --pv-chart-line: #4F5C6F;
  --pv-chart-fill: #F2F3F5;
  --pv-chart-grid: #E5E8EC;
  --pv-chart-axis: #5D636A;
  --pv-chart-bar: #4F5C6F;
  --pv-chart-point: #4F5C6F;
  --pv-chart-compare: #7E663A;
  --pv-ring-track: #E5E8EC;
  --pv-ring-value: #7E663A;

  /* loading */
  --pv-skeleton: #ECEFF2;
  --pv-skeleton-shine: #F6F7F9;

  /* overlays and depth */
  --pv-overlay: rgba(17, 19, 22, .52);
  --pv-shadow-card: 0 1px 2px rgba(21, 23, 26, .04), 0 2px 8px rgba(21, 23, 26, .035);
  --pv-shadow-pop: 0 16px 40px rgba(21, 23, 26, .16), 0 2px 8px rgba(21, 23, 26, .08);

  /* the DEMO / PRE-LAUNCH badge */
  --pv-badge-border: #D9DDE3;
  --pv-badge-text: #4A4F56;

  /* avatar */
  --pv-avatar-bg: #E9EBEE;
  --pv-avatar-text: #15171A;

  /* sidebar: charcoal in both themes */
  --pv-side-bg: #17191C;
  --pv-side-border: #17191C;
  --pv-side-text: #F5F5F7;
  --pv-side-label: #B9BFCB;
  --pv-side-meta: #CCD0D5;
  --pv-side-divider: #33373E;
  --pv-side-hover: #24272B;
  --pv-side-active-bg: #FFFFFF;
  --pv-side-active-text: #15171A;
  --pv-side-edge: #B79A63;
  --pv-side-badge-bg: #B79A63;
  --pv-side-badge-text: #15171A;
  --pv-side-focus: #B79A63;
}

/* ---- DARK theme ----------------------------------------------------------------------------- */
html.pv-app[data-pv-theme="dark"] {
  color-scheme: dark;

  --pv-page: #17191C;
  --pv-surface: #23262A;
  --pv-surface-muted: #2D3238;
  --pv-surface-hover: #2A2D32;
  --pv-surface-pop: #23262A;

  --pv-text: #FFFFFF;
  --pv-text-secondary: #D9DDE3;
  --pv-text-meta: #B9C2CD;
  --pv-accent-text: #B79A63;
  --pv-link: #FFFFFF;

  --pv-border: #3A3E45;
  --pv-border-subtle: #33373E;
  --pv-divider: #3A3E45;
  --pv-control-border: #848B96;

  --pv-focus-ring: #B79A63;
  --pv-focus-gap: #17191C;
  --pv-page-focus-ring: #B79A63;

  --pv-btn-primary-bg: #FFFFFF;
  --pv-btn-primary-text: #15171A;
  --pv-btn-primary-hover: #E9EBEE;
  --pv-btn-secondary-border: #848B96;
  --pv-btn-secondary-text: #FFFFFF;
  --pv-btn-secondary-hover: #2D3238;

  --pv-status-neutral-bg: #2D3238;
  --pv-status-neutral-text: #D9DDE3;
  --pv-status-attention-bg: #453825;
  --pv-status-attention-text: #F1D08B;
  --pv-status-success-bg: #1D3A29;
  --pv-status-success-text: #9AD8B0;
  --pv-status-danger-bg: #4A2522;
  --pv-status-danger-text: #F4ADA4;
  --pv-status-info-bg: #1F3147;
  --pv-status-info-text: #A9C9EE;
  --pv-invalid: #F4ADA4;

  --pv-chart-line: #B79A63;
  --pv-chart-fill: #2E2E2E;
  --pv-chart-grid: #3A3E45;
  --pv-chart-axis: #B9C2CD;
  --pv-chart-bar: #B79A63;
  --pv-chart-point: #B79A63;
  --pv-chart-compare: #8FA7C4;
  --pv-ring-track: #3E4249;
  --pv-ring-value: #B79A63;

  --pv-skeleton: #2D3238;
  --pv-skeleton-shine: #363B42;

  --pv-overlay: rgba(0, 0, 0, .62);
  /* none in dark: never list it beside another shadow (box-shadow: inset ..., var(--pv-shadow-card)),
     because a list holding none is invalid and the whole declaration is dropped. Draw an accent
     edge with a pseudo-element instead. */
  --pv-shadow-card: none;
  --pv-shadow-pop: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);

  --pv-badge-border: #535965;
  --pv-badge-text: #D9DDE3;

  --pv-avatar-bg: #E9EBEE;
  --pv-avatar-text: #15171A;

  --pv-side-bg: #111215;
  --pv-side-border: #2B3037;
  --pv-side-hover: #1E2024;
  --pv-side-divider: #2B3037;
}

/* ---- Contrasting panels ----------------------------------------------------------------------
 * A panel re-declares the semantic tokens for everything inside it, so every component (text,
 * buttons, pills, charts, the ring, focus) reads correctly without per-component overrides.
 * Every --pv-chart-* token is re-declared in every panel (the CI test holds this): a chart mark
 * that fell back to the page's value would be slate on charcoal (2.24:1) or champagne on white
 * (2.69:1).
 *
 *   .pv-tone-charcoal  always charcoal (#17191C): champagne primary action, champagne focus ring
 *   .pv-tone-raised    always raised charcoal (#23262A): the AI Visibility feature card in light
 *   .pv-tone-white     always white: charcoal primary action, charcoal focus ring
 *   .pv-tone-champagne a soft champagne tint (Online Presence "YOUR NEXT STEP", Brand Presence PDF page 3):
 *                      #F8F3E7 with a charcoal primary action on the light page, a warm charcoal #2A2620 with
 *                      the white primary action on the dark page. Champagne ink #7E663A is 4.64:1 on its
 *                      muted tint (#F3ECDC), so accent text stays the ink, never raw champagne, on the light tint.
 *
 * The priority panel (.pv-priority) and the lead metric (.pv-lead) are charcoal in light and
 * WHITE in dark, as in V2 (page 4 and page 5). Everything else follows the page theme.
 * .pv-tone-status is a status panel (Connections, page 16): charcoal on the light page, and on the
 * dark page an ordinary raised card (never white: V2 keeps white for the dark Home priority panel).
 * .pv-lead-wide is a lead metric that only takes the lead look from 600px up (the phone Home keeps
 * every tile plain under the charcoal hero). */

html.pv-app .pv-tone-charcoal,
html.pv-app:not([data-pv-theme="dark"]) .pv-priority,
html.pv-app:not([data-pv-theme="dark"]) .pv-lead,
html.pv-app:not([data-pv-theme="dark"]) .pv-tone-status {
  color-scheme: dark;
  --pv-surface: #17191C;
  --pv-surface-muted: #23262A;
  --pv-surface-hover: #202327;
  --pv-text: #FFFFFF;
  --pv-text-secondary: #D9DDE3;
  --pv-text-meta: #B9C2CD;
  --pv-accent-text: #B79A63;
  --pv-link: #FFFFFF;
  --pv-border: #17191C;
  --pv-border-subtle: #33373E;
  --pv-divider: #3A3E45;
  --pv-control-border: #848B96;
  --pv-focus-ring: #B79A63;
  --pv-focus-gap: #17191C;
  --pv-btn-primary-bg: #B79A63;
  --pv-btn-primary-text: #15171A;
  --pv-btn-primary-hover: #C4A974;
  --pv-btn-secondary-border: #848B96;
  --pv-btn-secondary-text: #FFFFFF;
  --pv-btn-secondary-hover: #23262A;
  --pv-status-neutral-bg: #2D3238;
  --pv-status-neutral-text: #D9DDE3;
  --pv-status-attention-bg: #453825;
  --pv-status-attention-text: #F1D08B;
  --pv-status-success-bg: #1D3A29;
  --pv-status-success-text: #9AD8B0;
  --pv-status-danger-bg: #4A2522;
  --pv-status-danger-text: #F4ADA4;
  --pv-status-info-bg: #1F3147;
  --pv-status-info-text: #A9C9EE;
  --pv-invalid: #F4ADA4;
  --pv-chart-line: #B79A63;
  --pv-chart-fill: #2A2926;
  --pv-chart-grid: #3A3E45;
  --pv-chart-axis: #B9C2CD;
  --pv-chart-bar: #B79A63;
  --pv-chart-point: #B79A63;
  --pv-chart-compare: #8FA7C4;
  --pv-ring-track: #3E4249;
  --pv-ring-value: #B79A63;
  --pv-skeleton: #2D3238;
  --pv-skeleton-shine: #363B42;
}

html.pv-app .pv-tone-raised,
html.pv-app:not([data-pv-theme="dark"]) .pv-feature {
  color-scheme: dark;
  --pv-surface: #23262A;
  --pv-surface-muted: #2D3238;
  --pv-surface-hover: #2A2D32;
  --pv-text: #FFFFFF;
  --pv-text-secondary: #D9DDE3;
  --pv-text-meta: #B9C2CD;
  --pv-accent-text: #B79A63;
  --pv-link: #FFFFFF;
  --pv-border: #23262A;
  --pv-border-subtle: #33373E;
  --pv-divider: #3A3E45;
  --pv-control-border: #848B96;
  --pv-focus-ring: #B79A63;
  --pv-focus-gap: #23262A;
  --pv-btn-primary-bg: #B79A63;
  --pv-btn-primary-text: #15171A;
  --pv-btn-primary-hover: #C4A974;
  --pv-btn-secondary-border: #848B96;
  --pv-btn-secondary-text: #FFFFFF;
  --pv-btn-secondary-hover: #2D3238;
  --pv-status-neutral-bg: #2D3238;
  --pv-status-neutral-text: #D9DDE3;
  --pv-status-attention-bg: #453825;
  --pv-status-attention-text: #F1D08B;
  --pv-status-success-bg: #1D3A29;
  --pv-status-success-text: #9AD8B0;
  --pv-status-danger-bg: #4A2522;
  --pv-status-danger-text: #F4ADA4;
  --pv-status-info-bg: #1F3147;
  --pv-status-info-text: #A9C9EE;
  --pv-invalid: #F4ADA4;
  --pv-chart-line: #B79A63;
  --pv-chart-fill: #2E2E2E;
  --pv-chart-grid: #3A3E45;
  --pv-chart-axis: #B9C2CD;
  --pv-chart-bar: #B79A63;
  --pv-chart-point: #B79A63;
  --pv-chart-compare: #8FA7C4;
  --pv-ring-track: #3E4249;
  --pv-ring-value: #B79A63;
  --pv-skeleton: #2D3238;
  --pv-skeleton-shine: #363B42;
}

html.pv-app .pv-tone-white,
html.pv-app[data-pv-theme="dark"] .pv-priority,
html.pv-app[data-pv-theme="dark"] .pv-lead {
  color-scheme: light;
  --pv-surface: #FFFFFF;
  --pv-surface-muted: #F2F5F6;
  --pv-surface-hover: #F7F8F9;
  --pv-text: #15171A;
  --pv-text-secondary: #4A4F56;
  --pv-text-meta: #5D636A;
  --pv-accent-text: #7E663A;
  --pv-link: #15171A;
  --pv-border: #FFFFFF;
  --pv-border-subtle: #E8EAEE;
  --pv-divider: #D9DDE3;
  --pv-control-border: #8A9099;
  --pv-focus-ring: #15171A;
  --pv-focus-gap: #FFFFFF;
  --pv-btn-primary-bg: #15171A;
  --pv-btn-primary-text: #FFFFFF;
  --pv-btn-primary-hover: #2E3237;
  --pv-btn-secondary-border: #8A9099;
  --pv-btn-secondary-text: #15171A;
  --pv-btn-secondary-hover: #F2F5F6;
  --pv-status-neutral-bg: #F2F5F6;
  --pv-status-neutral-text: #4A4F56;
  --pv-status-attention-bg: #FAF0D9;
  --pv-status-attention-text: #754F0D;
  --pv-status-success-bg: #E6F2EA;
  --pv-status-success-text: #1E6B3C;
  --pv-status-danger-bg: #FBEAE8;
  --pv-status-danger-text: #A3281B;
  --pv-status-info-bg: #E9F0F8;
  --pv-status-info-text: #22528A;
  --pv-invalid: #A3281B;
  --pv-chart-line: #4F5C6F;
  --pv-chart-fill: #F2F3F5;
  --pv-chart-grid: #E5E8EC;
  --pv-chart-axis: #5D636A;
  --pv-chart-bar: #4F5C6F;
  --pv-chart-point: #4F5C6F;
  --pv-chart-compare: #7E663A;
  --pv-ring-track: #E5E8EC;
  --pv-ring-value: #7E663A;
  --pv-skeleton: #ECEFF2;
  --pv-skeleton-shine: #F6F7F9;
}

/* The champagne tint (light page), then the same panel on the dark page. Both blocks declare the same full set,
   so the dark one replaces every token of the light one. */
html.pv-app .pv-tone-champagne {
  color-scheme: light;
  --pv-surface: #F8F3E7;
  --pv-surface-muted: #F3ECDC;
  --pv-surface-hover: #F4EEE1;
  --pv-text: #15171A;
  --pv-text-secondary: #4A4F56;
  --pv-text-meta: #5D636A;
  --pv-accent-text: #7E663A;
  --pv-link: #15171A;
  --pv-border: #E6DCC4;
  --pv-border-subtle: #EADFC9;
  --pv-divider: #E0D4BA;
  --pv-control-border: #80868F;
  --pv-focus-ring: #15171A;
  --pv-focus-gap: #F8F3E7;
  --pv-btn-primary-bg: #15171A;
  --pv-btn-primary-text: #FFFFFF;
  --pv-btn-primary-hover: #2E3237;
  --pv-btn-secondary-border: #80868F;
  --pv-btn-secondary-text: #15171A;
  --pv-btn-secondary-hover: #F3ECDC;
  --pv-status-neutral-bg: #F2F5F6;
  --pv-status-neutral-text: #4A4F56;
  --pv-status-attention-bg: #FAF0D9;
  --pv-status-attention-text: #754F0D;
  --pv-status-success-bg: #E6F2EA;
  --pv-status-success-text: #1E6B3C;
  --pv-status-danger-bg: #FBEAE8;
  --pv-status-danger-text: #A3281B;
  --pv-status-info-bg: #E9F0F8;
  --pv-status-info-text: #22528A;
  --pv-invalid: #A3281B;
  --pv-chart-line: #7E663A;
  --pv-chart-fill: #F3ECDC;
  --pv-chart-grid: #E6DCC4;
  --pv-chart-axis: #5D636A;
  --pv-chart-bar: #7E663A;
  --pv-chart-point: #7E663A;
  --pv-chart-compare: #4F5C6F;
  --pv-ring-track: #E9E0CC;
  --pv-ring-value: #7E663A;
  --pv-skeleton: #EFE7D6;
  --pv-skeleton-shine: #F6F0E3;
}

html.pv-app[data-pv-theme="dark"] .pv-tone-champagne {
  color-scheme: dark;
  --pv-surface: #2A2620;
  --pv-surface-muted: #35302A;
  --pv-surface-hover: #302B24;
  --pv-text: #FFFFFF;
  --pv-text-secondary: #D9DDE3;
  --pv-text-meta: #B9C2CD;
  --pv-accent-text: #B79A63;
  --pv-link: #FFFFFF;
  --pv-border: #4A4234;
  --pv-border-subtle: #3E382F;
  --pv-divider: #4A4234;
  --pv-control-border: #848B96;
  --pv-focus-ring: #B79A63;
  --pv-focus-gap: #2A2620;
  --pv-btn-primary-bg: #FFFFFF;
  --pv-btn-primary-text: #15171A;
  --pv-btn-primary-hover: #E9EBEE;
  --pv-btn-secondary-border: #848B96;
  --pv-btn-secondary-text: #FFFFFF;
  --pv-btn-secondary-hover: #35302A;
  --pv-status-neutral-bg: #2D3238;
  --pv-status-neutral-text: #D9DDE3;
  --pv-status-attention-bg: #453825;
  --pv-status-attention-text: #F1D08B;
  --pv-status-success-bg: #1D3A29;
  --pv-status-success-text: #9AD8B0;
  --pv-status-danger-bg: #4A2522;
  --pv-status-danger-text: #F4ADA4;
  --pv-status-info-bg: #1F3147;
  --pv-status-info-text: #A9C9EE;
  --pv-invalid: #F4ADA4;
  --pv-chart-line: #B79A63;
  --pv-chart-fill: #332E27;
  --pv-chart-grid: #4A4234;
  --pv-chart-axis: #B9C2CD;
  --pv-chart-bar: #B79A63;
  --pv-chart-point: #B79A63;
  --pv-chart-compare: #8FA7C4;
  --pv-ring-track: #4A4438;
  --pv-ring-value: #B79A63;
  --pv-skeleton: #35302A;
  --pv-skeleton-shine: #3E382F;
}

/* Below 600px a .pv-lead-wide tile is a plain tile: it re-takes the page theme's tile tokens,
   the ring and the accent included (a ring that kept the charcoal panel's champagne would be
   2.69:1 on white). */
@media (max-width: 599px) {
  html.pv-app:not([data-pv-theme="dark"]) .pv-lead.pv-lead-wide {
    color-scheme: light;
    --pv-surface: #FFFFFF;
    --pv-text: #15171A;
    --pv-text-secondary: #4A4F56;
    --pv-text-meta: #5D636A;
    --pv-accent-text: #7E663A;
    --pv-border: #DFE2E7;
    --pv-focus-ring: #15171A;
    --pv-focus-gap: #FFFFFF;
    --pv-ring-track: #E5E8EC;
    --pv-ring-value: #7E663A;
  }
  html.pv-app[data-pv-theme="dark"] .pv-lead.pv-lead-wide {
    color-scheme: dark;
    --pv-surface: #23262A;
    --pv-text: #FFFFFF;
    --pv-text-secondary: #D9DDE3;
    --pv-text-meta: #B9C2CD;
    --pv-accent-text: #B79A63;
    --pv-border: #3A3E45;
    --pv-focus-ring: #B79A63;
    --pv-focus-gap: #23262A;
    --pv-ring-track: #3E4249;
    --pv-ring-value: #B79A63;
  }
}