/* ============================================================================
   style.css — Corporate Design & Brand Standards (v1.0)

   Generated from "CORPORATE DESIGN STYLE SHEET.docx" (Virtual Human Platform).
   A light, enterprise-clinical system: Inter typography, an 8px spacing grid,
   Deep Clinical Blue as the primary, restrained semantic colors, subtle motion.

   Use the design tokens (CSS variables in :root) everywhere; do not hard-code
   colors, sizes, or spacing — the guide prohibits "random spacing values".
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── 3. Primary color palette ───────────────────────────────────────── */
  --color-primary: #123E63;          /* Deep Clinical Blue — branding, headers, buttons */
  --color-primary-hover: #0F3452;    /* Primary button hover */
  --color-enterprise-blue: #2F6F9F;  /* Secondary UI accents, input focus */
  --color-cyan: #59B7D9;             /* Intelligent Cyan — interactive highlights */
  --color-accent: #0E93D5;           /* Client interactive cyan — buttons, links, hover, focus */
  --color-accent-hover: #0B7CB4;     /* Darker accent for button hover / pressed */
  --color-bg-panel: #EAF4F8;         /* Clinical Background Blue — soft panels/sections */
  --color-bg-app: #F7F9FB;           /* Soft Interface Gray — application background */

  /* ── 4. Neutral color system ────────────────────────────────────────── */
  --text-primary: #1E2933;
  --text-secondary: #5F6B76;
  --text-muted: #8B98A5;
  --border: #D8E1E8;                 /* Border Gray */
  --divider: #E8EDF2;                /* Divider Gray */
  --white: #FFFFFF;

  /* ── 5. Semantic status colors (kept restrained) ────────────────────── */
  --success: #2E8B57;
  --warning: #D89B2B;
  --error: #C44747;
  --info: #3B82F6;

  /* ── 6/7. Typography ────────────────────────────────────────────────── */
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ── 10. Spacing system (8px grid) ──────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 72px;

  /* ── 9. Layout maximum widths ───────────────────────────────────────── */
  --w-app: 1440px;
  --w-dashboard: 1280px;
  --w-reading: 760px;
  --w-form: 640px;
  --w-modal-min: 480px;
  --w-modal-max: 720px;

  /* ── Radius (11/12/14) ──────────────────────────────────────────────── */
  --radius-button: 8px;
  --radius-input: 10px;
  --radius-card: 16px;

  /* ── 12. Elevation ──────────────────────────────────────────────────── */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);

  /* ── 16. Motion ─────────────────────────────────────────────────────── */
  --motion-fast: 150ms;
  --motion-slow: 300ms;
  --easing: ease-out;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;            /* Standard body */
  line-height: 1.6;           /* Generous line spacing */
  color: var(--text-primary);
  background: var(--color-bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── 7. Typography scale (sentence case, consistent hierarchy) ─────────── */
h1 { font-size: 56px; font-weight: 700; line-height: 64px; }
h2 { font-size: 42px; font-weight: 700; line-height: 50px; }
h3 { font-size: 32px; font-weight: 600; line-height: 40px; }
h4 { font-size: 24px; font-weight: 600; line-height: 32px; }
h5 { font-size: 20px; font-weight: 600; line-height: 28px; }
h6 { font-size: 18px; font-weight: 600; line-height: 26px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-md); color: var(--text-primary); }

.body-lg  { font-size: 18px; font-weight: 400; }
.body     { font-size: 16px; font-weight: 400; }
.body-sm  { font-size: 14px; font-weight: 400; }
.caption  { font-size: 12px; font-weight: 400; color: var(--text-secondary); }

.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }

a { color: var(--color-accent); }

/* Wordmark accent: the "i" in typed "MediMentor" matches the logo's cyan. */
.brand-i { color: var(--color-accent); -webkit-text-fill-color: var(--color-accent); }

/* ── 9. Layout containers ───────────────────────────────────────────────*/
.container-app       { max-width: var(--w-app);       margin: 0 auto; padding: 0 var(--space-lg); }
.container-dashboard { max-width: var(--w-dashboard); margin: 0 auto; }
.container-reading   { max-width: var(--w-reading);   margin: 0 auto; }
.container-form      { max-width: var(--w-form);      margin: 0 auto; }

/* ── 11. Buttons (no pills, no gradients, minimal effects) ──────────────*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius-button);
  padding: 14px 24px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--motion-fast) var(--easing),
              border-color var(--motion-fast) var(--easing),
              color var(--motion-fast) var(--easing);
}
.btn-primary   { background: var(--color-accent); color: var(--white); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-secondary { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }
.btn-secondary:hover { background: var(--color-bg-panel); }

/* ── 12. Cards (lightweight, structured) ────────────────────────────────*/
.card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

/* Soft section panel */
.panel {
  background: var(--color-bg-panel);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
}

/* ── 13. Navigation ─────────────────────────────────────────────────────*/
.navbar {
  height: 80px;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: 0 var(--space-lg);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--divider);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.navbar a, .nav-link {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--text-primary);
  text-decoration: none;
}
.navbar a:hover, .nav-link:hover { color: var(--color-accent); }

/* ── 14. Forms ──────────────────────────────────────────────────────────*/
.input,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 0 var(--space-md);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--text-primary);
  background: var(--white);
  transition: border-color var(--motion-fast) var(--easing),
              box-shadow var(--motion-fast) var(--easing);
}
.input:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(14, 147, 213, 0.18);
}
textarea { height: auto; min-height: 96px; padding: var(--space-md); line-height: 1.6; }

/* ── 5. Semantic status helpers ─────────────────────────────────────────*/
.status-success { color: var(--success); }
.status-warning { color: var(--warning); }
.status-error   { color: var(--error); }
.status-info    { color: var(--info); }

/* ── 19. Accessibility: honor reduced-motion ────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}