/*
 * NutriORL shared clinical design system foundation.
 *
 * This file owns semantic visual tokens shared by caregiver, doctor,
 * legal and clinical-content surfaces.
 *
 * Surface-specific CSS remains responsible for layout and workflow
 * presentation. Tokens here must not encode clinical meaning.
 */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* Typography */
  --n-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, system-ui,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --n-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    monospace;
  --n-type-page: clamp(1.875rem, 4vw, 2.125rem);
  --n-type-section: clamp(1.25rem, 2.5vw, 1.375rem);
  --n-type-component: clamp(1rem, 2vw, 1.125rem);
  --n-type-body: 1rem;
  --n-type-supporting: clamp(0.8125rem, 1.5vw, 0.875rem);
  --n-type-button: 0.9375rem;

  /* Brand */
  --n-color-brand: #6e36cf;
  --n-color-brand-strong: #51208f;
  --n-color-brand-accent: #b88ae2;
  --n-color-brand-soft: #f3edf9;
  --n-color-brand-subtle: #f7f3fa;

  /* Neutral surfaces */
  --n-color-background: #fbfafc;
  --n-color-background-secondary: #f8f7fa;
  --n-color-surface: #ffffff;
  --n-color-surface-soft: #fbfafc;
  --n-color-text: #1d2038;
  --n-color-text-secondary: #656775;
  --n-color-border: #e4dfe8;
  --n-color-border-strong: #d2cad8;

  /* Functional states */
  --n-color-success: #176647;
  --n-color-success-surface: #e6f7f5;
  --n-color-warning: #805100;
  --n-color-warning-surface: #fff1d2;
  --n-color-danger: #941f35;
  --n-color-danger-surface: #ffe1e6;
  --n-color-info: #20598d;
  --n-color-info-surface: #eaf3fa;

  /* Spacing */
  --n-space-1: 4px;
  --n-space-2: 8px;
  --n-space-3: 12px;
  --n-space-4: 16px;
  --n-space-6: 24px;
  --n-space-8: 32px;
  --n-space-12: 48px;

  /* Radius */
  --n-radius-sm: 8px;
  --n-radius-control: 10px;
  --n-radius-md: 12px;
  --n-radius-lg: 16px;
  --n-radius-round: 999px;

  /* Elevation */
  --n-shadow-low: 0 1px 2px rgba(31, 24, 40, 0.04);
  --n-shadow-medium: 0 8px 24px rgba(29, 32, 56, 0.06);
  --n-shadow-high: 0 16px 40px rgba(29, 32, 56, 0.1);

  /* Interaction */
  --n-focus-ring: 0 0 0 3px rgba(107, 45, 184, 0.28);
  --n-motion-fast: 160ms;
  --n-motion-normal: 220ms;
  --n-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Shared frosted navigation */
  --n-navigation-background: rgba(255, 255, 255, 0.82);
  --n-navigation-blur: blur(18px) saturate(1.05);
  --n-navigation-border: 1px solid rgba(210, 202, 216, 0.78);
  --n-navigation-shadow: 0 12px 32px rgba(29, 32, 56, 0.1);
  --n-navigation-active-tint: rgba(110, 54, 207, 0.1);
  --n-navigation-motion: 180ms;
  --n-navigation-radius: 18px;
  --n-navigation-item-radius: 13px;
  --n-navigation-gap: 2px;
  --n-navigation-padding: 5px;
  --n-navigation-item-min-height: 56px;

  /* Layout */
  --n-content-caregiver: 1100px;
  --n-content-doctor: 1180px;
  --n-touch-target: 44px;
}

/* Shared clinician identity illustration. Keep the visible name adjacent. */
.clinician-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--clinician-avatar-size, 48px);
  height: var(--clinician-avatar-size, 48px);
  overflow: hidden;
  border: 1px solid #d8e4e2;
  border-radius: 50%;
  background: #f2f7f6;
  place-items: center;
}

.clinician-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.clinician-avatar--32 { --clinician-avatar-size: 32px; }
.clinician-avatar--40 { --clinician-avatar-size: 40px; }
.clinician-avatar--48 { --clinician-avatar-size: 48px; }
.clinician-avatar--56 { --clinician-avatar-size: 56px; }
.clinician-avatar--72 { --clinician-avatar-size: 72px; }
.clinician-avatar--80 { --clinician-avatar-size: 80px; }
.clinician-avatar--96 { --clinician-avatar-size: 96px; }

/* Shared product credit. Placement remains owned by caregiver and Doctor Profile. */
.product-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--n-space-2);
  color: var(--n-color-text-secondary);
}

.product-credit__label {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
}

.product-credit__wordmark {
  display: block;
  width: 84px;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --n-motion-fast: 0ms;
    --n-motion-normal: 0ms;
    --n-navigation-motion: 0ms;
  }
}