/**
 * PairXCare design system — Tailwind-inspired tokens & primitives (no framework).
 * Loaded before theme.css on app; tokens mirrored in web/css/style.css for marketing.
 */

:root {
  /* Typography */
  --pxc-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pxc-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --pxc-text-xs: 0.75rem;
  --pxc-text-sm: 0.875rem;
  --pxc-text-base: 1.0625rem;
  --pxc-text-lg: 1.125rem;
  --pxc-text-xl: 1.25rem;
  --pxc-text-2xl: 1.5rem;
  --pxc-text-3xl: 1.875rem;
  --pxc-leading-tight: 1.25;
  --pxc-leading-snug: 1.375;
  --pxc-leading-normal: 1.5;
  --pxc-leading-relaxed: 1.625;
  --pxc-tracking-tighter: -0.04em;
  --pxc-tracking-tight: -0.025em;
  --pxc-tracking-snug: -0.015em;
  --pxc-tracking-wide: 0.05em;
  --pxc-tracking-wider: 0.1em;

  /* Easing (Tailwind standard curves) */
  --pxc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pxc-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --pxc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --pxc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Spacing (4px base, Tailwind scale) */
  --pxc-space-1: 0.25rem;
  --pxc-space-2: 0.5rem;
  --pxc-space-3: 0.75rem;
  --pxc-space-4: 1rem;
  --pxc-space-5: 1.25rem;
  --pxc-space-6: 1.5rem;
  --pxc-space-8: 2rem;
  --pxc-space-10: 2.5rem;
  --pxc-space-12: 3rem;
  --pxc-space-16: 4rem;

  /* Layout */
  --pxc-container: 72rem;
  --pxc-container-wide: 97.5rem;

  /* Radius */
  --pxc-radius-sm: 0.375rem;
  --pxc-radius-md: 0.5rem;
  --pxc-radius-lg: 0.75rem;
  --pxc-radius-xl: 1rem;
  --pxc-radius-2xl: 1.25rem;
  --pxc-radius-3xl: 1.5rem;
  --pxc-radius-full: 9999px;

  /* Brand (aligned with marketing site) */
  --pxc-brand: #0d9488;
  --pxc-brand-hover: #0f766e;
  --pxc-brand-muted: rgba(13, 148, 136, 0.12);
  --pxc-brand-ring: rgba(13, 148, 136, 0.35);
  --pxc-gold: #c4a35a;
  --pxc-gold-muted: rgba(196, 163, 90, 0.14);

  /* Light clinical surfaces — paper background, white cards, teal actions */
  --pxc-bg: #e7efec;
  --pxc-bg-elevated: #ffffff;
  --pxc-surface: #ffffff;
  --pxc-surface-muted: #f3f7f5;
  --pxc-surface-hover: #e7f3f0;
  --pxc-panel: #f7fbf9;
  --pxc-panel-subtle: rgba(15, 118, 110, 0.08);
  --pxc-card: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
  --pxc-accent: #0f766e;
  --pxc-accent-soft: rgba(15, 118, 110, 0.1);
  --pxc-teal: var(--pxc-brand);
  --pxc-teal-deep: #0f766e;
  --pxc-teal-light: #0f766e;
  --pxc-info: #0f766e;
  --pxc-info-bg: rgba(13, 148, 136, 0.1);
  --pxc-inset: #e6eeeb;
  --pxc-input-bg: #ffffff;
  --pxc-strip-bg: #f4f8f6;
  --pxc-text: #0f172a;
  --pxc-text-secondary: #334155;
  --pxc-muted: #475569;
  --pxc-muted-soft: #64748b;
  --pxc-border: #475569;
  --pxc-border-strong: #1e293b;
  --pxc-ring: rgba(13, 148, 136, 0.45);
  --pxc-ring-offset: #ffffff;
  --pxc-bg-top: #f7fbf9;
  --pxc-bg-bottom: #e3ece8;
  --pxc-header-bg: rgba(255, 255, 255, 0.94);
  --pxc-brand-from: #0f172a;
  --pxc-nav-bg: #ffffff;
  --pxc-nav-ink: #0f766e;
  --pxc-seg-bg: #e7eeeb;
  --pxc-emr-bg: linear-gradient(145deg, #ffffff 0%, #f4f8f6 100%);
  --pxc-ghost-bg: #ffffff;
  --pxc-ghost-hover: #f0f7f5;
  --pxc-stage-bg: #f1f5f9;
  --pxc-veil: rgba(255, 255, 255, 0.82);
  --pxc-signout: #b91c1c;
  --pxc-signout-hover: #991b1b;
  --pxc-signout-border: rgba(185, 28, 28, 0.35);
  --pxc-signout-hover-bg: rgba(254, 226, 226, 0.85);
  color-scheme: light;

  /* Elevation — crisp multi-layer Tailwind-style */
  --pxc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --pxc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
  --pxc-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.25);
  --pxc-shadow-md: 0 6px 20px -4px rgba(0, 0, 0, 0.4), 0 2px 8px -2px rgba(0, 0, 0, 0.25);
  --pxc-shadow-lg: 0 12px 36px -8px rgba(0, 0, 0, 0.5), 0 4px 16px -4px rgba(0, 0, 0, 0.3);
  --pxc-shadow-brand: 0 4px 16px -2px rgba(13, 148, 136, 0.4), 0 1px 0 rgba(255,255,255,0.06) inset;
  --pxc-radius: var(--pxc-radius-xl);
}

