/**
 * Locnexa Shared Design Tokens (P0)
 * Canonical source of truth — R0 premium palette (#355CFF).
 * Do not add role-specific overrides here; use lx-design-tokens-aliases.css.
 */
:root {
  /* ── Brand colors ── */
  --lx-primary: #355cff;
  --lx-blue: var(--lx-primary);
  --lx-blue-mid: #2a4be0;
  --lx-blue-deep: #1f38b8;
  --lx-blue-soft: #ebf0ff;

  /* ── Surfaces ── */
  --lx-bg: #f8fafc;
  --lx-surface: #ffffff;
  --lx-surface-2: #f1f5f9;
  --lx-card: var(--lx-surface);

  /* ── Text ── */
  --lx-text: #111827;
  --lx-muted: #6b7280;
  --lx-subtle: #9ca3af;
  --lx-on-primary: #ffffff;

  /* ── Borders ── */
  --lx-border: #e5e7eb;

  /* ── Semantic colors ── */
  --lx-success: #18c37e;
  --lx-green: var(--lx-success);
  --lx-warning: #f4b740;
  --lx-yellow: var(--lx-warning);
  --lx-error: #ef4444;
  --lx-red: var(--lx-error);
  --lx-orange: #f97316;
  --lx-purple: #8b5cf6;

  /* ── Sidebar gradient ── */
  --lx-sidebar-gradient-start: var(--lx-primary);
  --lx-sidebar-gradient-mid: var(--lx-blue-mid);
  --lx-sidebar-gradient-end: var(--lx-blue-deep);

  /* ── Legacy radius aliases (V3 shell) ── */
  --lx-radius: 18px;
  --lx-radius-lg: 20px;

  /* ── Radius scale ── */
  --lx-radius-sm: 10px;
  --lx-radius-md: 16px;
  --lx-radius-xl: 20px;
  --lx-radius-2xl: 24px;
  --lx-radius-sheet: 28px;
  --lx-radius-pill: 999px;

  /* ── Spacing scale (8pt grid) ── */
  --lx-space-1: 8px;
  --lx-space-1_5: 12px;
  --lx-space-2: 16px;
  --lx-space-2_5: 20px;
  --lx-space-3: 24px;
  --lx-space-4: 32px;
  --lx-space-5: 40px;
  --lx-space-6: 48px;

  /* ── Shadows (soft elevation) ── */
  --lx-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
  --lx-shadow-md: 0 4px 12px rgba(17, 24, 39, 0.06);
  --lx-shadow-lg: 0 8px 24px rgba(17, 24, 39, 0.08);
  --lx-shadow-dialog: var(--lx-shadow-lg);
  --lx-shadow: var(--lx-shadow-sm);
  --lx-shadow-lg-legacy: var(--lx-shadow-md);

  /* ── Typography — canonical size scale (Shopify / Stripe / Notion) ── */
  --lx-fs-32: 32px;
  --lx-fs-28: 28px;
  --lx-fs-24: 24px;
  --lx-fs-20: 20px;
  --lx-fs-18: 18px;
  --lx-fs-16: 16px;
  --lx-fs-15: 15px;
  --lx-fs-14: 14px;
  --lx-fs-13: 13px;
  --lx-fs-12: 12px;

  /* ── Typography — role weights ── */
  --lx-fw-title: 700;
  --lx-fw-section: 600;
  --lx-fw-card: 600;
  --lx-fw-body: 400;
  --lx-fw-caption: 400;
  --lx-fw-badge: 500;
  --lx-fw-button: 600;

  /* ── Typography — role line-heights ── */
  --lx-lh-title: 1.2;
  --lx-lh-section: 1.25;
  --lx-lh-card: 1.35;
  --lx-lh-body: 1.5;
  --lx-lh-caption: 1.4;
  --lx-lh-button: 1.2;

  /* ── Typography — role letter-spacing ── */
  --lx-track-title: -0.02em;
  --lx-track-section: -0.015em;
  --lx-track-body: 0;
  --lx-track-caption: 0.01em;
  --lx-track-button: 0;

  /* ── Typography — font stacks ── */
  --lx-font-family: "Inter", "Inter Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lx-font-family-fallback: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* ── Typography — hierarchy (R0) ── */
  --lx-type-display-size: 42px;
  --lx-type-display-weight: 800;
  --lx-type-display-leading: 1.1;
  --lx-type-display-tracking: -0.03em;

  --lx-type-heading-size: 24px;
  --lx-type-heading-weight: var(--lx-fw-title);
  --lx-type-heading-leading: 1.25;
  --lx-type-heading-tracking: -0.02em;

  --lx-type-title-size: 18px;
  --lx-type-title-weight: 600;
  --lx-type-title-leading: 1.35;

  --lx-type-subtitle-size: 15px;
  --lx-type-subtitle-weight: 500;
  --lx-type-subtitle-leading: 1.45;

  --lx-type-small-size: 11px;
  --lx-type-small-weight: 500;
  --lx-type-small-leading: 1.4;

  /* ── Typography — scale (V3.2) ── */
  --lx-type-caption-size: 12px;

  --lx-type-label-size: 12px;
  --lx-type-label-weight: 500;
  --lx-type-label-tracking: 0.02em;

  --lx-type-body-sm-size: 13px;
  --lx-type-body-sm-leading: 1.55;

  --lx-type-body-size: 14px;
  --lx-type-body-weight: 400;
  --lx-type-body-leading: 1.6;

  --lx-type-card-size: 15px;
  --lx-type-card-weight: var(--lx-fw-card);
  --lx-type-card-leading: 1.35;

  --lx-type-nav-group-size: 12px;
  --lx-type-nav-group-weight: 600;

  --lx-type-nav-size: 15px;
  --lx-type-nav-weight: 500;
  --lx-type-nav-active-weight: 600;

  --lx-type-section-size: 20px;
  --lx-type-section-weight: var(--lx-fw-section);
  --lx-type-section-tracking: var(--lx-track-section);
  --lx-type-section-leading: var(--lx-lh-section);

  --lx-type-page-size: var(--lx-type-display-size);
  --lx-type-page-weight: var(--lx-type-display-weight);
  --lx-type-page-tracking: var(--lx-type-display-tracking);
  --lx-type-page-leading: var(--lx-type-display-leading);

  --lx-type-kpi-value-size: 30px;
  --lx-type-kpi-label-size: 11px;

  --lx-type-metric-size: 28px;
  --lx-type-metric-weight: 700;
  --lx-type-metric-tracking: -0.03em;

  --lx-type-messages-title-size: 16px;
  --lx-type-messages-title-weight: 700;

  --lx-type-search-placeholder-size: 14px;
  --lx-type-search-placeholder-weight: 500;
  --lx-type-search-input-size: 15px;
  --lx-type-search-input-weight: 500;

  --lx-type-dialog-title-size: 26px;
  --lx-type-dialog-title-weight: 700;
  --lx-type-dialog-title-tracking: -0.025em;
  --lx-type-dialog-subtitle-size: 14px;
  --lx-type-dialog-subtitle-weight: 400;

  --lx-type-button-size: 13px;
  --lx-type-button-weight: var(--lx-fw-button);

  /* ── Dialog layout ── */
  --lx-dialog-padding-x: 24px;
  --lx-dialog-padding-y: 20px;
  --lx-dialog-head-gap: 12px;
  --lx-dialog-body-gap: 16px;
  --lx-dialog-actions-gap: 8px;
  --lx-dialog-w-default: min(520px, 96vw);
  --lx-dialog-w-wide: min(720px, 96vw);
  --lx-dialog-w-booking: min(960px, 96vw);
  --lx-dialog-w-media: min(1080px, 96vw);
  --lx-dialog-max-h: min(90vh, 920px);

  /* ── Layout ── */
  --lx-sidebar-w: 280px;
  --lx-sidebar-w-collapsed: 78px;
  --lx-messages-rail-w: 372px;
  --lx-appbar-h: 68px;

  /* ── Breakpoints (reference tokens) ── */
  --lx-bp-mobile-max: 767px;
  --lx-bp-tablet-min: 768px;
  --lx-bp-tablet-max: 980px;
  --lx-bp-desktop-min: 981px;
  --lx-bp-compact-max: 1240px;
  --lx-bp-wide-max: 1440px;

  /*
    Provider Profile Desktop Visual System (LX_PP_DESKTOP_V1)
    Shared image/spacing language for Provider Portal + Client Portal desktops.
    Mobile body.m-app cover/avatar rules remain the frozen SoT — do not mirror
    these tokens into mobile stylesheets.
  */
  --lx-pp-content-max: 1080px; /* same ceiling family as --lx-dialog-w-media */
  --lx-pp-cover-ratio: 16 / 9; /* same framing language as frozen mobile cover */
  --lx-pp-cover-min-h: calc(var(--lx-space-6) * 5); /* 240px — above strip territory */
  --lx-pp-cover-max-h: min(42vh, calc(var(--lx-space-6) * 7)); /* ≤336px — cover must not dominate */
  --lx-pp-cover-radius: var(--lx-radius-2xl);
  --lx-pp-cover-focal: center top; /* preserve head/subject like mobile */
  --lx-pp-avatar-own: calc(var(--lx-space-4) * 4); /* 128px — manage identity */
  --lx-pp-avatar-public: calc(var(--lx-space-4) * 3); /* 96px — discovery identity */
  --lx-pp-gap: var(--lx-space-2);
  --lx-pp-gap-lg: var(--lx-space-3);
  --lx-pp-pad-x: var(--lx-space-3);
  --lx-pp-pad-y: var(--lx-space-3);

  /* ── Motion ── */
  --lx-duration-fast: 0.15s;
  --lx-duration: 0.18s;
  --lx-duration-slow: 0.25s;
  --lx-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ── */
  --lx-z-sticky: 100;
  --lx-z-dropdown: 4000;
  --lx-z-dialog: 5000;
  --lx-z-back-top: 2200;
}

/* V3.2 responsive typography */
@media (max-width: 1440px) {
  :root {
    --lx-type-display-size: 36px;
    --lx-type-metric-size: 26px;
  }
}

@media (max-width: 1100px) {
  :root {
    --lx-type-display-size: 32px;
    --lx-type-section-size: 18px;
  }
}