/* ============================================================
   Uniphi Health — Design Tokens
   Source of truth for color and typography across the brand.
   Mirrors the production marketing site (site/index.html).
   ============================================================ */

/* DM Sans — local variable fonts (opsz + wght axes). */
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('./fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-stretch: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('./fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('./fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-stretch: normal;
  font-style: italic;
  font-display: swap;
}

/* Inter — local variable fonts (opsz + wght axes). */
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('./fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-stretch: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('./fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-stretch: normal;
  font-style: italic;
  font-display: swap;
}

/* JetBrains Mono still from Google Fonts (no local file provided). */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -- Brand color palette --------------------------------- */
  --uph-primary:        #1a365d; /* Deep navy — primary brand */
  --uph-primary-medium: #2c5282; /* Hover / secondary surface */
  --uph-primary-light:  #3182ce; /* Focus rings, illustrative */
  --uph-accent:         #0891b2; /* Teal — labels, highlights */

  /* -- Text ------------------------------------------------ */
  --uph-text-primary:   #1e293b; /* Body & headings */
  --uph-text-secondary: #475569; /* Supporting copy */
  --uph-text-tertiary:  #64748b; /* Metadata, labels */
  --uph-text-on-dark:   #ffffff;
  --uph-text-on-dark-muted: rgba(255, 255, 255, 0.75);

  /* -- Surfaces -------------------------------------------- */
  --uph-surface:           #ffffff;
  --uph-surface-secondary: #f8fafc;
  --uph-surface-tertiary:  #f1f5f9;
  --uph-surface-inverse:   #1e293b;

  /* -- Borders --------------------------------------------- */
  --uph-border:       #e2e8f0;
  --uph-border-light: #f1f5f9;

  /* -- Semantic (medical / clinical) ----------------------- */
  --uph-status-info:    #3182ce; /* In progress, neutral notice */
  --uph-status-success: #0891b2; /* Verified, complete (uses brand teal) */
  --uph-status-warning: #b45309; /* Awaiting review */
  --uph-status-danger:  #b91c1c; /* Critical, urgent */

  /* -- Aliases (foreground / background scale) ------------- */
  --uph-fg-1: var(--uph-text-primary);
  --uph-fg-2: var(--uph-text-secondary);
  --uph-fg-3: var(--uph-text-tertiary);
  --uph-bg-1: var(--uph-surface);
  --uph-bg-2: var(--uph-surface-secondary);
  --uph-bg-3: var(--uph-surface-tertiary);

  /* -- Typography ------------------------------------------ */
  --uph-font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --uph-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --uph-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (rem). All sizes match production site. */
  --uph-text-xs:   0.75rem;   /* 12px — micro labels */
  --uph-text-sm:   0.8125rem; /* 13px — section labels */
  --uph-text-base: 0.875rem;  /* 14px — nav, footer */
  --uph-text-md:   0.9375rem; /* 15px — body */
  --uph-text-lg:   1.0625rem; /* 17px — section subtitle */
  --uph-text-xl:   1.125rem;  /* 18px — hero lead */
  --uph-text-2xl:  1.25rem;   /* 20px — form titles */
  --uph-text-3xl:  1.5rem;    /* 24px — stat values */
  --uph-text-4xl:  2.25rem;   /* 36px — section titles */
  --uph-text-5xl:  3rem;      /* 48px — hero H1 */

  /* Weights */
  --uph-weight-regular:  400;
  --uph-weight-medium:   500;
  --uph-weight-semibold: 600;
  --uph-weight-bold:     700;

  /* Line-heights */
  --uph-lh-tight:  1.15; /* Hero */
  --uph-lh-snug:   1.25; /* Headings */
  --uph-lh-normal: 1.6;  /* Body */
  --uph-lh-loose:  1.7;  /* Long-form copy */

  /* Tracking */
  --uph-tracking-tight:  -0.025em; /* Display H1 */
  --uph-tracking-snug:   -0.02em;  /* Logo, section title */
  --uph-tracking-normal: 0;
  --uph-tracking-wide:   0.05em;   /* Section labels (uppercase) */

  /* -- Radii ----------------------------------------------- */
  --uph-radius-none: 0;
  --uph-radius-sm:   3px;   /* Inner ticks, micro bars */
  --uph-radius-md:   6px;   /* Buttons, inputs */
  --uph-radius-lg:   8px;   /* Cards, stat cards */
  --uph-radius-xl:   12px;  /* Hero panels, hero image */
  --uph-radius-pill: 100px; /* Badges */
  --uph-radius-full: 9999px;

  /* -- Spacing scale (4px base) ---------------------------- */
  --uph-space-1:  0.25rem;  /* 4px  */
  --uph-space-2:  0.5rem;   /* 8px  */
  --uph-space-3:  0.75rem;  /* 12px */
  --uph-space-4:  1rem;     /* 16px */
  --uph-space-5:  1.25rem;  /* 20px */
  --uph-space-6:  1.5rem;   /* 24px */
  --uph-space-8:  2rem;     /* 32px */
  --uph-space-10: 2.5rem;   /* 40px */
  --uph-space-12: 3rem;     /* 48px */
  --uph-space-16: 4rem;     /* 64px */
  --uph-space-20: 5rem;     /* 80px */
  --uph-space-30: 7.5rem;   /* 120px section padding */

  /* -- Shadows --------------------------------------------- */
  /* Used VERY sparingly; only on elevated hero panels & form. */
  --uph-shadow-card: 0 24px 48px -12px rgba(0, 0, 0, 0.08);
  --uph-shadow-hero: 0 32px 64px -12px rgba(26, 54, 93, 0.20);
  --uph-shadow-focus: 0 0 0 3px rgba(49, 130, 206, 0.10);

  /* -- Motion ---------------------------------------------- */
  --uph-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --uph-duration-fast: 0.15s;
  --uph-duration-base: 0.2s;

  /* -- Layout ---------------------------------------------- */
  --uph-content-max: 1140px;
  --uph-nav-height:  72px;

  /* -- Glass / overlay ------------------------------------- */
  --uph-glass-bg:     rgba(255, 255, 255, 0.9);
  --uph-glass-blur:   blur(12px);
}