html.pxc-theme-dark {
  --pxc-bg: #10182a;
  --pxc-bg-elevated: #172338;
  --pxc-surface: #1c2b42;
  --pxc-surface-muted: rgba(28, 43, 66, 0.78);
  --pxc-surface-hover: #243652;
  --pxc-panel: #1a2940;
  --pxc-panel-subtle: rgba(71, 96, 128, 0.38);
  --pxc-card: linear-gradient(165deg, #22344d 0%, #152238 55%, #1a2c44 100%);
  --pxc-accent: #5eead4;
  --pxc-accent-soft: rgba(94, 234, 212, 0.16);
  --pxc-teal-light: #5eead4;
  --pxc-info: #5eead4;
  --pxc-info-bg: rgba(13, 148, 136, 0.22);
  --pxc-inset: #0e1726;
  --pxc-input-bg: #0e1726;
  --pxc-strip-bg: #152033;
  --pxc-text: #f8fafc;
  --pxc-text-secondary: #d7e0ea;
  --pxc-muted: #b7c4d4;
  --pxc-muted-soft: #8ea0b5;
  --pxc-border: rgba(198, 214, 232, 0.18);
  --pxc-border-strong: rgba(198, 214, 232, 0.32);
  --pxc-ring-offset: #10182a;
  --pxc-bg-top: #152033;
  --pxc-bg-bottom: #0d1524;
  --pxc-header-bg: rgba(16, 24, 42, 0.92);
  --pxc-brand-from: #f8fafc;
  --pxc-nav-bg: #1c2b42;
  --pxc-nav-ink: #5eead4;
  --pxc-seg-bg: #0e1726;
  --pxc-emr-bg: linear-gradient(145deg, #1c2b42 0%, #152033 100%);
  --pxc-ghost-bg: #1c2b42;
  --pxc-ghost-hover: #243652;
  --pxc-stage-bg: #0e1726;
  --pxc-veil: rgba(8, 15, 29, 0.78);
  --pxc-signout: #fecaca;
  --pxc-signout-hover: #fee2e2;
  --pxc-signout-border: rgba(248, 113, 113, 0.45);
  --pxc-signout-hover-bg: rgba(127, 29, 29, 0.35);
  color-scheme: dark;
}

/* Focus ring utility (Tailwind ring-2 ring-offset-2 pattern) */
.pxc-focus-ring:focus-visible {
  outline: 2px solid var(--pxc-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15);
}

/* ============================================================
   Tailwind-inspired utility layer
   All utilities use --pxc-* tokens; safe to compose with
   existing .pxc-* component classes.
   ============================================================ */

/* --- Display --- */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.block         { display: block; }
.inline-block  { display: inline-block; }
.grid          { display: grid; }
.hidden        { display: none; }

/* --- Flex direction --- */
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1 1 0%; }
.flex-none     { flex: none; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow     { flex-grow: 1; }

/* --- Grid columns --- */
.grid-cols-1   { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4   { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Alignment --- */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between{ justify-content: space-between; }
.self-start     { align-self: flex-start; }
.self-center    { align-self: center; }
.self-end       { align-self: flex-end; }
.self-stretch   { align-self: stretch; }

/* --- Gap --- */
.gap-0  { gap: 0; }
.gap-1  { gap: var(--pxc-space-1, 0.25rem); }
.gap-2  { gap: var(--pxc-space-2, 0.5rem); }
.gap-3  { gap: var(--pxc-space-3, 0.75rem); }
.gap-4  { gap: var(--pxc-space-4, 1rem); }
.gap-5  { gap: var(--pxc-space-5, 1.25rem); }
.gap-6  { gap: var(--pxc-space-6, 1.5rem); }
.gap-8  { gap: var(--pxc-space-8, 2rem); }
.gap-10 { gap: var(--pxc-space-10, 2.5rem); }
.gap-x-2 { column-gap: var(--pxc-space-2, 0.5rem); }
.gap-x-4 { column-gap: var(--pxc-space-4, 1rem); }
.gap-y-2 { row-gap: var(--pxc-space-2, 0.5rem); }
.gap-y-4 { row-gap: var(--pxc-space-4, 1rem); }

/* --- Padding --- */
.p-0  { padding: 0; }
.p-2  { padding: var(--pxc-space-2, 0.5rem); }
.p-3  { padding: var(--pxc-space-3, 0.75rem); }
.p-4  { padding: var(--pxc-space-4, 1rem); }
.p-5  { padding: var(--pxc-space-5, 1.25rem); }
.p-6  { padding: var(--pxc-space-6, 1.5rem); }
.p-8  { padding: var(--pxc-space-8, 2rem); }

.px-2 { padding-left: var(--pxc-space-2, 0.5rem);  padding-right: var(--pxc-space-2, 0.5rem); }
.px-3 { padding-left: var(--pxc-space-3, 0.75rem); padding-right: var(--pxc-space-3, 0.75rem); }
.px-4 { padding-left: var(--pxc-space-4, 1rem);    padding-right: var(--pxc-space-4, 1rem); }
.px-5 { padding-left: var(--pxc-space-5, 1.25rem); padding-right: var(--pxc-space-5, 1.25rem); }
.px-6 { padding-left: var(--pxc-space-6, 1.5rem);  padding-right: var(--pxc-space-6, 1.5rem); }

.py-1  { padding-top: var(--pxc-space-1, 0.25rem);  padding-bottom: var(--pxc-space-1, 0.25rem); }
.py-2  { padding-top: var(--pxc-space-2, 0.5rem);   padding-bottom: var(--pxc-space-2, 0.5rem); }
.py-3  { padding-top: var(--pxc-space-3, 0.75rem);  padding-bottom: var(--pxc-space-3, 0.75rem); }
.py-4  { padding-top: var(--pxc-space-4, 1rem);     padding-bottom: var(--pxc-space-4, 1rem); }
.py-6  { padding-top: var(--pxc-space-6, 1.5rem);   padding-bottom: var(--pxc-space-6, 1.5rem); }
.py-8  { padding-top: var(--pxc-space-8, 2rem);     padding-bottom: var(--pxc-space-8, 2rem); }
.py-10 { padding-top: var(--pxc-space-10, 2.5rem);  padding-bottom: var(--pxc-space-10, 2.5rem); }

.pt-2 { padding-top: var(--pxc-space-2, 0.5rem); }
.pt-4 { padding-top: var(--pxc-space-4, 1rem); }
.pt-6 { padding-top: var(--pxc-space-6, 1.5rem); }
.pb-2 { padding-bottom: var(--pxc-space-2, 0.5rem); }
.pb-4 { padding-bottom: var(--pxc-space-4, 1rem); }
.pb-6 { padding-bottom: var(--pxc-space-6, 1.5rem); }

/* --- Margin --- */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--pxc-space-1, 0.25rem); }
.mt-2 { margin-top: var(--pxc-space-2, 0.5rem); }
.mt-3 { margin-top: var(--pxc-space-3, 0.75rem); }
.mt-4 { margin-top: var(--pxc-space-4, 1rem); }
.mt-6 { margin-top: var(--pxc-space-6, 1.5rem); }
.mt-8 { margin-top: var(--pxc-space-8, 2rem); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--pxc-space-1, 0.25rem); }
.mb-2 { margin-bottom: var(--pxc-space-2, 0.5rem); }
.mb-3 { margin-bottom: var(--pxc-space-3, 0.75rem); }
.mb-4 { margin-bottom: var(--pxc-space-4, 1rem); }
.mb-6 { margin-bottom: var(--pxc-space-6, 1.5rem); }
.mb-8 { margin-bottom: var(--pxc-space-8, 2rem); }
.mr-2 { margin-right: var(--pxc-space-2, 0.5rem); }
.mr-4 { margin-right: var(--pxc-space-4, 1rem); }
.ml-auto  { margin-left: auto; }
.mr-auto  { margin-right: auto; }
.mx-auto  { margin-inline: auto; }

/* --- Sizing --- */
.w-full  { width: 100%; }
.w-auto  { width: auto; }
.h-full  { height: 100%; }
.min-h-0 { min-height: 0; }
.min-w-0 { min-width: 0; }
.max-w-xs  { max-width: 20rem; }
.max-w-sm  { max-width: 24rem; }
.max-w-md  { max-width: 28rem; }
.max-w-lg  { max-width: 32rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-full{ max-width: 100%; }

/* --- Typography --- */
.font-sans    { font-family: var(--pxc-font-sans); }
.font-display { font-family: var(--pxc-font-display); }

.text-xs   { font-size: var(--pxc-text-xs,   0.75rem); }
.text-sm   { font-size: var(--pxc-text-sm,   0.875rem); }
.text-base { font-size: var(--pxc-text-base, 1rem); }
.text-lg   { font-size: var(--pxc-text-lg,   1.125rem); }
.text-xl   { font-size: var(--pxc-text-xl,   1.25rem); }
.text-2xl  { font-size: var(--pxc-text-2xl,  1.5rem); }
.text-3xl  { font-size: var(--pxc-text-3xl,  1.875rem); }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.leading-tight   { line-height: var(--pxc-leading-tight,   1.25); }
.leading-snug    { line-height: var(--pxc-leading-snug,    1.375); }
.leading-normal  { line-height: var(--pxc-leading-normal,  1.5); }
.leading-relaxed { line-height: var(--pxc-leading-relaxed, 1.625); }

.tracking-tighter { letter-spacing: var(--pxc-tracking-tighter, -0.04em); }
.tracking-tight   { letter-spacing: var(--pxc-tracking-tight,   -0.025em); }
.tracking-snug    { letter-spacing: var(--pxc-tracking-snug,    -0.015em); }
.tracking-wide    { letter-spacing: var(--pxc-tracking-wide,    0.05em); }
.tracking-wider   { letter-spacing: var(--pxc-tracking-wider,   0.1em); }

.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.normal-case { text-transform: none; }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.break-words    { overflow-wrap: break-word; }

/* --- Text colors --- */
.text-primary   { color: var(--pxc-text); }
.text-secondary { color: var(--pxc-text-secondary); }
.text-muted     { color: var(--pxc-muted); }
.text-soft      { color: var(--pxc-muted-soft); }
.text-brand     { color: var(--pxc-brand); }
.text-accent    { color: var(--pxc-accent); }
.text-white     { color: #fff; }
.text-success   { color: #34d399; }
.text-warning   { color: #fbbf24; }
.text-danger    { color: #f87171; }

/* --- Backgrounds --- */
.bg-transparent { background: transparent; }
.bg-surface     { background: var(--pxc-surface); }
.bg-panel       { background: var(--pxc-panel); }
.bg-elevated    { background: var(--pxc-bg-elevated); }
.bg-brand       { background: var(--pxc-brand); }
.bg-brand-muted { background: var(--pxc-brand-muted); }
.bg-gold-muted  { background: var(--pxc-gold-muted); }

/* --- Border --- */
.border       { border: 1px solid var(--pxc-border); }
.border-strong{ border: 1px solid var(--pxc-border-strong); }
.border-0     { border: none; }
.border-t     { border-top: 1px solid var(--pxc-border); }
.border-b     { border-bottom: 1px solid var(--pxc-border); }
.border-l     { border-left: 1px solid var(--pxc-border); }
.border-r     { border-right: 1px solid var(--pxc-border); }
.border-brand { border-color: var(--pxc-brand); }

/* --- Border radius --- */
.rounded      { border-radius: var(--pxc-radius-sm,  0.375rem); }
.rounded-md   { border-radius: var(--pxc-radius-md,  0.5rem); }
.rounded-lg   { border-radius: var(--pxc-radius-lg,  0.75rem); }
.rounded-xl   { border-radius: var(--pxc-radius-xl,  1rem); }
.rounded-2xl  { border-radius: var(--pxc-radius-2xl, 1.25rem); }
.rounded-3xl  { border-radius: var(--pxc-radius-3xl, 1.5rem); }
.rounded-full { border-radius: var(--pxc-radius-full, 9999px); }

/* --- Shadow --- */
.shadow-none { box-shadow: none; }
.shadow-xs   { box-shadow: var(--pxc-shadow-xs); }
.shadow-sm   { box-shadow: var(--pxc-shadow-sm); }
.shadow      { box-shadow: var(--pxc-shadow); }
.shadow-md   { box-shadow: var(--pxc-shadow-md); }
.shadow-lg   { box-shadow: var(--pxc-shadow-lg); }
.shadow-brand{ box-shadow: var(--pxc-shadow-brand); }

/* --- Overflow / visibility --- */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Position --- */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.z-10     { z-index: 10; }
.z-20     { z-index: 20; }
.z-50     { z-index: 50; }

/* --- Cursor / interaction --- */
.cursor-pointer    { cursor: pointer; }
.cursor-default    { cursor: default; }
.cursor-not-allowed{ cursor: not-allowed; }
.select-none       { user-select: none; }
.pointer-events-none { pointer-events: none; }

/* --- Opacity --- */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* --- Transition --- */
.transition          { transition: all 0.15s var(--pxc-ease); }
.transition-colors   { transition: color 0.15s var(--pxc-ease), background-color 0.15s var(--pxc-ease), border-color 0.15s var(--pxc-ease); }
.transition-transform{ transition: transform 0.15s var(--pxc-ease); }
.transition-opacity  { transition: opacity 0.15s var(--pxc-ease); }
.duration-150        { transition-duration: 150ms; }
.duration-200        { transition-duration: 200ms; }
.ease-out            { transition-timing-function: var(--pxc-ease-out); }
.ease-spring         { transition-timing-function: var(--pxc-ease-spring); }

/* --- Responsive breakpoints --- */
@media (min-width: 640px) {
  .sm\:flex-row    { flex-direction: row; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:hidden      { display: none; }
  .sm\:block       { display: block; }
}

@media (min-width: 768px) {
  .md\:flex-row    { flex-direction: row; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:p-8         { padding: var(--pxc-space-8, 2rem); }
  .md\:px-8        { padding-left: var(--pxc-space-8, 2rem); padding-right: var(--pxc-space-8, 2rem); }
  .md\:hidden      { display: none; }
  .md\:block       { display: block; }
  .md\:text-xl     { font-size: var(--pxc-text-xl, 1.25rem); }
  .md\:text-2xl    { font-size: var(--pxc-text-2xl, 1.5rem); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:flex-row    { flex-direction: row; }
  .lg\:hidden      { display: none; }
  .lg\:block       { display: block; }
}