/**
 * Landing → App token bridge
 * Maps variables.css (landing / production) to dashboard, design system, and modals.
 */
@import url('./variables.css?v=20261015-type-canon-v1');
@import url('./components/nv-checkbox.css?v=20260820-cosmos-row-states');
@import url('./components/nv-select.css?v=20261015-focus-canon-v1');
@import url('./components/nv-tabs.css?v=20261002-segment-light');
@import url('./components/dash-kpi-summary.css?v=20261015-type-canon-v1');
@import url('./components/dash-onboarding.css?v=20261015-type-canon-v1');

:root {
  /* Menu items show keyboard focus with the hover fill only: no ring inside menus (both themes). */
  --dash-menu-focus-ring: transparent;
  /* ── Canvas & surfaces (landing dark) ── */
  --dash-bg: var(--color-bg-canvas, #020203);
  --dash-page: var(--color-bg-canvas, #020203);
  --dash-bg-app: var(--color-bg-primary, #1a1a1a);
  --dash-surface: var(--color-surface-muted, rgba(238, 238, 238, 0.06));
  --dash-surface-hover: var(--color-surface-muted-hover, rgba(238, 238, 238, 0.1));
  --dash-surface-active: var(--color-surface-muted-active, var(--dash-surface-hover));
  /* Islands — same muted surface as notification rows */
  --dash-card: var(--dash-surface);
  --dash-elevated: var(--dash-surface-hover);
  --dash-page-island-bg: var(--dash-card);
  --dash-input-bg: var(--color-input-bg, var(--dash-surface));

  /* ── Borders ── */
  --dash-border: var(--color-border-secondary, rgba(238, 238, 238, 0.08));
  --dash-border-hover: var(--color-border-hover, rgba(238, 238, 238, 0.14));
  --dash-border-strong: var(--color-border-strong, rgba(238, 238, 238, 0.12));
  --dash-sidebar-branch: color-mix(in srgb, #888888 26%, #020203);

  /* Popovers (profile / New menus) — cosmic wells, not warm charcoal slabs */
  --dash-popover-bg: var(--color-bg-popover, var(--color-bg-secondary, #121212));
  --dash-popover-bg-solid: var(--color-bg-popover, var(--color-bg-secondary, #121212));
  --dash-popover-row-bg: var(--dash-surface);
  --dash-popover-row-hover: var(--dash-surface-hover);
  --dash-dropdown-item-hover: var(--dash-popover-row-hover);
  --dash-popover-head-bg: var(--dash-surface);
  --dash-popover-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  --dash-account-popover-surface: linear-gradient(155deg, rgb(15 15 18 / 0.95), rgb(7 8 11 / 0.91));
  --dash-account-popover-edge: linear-gradient(145deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.045) 44%, rgb(143 168 255 / 0.13) 100%);
  --dash-account-popover-shadow: 0 24px 72px rgb(0 0 0 / 0.62), inset 0 1px 0 rgb(255 255 255 / 0.035);
  --dash-account-popover-filter: blur(30px) saturate(0.92);
  --dash-dropdown-surface: var(--dash-account-popover-surface);
  --dash-dropdown-edge: var(--dash-account-popover-edge);
  --dash-dropdown-shadow: var(--dash-account-popover-shadow);
  --dash-dropdown-filter: var(--dash-account-popover-filter);
  --dash-dropdown-radius: 24px;
  --dash-account-identity-bg: rgb(255 255 255 / 0.075);
  --dash-popover-z: 1600;
  --dash-tooltip-bg: var(--dash-popover-bg);
  --dash-tooltip-shadow: var(--dash-popover-shadow);

  /* ── Text ── */
  --dash-text: var(--color-text-primary, #eeeeee);
  --dash-text-muted: var(--color-text-secondary, rgba(238, 238, 238, 0.7));
  --dash-text-subtle: var(--color-text-tertiary, rgba(238, 238, 238, 0.5));
  --dash-muted: var(--dash-text-subtle);
  --dash-icon: color-mix(in srgb, var(--color-cosmos-mist) 62%, #eeeeee);
  --dash-profile-avatar-bg: radial-gradient(circle at 30% 20%, rgb(255 255 255 / .07) 0%, rgb(255 255 255 / .03) 55%, transparent 100%);
  --dash-profile-avatar-fg: #e4e4e8;
  --dash-profile-avatar-ring: linear-gradient(145deg, rgb(255 255 255 / .2) 0%, transparent 50%, rgb(255 255 255 / .08) 100%);

  /* ── Primary CTA (landing: white pill) ── */
  --dash-accent: var(--color-button-primary, #eeeeee);
  --dash-accent-text: var(--color-button-primary-text, #0a0a0a);
  --dash-accent-hover: var(--color-button-primary-hover, #f0f0f0);
  --dash-accent-active: var(--color-button-primary-active, #e0e0e0);
  --dash-accent-focus: var(--color-button-primary-focus, rgba(238, 238, 238, 0.5));

  /* Secondary / highlight — cosmos lilac, not the white CTA pill */
  --dash-accent-muted: var(--color-accent-primary, #d4d4d4);
  --dash-accent-soft: var(--dash-surface);
  --dash-accent-soft-hover: var(--dash-surface-hover);

  /* Highlight alias — selected chips, today, badges. CTA stays --dash-accent. */
  --dash-purple: var(--color-cosmos-accent, var(--dash-accent-muted));
  --dash-purple-soft: color-mix(in srgb, var(--color-cosmos-accent) 18%, transparent);
  --dash-purple-glow: transparent;

  /* ── Switch (nv-switch) ── */
  --nv-switch-width: 44px;
  --nv-switch-height: 24px;
  --nv-switch-thumb-size: 18px;
  --nv-switch-track-off: var(--color-switch-bg, #272727);
  --nv-switch-thumb: var(--color-switch-slider, #eeeeee);
  --nv-switch-track-on: var(--dash-accent);
  --nv-switch-thumb-on: var(--dash-accent-text);

  /* ── Status (cosmic aurora / solar / stellar) ── */
  --dash-green: var(--color-success, #6eb8a0);
  --dash-green-soft: var(--color-success-soft, rgba(110, 184, 160, 0.12));
  --dash-red: var(--color-error, #ef4444);
  --dash-red-soft: var(--color-error-soft, rgba(239, 68, 68, 0.12));
  --dash-orange: var(--color-warning, #c9a06a);
  --dash-orange-soft: var(--color-warning-soft, rgba(201, 160, 106, 0.12));
  --dash-blue: var(--color-info, #b4b4b4);
  --dash-blue-soft: var(--color-info-soft, rgba(180, 180, 180, 0.12));

  /* ── Radius (landing — pill buttons, soft islands) ── */
  --dash-radius-card: var(--dash-island-radius, 32px);
  --dash-radius-btn: var(--radius-full, 9999px);
  --dash-radius-input: var(--control-radius-input, var(--radius-full, 9999px));
  --dash-radius-island: var(--radius-3xl, 24px);
  --dash-island-border: none;

  /* ── Layout ── */
  --dash-sidebar-w: 248px;
  --dash-gap: var(--spacing-2xl, 24px);
  --dash-transition: var(--transition-fast, 150ms ease);
  --dash-tab-bar-height: 72px;
  --dash-mobile-page-x: var(--spacing-lg, 16px);
  --dash-page-x: 32px;
  --dash-content-pad-x: var(--dash-page-x);
  --dash-aside-width: 376px;
  --dash-main-max-width: 1472px;
  --dash-sidebar-outer-gutter: 0px;
  --dash-content-y: 32px;
  --dash-header-y: 20px;
  --dash-mobile-nav-gutter: 0px;
  --dash-content-pad-bottom: 56px;

  /* ── Charts (shared app + DS) ── */
  --dash-chart-blue: #3b82f6;
  --dash-chart-green: #22c55e;
  --dash-chart-orange: #f97316;
  --dash-chart-red: #ef4444;
  --dash-chart-violet: #8b5cf6;
  --dash-chart-teal: #14b8a6;
  --dash-spending-fill: var(--dash-chart-blue);
  --chart-line-primary: var(--dash-chart-blue);
  --chart-line-width: 2;
  --chart-area-from: color-mix(in srgb, var(--dash-chart-blue) 16%, transparent);
  --chart-area-to: color-mix(in srgb, var(--dash-chart-blue) 0%, transparent);
  --chart-dot-fill: var(--dash-chart-blue);
  --chart-dot-stroke: var(--dash-card);

  /* ── Shadows (flat islands — match notification rows) ── */
  --dash-shadow: none;
  --dash-shadow-hover: none;

  /* ── Design system aliases ── */
  --dsf-purple: var(--dash-purple);
  --dsf-text: var(--dash-text);
  --dsf-secondary: var(--dash-text-muted);
  --dsf-muted: var(--dash-text-subtle);
  --dsf-surface: var(--dash-card);
  --dsf-elevated: var(--dash-elevated);
  --dsf-border: var(--dash-border);
  --dsf-radius: var(--dash-radius-island);
  --dsf-radius-btn: var(--dash-radius-btn);
  --dsf-transition: var(--dash-transition);

  /* ── Command palette ── */
  --cmd-purple: var(--dash-accent-muted);
  --cmd-purple-soft: var(--dash-popover-row-bg);
  --cmd-bg: var(--color-overlay, rgba(0, 0, 0, 0.7));
  --cmd-surface: var(--dash-popover-bg-solid);
  --cmd-card: var(--dash-popover-row-bg);
  --cmd-border: var(--dash-border-strong);
  --cmd-text: var(--dash-text);
  --cmd-muted: var(--dash-text-muted);
  --cmd-subtle: var(--dash-text-subtle);
  --cmd-success: var(--dash-green);
  --cmd-warning: var(--dash-orange);
  --cmd-danger: var(--dash-red);
  --cmd-well: var(--dash-surface-hover);
  --cmd-row-hover: var(--dash-surface-hover);
  --cmd-footer-bg: rgb(0 0 0 / 0.22);

  /* ── Modal / flow wizards (shared prefix) ── */
  --flow-accent: var(--dash-accent);
  --flow-accent-text: var(--dash-accent-text);
  --flow-surface: var(--dash-card);
  --flow-elevated: var(--dash-elevated);
  --flow-border: var(--dash-border);
  --flow-text: var(--dash-text);
  --flow-muted: var(--dash-text-muted);

  /* ── AI workspace ── */
  --aiw-bg: var(--dash-bg);
  --aiw-sidebar: var(--dash-elevated);
  --aiw-panel: var(--dash-elevated);
  --aiw-card: var(--dash-card);
  --aiw-elevated: var(--dash-elevated);
  --aiw-border: var(--dash-border);
  --aiw-primary: var(--dash-accent);
  --aiw-primary-text: var(--dash-accent-text);
  --aiw-text: var(--dash-text);
  --aiw-secondary: var(--dash-text-muted);
  --aiw-muted: var(--dash-text-subtle);
  --aiw-success: var(--dash-green);
  --aiw-warning: var(--dash-orange);
  --aiw-danger: var(--dash-red);
  --aiw-info: var(--dash-blue);
  --aiw-code: var(--dash-elevated);
}

/* Product light: page-local --*-text/#f4f4f5 and white borders must follow DS tokens. */
html.light-theme,
html.light,
html.dash-landing-preview.light-theme,
html.dash-landing-preview.light {
  /* Text levels come from the typography canon (variables.css → components/nv-typography.css). */
  --dash-text: var(--color-text-primary);
  --dash-text-muted: var(--color-text-secondary);
  --dash-text-subtle: var(--color-text-tertiary);
  --dash-icon: #4d4d4d;
  --dash-profile-avatar-bg: radial-gradient(circle at 30% 20%, transparent 0%, rgb(0 0 0 / .03) 55%, rgb(0 0 0 / .07) 100%);
  --dash-profile-avatar-fg: #1c1c1e;
  --dash-profile-avatar-ring: linear-gradient(145deg, rgb(0 0 0 / .16) 0%, transparent 50%, rgb(0 0 0 / .08) 100%);
  --nv-switch-track-off: var(--color-well-active);
  --nv-switch-thumb: #ffffff;
  --nv-switch-thumb-shadow: none;
  --cmd-purple: var(--color-text-primary);
  --cmd-purple-soft: var(--color-well);
  --cmd-text: var(--color-text-primary);
  --cmd-muted: var(--color-text-secondary);
  --cmd-subtle: var(--color-text-tertiary);
  --cmd-well: var(--color-well);
  --cmd-row-hover: var(--color-well);
  --cmd-footer-bg: #ffffff;
  --cmd-surface: #ffffff;
  --cmd-card: var(--color-well);
  --cmd-bg: rgb(7 7 7 / 0.28);
  --plan-surface: #ffffff;
  --plan-surface-soft: var(--color-well);
  --plan-surface-strong: var(--color-well-hover);
  --bud-selected-surface: var(--color-well);
  --bud-selected-edge: var(--color-island-border);
  --dash-popover-bg: #ffffff;
  --dash-popover-bg-solid: #ffffff;
  --dash-popover-row-bg: var(--color-surface-muted);
  --dash-popover-row-hover: var(--color-well);
  --dash-dropdown-item-hover: var(--dash-popover-row-hover);
  --dash-popover-head-bg: var(--color-surface-muted);
  --dash-popover-shadow: 0 1px 2px rgb(7 7 7 / 0.04), 0 16px 40px rgb(7 7 7 / 0.1);
  --dash-account-popover-surface: linear-gradient(#ffffff, #ffffff);
  --dash-account-popover-edge: color-mix(in srgb, #5e5e5e 11%, #ffffff);
  --dash-account-popover-shadow: var(--dash-popover-shadow);
  --dash-account-popover-filter: none;
  --dash-account-popover-inset: var(--color-well);
  --dash-account-identity-bg: var(--dash-account-popover-inset);
  --dash-dropdown-radius: 20px;
  --dash-menu-row-radius: 12px;
  --dash-alert-shadow: 0 1px 2px rgb(7 7 7 / 0.04), 0 8px 20px rgb(7 7 7 / 0.055);
  --dash-border-hover: var(--color-border-hover);
  --dash-border-strong: var(--color-border-strong);
  --chart-area-from: color-mix(in srgb, var(--dash-chart-blue) 12%, transparent);
  --chart-area-to: color-mix(in srgb, var(--dash-chart-blue) 0%, transparent);
  --dash-border: var(--color-border-secondary);
  --dash-sidebar-branch: color-mix(in srgb, #5e5e5e 22%, #ffffff);
  --dash-island-border: none;
  --dash-orange: var(--color-warning);
  --dash-orange-soft: var(--color-warning-soft);
  --dash-green: var(--color-success);
  --dash-green-soft: var(--color-success-soft);
  --dash-red: var(--color-error);
  --dash-red-soft: var(--color-error-soft);
  --dash-blue: var(--color-info);
  --dash-blue-soft: var(--color-info-soft);
  --dash-accent-soft: var(--color-neutral-soft);
  --dash-purple-soft: var(--color-neutral-soft);
  --acct-purple-soft: var(--color-neutral-soft);
  --tx-purple-soft: var(--color-neutral-soft);
  --txd-purple-soft: var(--color-neutral-soft);
  --inv-purple-soft: var(--color-neutral-soft);
  --invd-purple-soft: var(--color-neutral-soft);
  --pay-purple-soft: var(--color-neutral-soft);
  --payd-purple-soft: var(--color-neutral-soft);
  --ins-purple-soft: var(--color-neutral-soft);
  --ins-blue-soft: var(--color-info-soft);
  --inc-purple-soft: var(--color-neutral-soft);
  --tax-purple-soft: var(--color-neutral-soft);
  --acc-purple-soft: var(--color-neutral-soft);
  --accd-purple-soft: var(--color-neutral-soft);
  --bud-purple-soft: var(--color-neutral-soft);
  --ntc-purple-soft: var(--color-neutral-soft);
  --ntf-purple-soft: var(--color-neutral-soft);
  --hlp-purple-soft: var(--color-neutral-soft);
  --int-purple-soft: var(--color-neutral-soft);
  --aud-purple-soft: var(--color-neutral-soft);
  --sec-purple-soft: var(--color-neutral-soft);
  --api-purple-soft: var(--color-neutral-soft);
  --rpt-purple-soft: var(--color-neutral-soft);
  --team-purple-soft: var(--color-neutral-soft);
  --prof-purple-soft: var(--color-neutral-soft);
  --bill-purple-soft: var(--color-neutral-soft);
  --set-purple-soft: var(--color-neutral-soft);
  --plan-purple-soft: var(--color-neutral-soft);
  --es-purple-soft: var(--color-neutral-soft);
  --tx-orange: var(--color-warning);
  --tx-orange-soft: var(--dash-orange-soft);
  --inv-orange: var(--color-warning);
  --inv-orange-soft: var(--dash-orange-soft);
  --pay-orange: var(--color-warning);
  --pay-orange-soft: var(--dash-orange-soft);
  --acct-orange: var(--color-warning);
  --acct-orange-soft: var(--dash-orange-soft);
  --acct-green: var(--color-success);
  --acct-card-elevated: var(--color-well);
  --bud-orange: var(--color-warning);
  --bud-orange-soft: var(--dash-orange-soft);
  --inc-orange: var(--color-warning);
  --inc-orange-soft: var(--dash-orange-soft);
  --tax-orange: var(--color-warning);
  --tax-orange-soft: var(--dash-orange-soft);
  --acc-yellow: var(--color-warning);
  --acc-yellow-soft: var(--dash-orange-soft);
  --ins-amber: var(--color-warning);
  --ins-amber-soft: var(--dash-orange-soft);
  --team-amber: var(--color-warning);
  --team-amber-soft: var(--dash-orange-soft);
  --rpt-success: var(--color-success);
  --rpt-warning: var(--color-warning);
  --api-success: var(--color-success);
  --api-warning: var(--color-warning);
  --aud-success: var(--color-success);
  --aud-warning: var(--color-warning);
  --sec-success: var(--color-success);
  --sec-warning: var(--color-warning);
  --int-success: var(--color-success);
  --int-warning: var(--color-warning);
  --hlp-success: var(--color-success);
  --hlp-warning: var(--color-warning);
  --set-danger-soft: var(--color-error-soft);
  --bill-danger-soft: var(--color-error-soft);
  --dash-bg: var(--color-bg-canvas, #ffffff);
  --dash-page: var(--color-bg-canvas, #ffffff);
  --dash-bg-app: var(--color-bg-primary, #ffffff);
  --dash-card: #ffffff;
  --dash-elevated: #ffffff;
  --dash-page-island-bg: #ffffff;
  --dash-input-bg: var(--color-surface-muted);
  --nv-surface-solid: #ffffff;
  --inv-surface-solid: #ffffff;
  --tx-text: var(--dash-text);
  --txd-text: var(--dash-text);
  --inv-text: var(--dash-text);
  --invd-text: var(--dash-text);
  --acct-text: var(--dash-text);
  --pay-text: var(--dash-text);
  --payd-text: var(--dash-text);
  --bill-text: var(--dash-text);
  --acc-text: var(--dash-text);
  --accd-text: var(--dash-text);
  --ins-text: var(--dash-text);
  --inc-text: var(--dash-text);
  --tax-text: var(--dash-text);
  --rpt-text: var(--dash-text);
  --bud-text: var(--dash-text);
  --aud-text: var(--dash-text);
  --set-text: var(--dash-text);
  --prof-text: var(--dash-text);
  --plan-text: var(--dash-text);
  --team-text: var(--dash-text);
  --ntf-text: var(--dash-text);
  --hlp-text: var(--dash-text);
  --api-text: var(--dash-text);
  --sec-text: var(--dash-text);
  --int-text: var(--dash-text);
  --es-text: var(--dash-text);
  --ob-text: var(--dash-text);
  --mnt-text: var(--dash-text);
  --cpay-text: var(--dash-text);
  --cinv-text: var(--dash-text);
  --cxfr-text: var(--dash-text);
  --cxch-text: var(--dash-text);
  --cbnk-text: var(--dash-text);
  --cwlt-text: var(--dash-text);
  --cint-text: var(--dash-text);
  --capi-text: var(--dash-text);
  --tinv-text: var(--dash-text);
  --cexpr-text: var(--dash-text);
  --cappr-text: var(--dash-text);
  --cuns-text: var(--dash-text);
  --csuc-text: var(--dash-text);
  --cses-text: var(--dash-text);
  --cerr-text: var(--dash-text);
  --cdel-text: var(--dash-text);
  --tx-border: var(--dash-border);
  --txd-border: var(--dash-border);
  --inv-border: var(--dash-border);
  --invd-border: var(--dash-border);
  --acct-border: var(--dash-border);
  --pay-border: var(--dash-border);
  --payd-border: var(--dash-border);
  --bill-border: var(--dash-border);
  --acc-border: var(--dash-border);
  --accd-border: var(--dash-border);
  --ins-border: var(--dash-border);
  --inc-border: var(--dash-border);
  --tax-border: var(--dash-border);
  --rpt-border: var(--dash-border);
  --bud-border: var(--dash-border);
  --aud-border: var(--dash-border);
  --set-border: var(--dash-border);
  --prof-border: var(--dash-border);
  --plan-border: var(--dash-border);
  --team-border: var(--dash-border);
  --ntf-border: var(--dash-border);
  --ntc-border: var(--dash-border);
  --hlp-border: var(--dash-border);
  --api-border: var(--dash-border);
  --sec-border: var(--dash-border);
  --int-border: var(--dash-border);
  --es-border: var(--dash-border);
  --ob-border: var(--dash-border);
  --mnt-border: var(--dash-border);
  --cpay-border: var(--dash-border);
  --cinv-border: var(--dash-border);
  --cxfr-border: var(--dash-border);
  --cxch-border: var(--dash-border);
  --cbnk-border: var(--dash-border);
  --cwlt-border: var(--dash-border);
  --cint-border: var(--dash-border);
  --capi-border: var(--dash-border);
  --tinv-border: var(--dash-border);
  --cexpr-border: var(--dash-border);
  --cappr-border: var(--dash-border);
  --cuns-border: var(--dash-border);
  --csuc-border: var(--dash-border);
  --cses-border: var(--dash-border);
  --cerr-border: var(--dash-border);
  --cdel-border: var(--dash-border);
}

html.dash-landing-preview.light-theme .dash-pro.is-video-ready .dash-pro__video,
html.dash-landing-preview.light .dash-pro.is-video-ready .dash-pro__video {
  opacity: 0;
  mix-blend-mode: normal;
}

/* Chart cards set white-alpha grids for dark; remap on white islands. */
html.light-theme :is(.bud-chart-card, .inc-chart-card, .tax-chart-card, .acct-chart-card, .ins-chart-card),
html.light :is(.bud-chart-card, .inc-chart-card, .tax-chart-card, .acct-chart-card, .ins-chart-card),
html.dash-landing-preview.light-theme :is(.bud-chart-card, .inc-chart-card, .tax-chart-card, .acct-chart-card, .ins-chart-card),
html.dash-landing-preview.light :is(.bud-chart-card, .inc-chart-card, .tax-chart-card, .acct-chart-card, .ins-chart-card) {
  --chart-grid: color-mix(in srgb, var(--color-cosmos-mist) 14%, #ffffff);
  --chart-axis: var(--color-text-tertiary);
  --chart-crosshair: var(--color-border-strong);
  --chart-area-from: color-mix(in srgb, var(--dash-chart-blue) 12%, transparent);
  --chart-area-to: color-mix(in srgb, var(--dash-chart-blue) 0%, transparent);
}