/* ============================================================
   Semantic element styles
   ============================================================ */

body, .uph-body {
  font-family: var(--uph-font-body);
  font-size: var(--uph-text-md);
  font-weight: var(--uph-weight-regular);
  line-height: var(--uph-lh-normal);
  color: var(--uph-fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.uph-h1 {
  font-family: var(--uph-font-display);
  font-size: var(--uph-text-5xl);
  font-weight: var(--uph-weight-bold);
  line-height: var(--uph-lh-tight);
  letter-spacing: var(--uph-tracking-tight);
  color: var(--uph-fg-1);
}

.uph-h2 {
  font-family: var(--uph-font-display);
  font-size: var(--uph-text-4xl);
  font-weight: var(--uph-weight-semibold);
  line-height: var(--uph-lh-snug);
  letter-spacing: var(--uph-tracking-snug);
  color: var(--uph-fg-1);
}

.uph-h3 {
  font-family: var(--uph-font-display);
  font-size: var(--uph-text-xl);
  font-weight: var(--uph-weight-semibold);
  line-height: var(--uph-lh-snug);
  color: var(--uph-fg-1);
}

.uph-h4 {
  font-family: var(--uph-font-display);
  font-size: var(--uph-text-2xl);
  font-weight: var(--uph-weight-semibold);
  line-height: var(--uph-lh-snug);
  color: var(--uph-fg-1);
}

.uph-eyebrow {
  font-family: var(--uph-font-body);
  font-size: var(--uph-text-sm);
  font-weight: var(--uph-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--uph-tracking-wide);
  color: var(--uph-accent);
}

.uph-lead {
  font-family: var(--uph-font-body);
  font-size: var(--uph-text-xl);
  line-height: var(--uph-lh-loose);
  color: var(--uph-fg-2);
}

.uph-p {
  font-family: var(--uph-font-body);
  font-size: var(--uph-text-md);
  line-height: var(--uph-lh-normal);
  color: var(--uph-fg-2);
}

.uph-small {
  font-family: var(--uph-font-body);
  font-size: var(--uph-text-base);
  line-height: var(--uph-lh-normal);
  color: var(--uph-fg-3);
}

.uph-label {
  font-family: var(--uph-font-body);
  font-size: var(--uph-text-sm);
  font-weight: var(--uph-weight-medium);
  color: var(--uph-fg-1);
}

.uph-mono,
code,
kbd,
samp,
pre {
  font-family: var(--uph-font-mono);
  font-size: 0.875em;
  font-feature-settings: 'tnum' 1, 'liga' 0;
}