/* ============================================================================
   MME 360 — v3 design tokens (ui-ux-pro-max informed)
   ============================================================================

   Style:        Accessible & Ethical + Flat Design + Micro-interactions
   Use cases:    /session/<id>, /analyzer-kb/<brand>
   WCAG:         AA target (4.5:1 body, 3:1 large text)
   Typography:   Figtree (display) + Noto Sans (body)
   Palette:      Medical teal #0891B2 + Health green #16A34A
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Color · brand (Option 3 · Honey amber, #50) ---- */
  --v3-primary:        #D97706;  /* honey amber */
  --v3-primary-dark:   #B45309;  /* saffron */
  --v3-primary-darker: #92400E;  /* burnt amber */
  --v3-on-primary:     #FFFFFF;

  --v3-accent:         #0E7490;  /* deep teal — used for success / finalize.
                                    swapped IN so green isn't the primary action
                                    color anymore, keeping the medical feel */
  --v3-accent-dark:    #155E75;
  --v3-on-accent:      #FFFFFF;

  --v3-danger:         #DC2626;
  --v3-danger-bg:      #FEE2E2;
  --v3-warn:           #CA8A04;  /* mustard, distinct from primary amber */
  --v3-warn-bg:        #FEF9C3;
  --v3-info:           #2563EB;
  --v3-info-bg:        #DBEAFE;

  /* ---- Color · surfaces ---- */
  --v3-bg:             #FFFBEB;   /* page background — warm cream */
  --v3-surface:        #FFFFFF;
  --v3-surface-2:      #FEF3C7;   /* card tint — pale honey */
  --v3-surface-3:      #FED7AA;   /* selected / hover — peach */
  --v3-muted:          #F5F5F4;   /* neutral warm gray */
  --v3-border:         #FED7AA;   /* peach border, subtle */
  --v3-border-strong:  #FDBA74;
  --v3-divider:        #E7E5E4;

  /* ---- Color · text ---- */
  --v3-fg:             #292524;   /* warm near-black, not pure */
  --v3-fg-muted:       #57534E;
  --v3-fg-subtle:      #78716C;
  --v3-fg-inverse:     #FFFFFF;

  /* ---- Focus ring ---- */
  --v3-ring:           #D97706;
  --v3-ring-offset:    #FFFFFF;
  --v3-ring-width:     3px;

  /* ---- Typography ---- */
  --v3-font-display:   'Figtree', 'Inter', system-ui, -apple-system, sans-serif;
  --v3-font-body:      'Noto Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --v3-font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --v3-text-xs:        12px;
  --v3-text-sm:        14px;
  --v3-text-base:      16px;
  --v3-text-lg:        18px;
  --v3-text-xl:        20px;
  --v3-text-2xl:       24px;
  --v3-text-3xl:       32px;

  --v3-leading-tight:  1.25;
  --v3-leading-snug:   1.4;
  --v3-leading-normal: 1.5;
  --v3-leading-relaxed:1.65;

  --v3-fw-regular:     400;
  --v3-fw-medium:      500;
  --v3-fw-semibold:    600;
  --v3-fw-bold:        700;

  /* ---- Spacing (4/8 rhythm) ---- */
  --v3-s-1: 4px;
  --v3-s-2: 8px;
  --v3-s-3: 12px;
  --v3-s-4: 16px;
  --v3-s-5: 20px;
  --v3-s-6: 24px;
  --v3-s-8: 32px;
  --v3-s-10: 40px;
  --v3-s-12: 48px;
  --v3-s-16: 64px;

  /* ---- Radius ---- */
  --v3-r-sm: 4px;
  --v3-r:    6px;
  --v3-r-md: 8px;
  --v3-r-lg: 12px;
  --v3-r-pill: 999px;

  /* ---- Shadows (subtle, accessible) ---- */
  --v3-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --v3-shadow:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --v3-shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --v3-shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);

  /* ---- Motion ---- */
  --v3-dur-fast:   120ms;
  --v3-dur:        200ms;
  --v3-dur-slow:   300ms;
  --v3-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --v3-ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --v3-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================================
   Reset / base for v3 pages
   ============================================================================ */
.v3 {
  font-family: var(--v3-font-body);
  font-size: var(--v3-text-base);
  color: var(--v3-fg);
  line-height: var(--v3-leading-normal);
  background: var(--v3-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.v3 *, .v3 *::before, .v3 *::after { box-sizing: border-box; }

/* Display headings use Figtree */
.v3 h1, .v3 h2, .v3 h3, .v3 h4, .v3 .v3-display {
  font-family: var(--v3-font-display);
  font-weight: var(--v3-fw-semibold);
  color: var(--v3-fg);
  line-height: var(--v3-leading-tight);
  letter-spacing: -0.01em;
  margin: 0;
}
.v3 h1 { font-size: var(--v3-text-3xl); }
.v3 h2 { font-size: var(--v3-text-2xl); }
.v3 h3 { font-size: var(--v3-text-lg); }
.v3 h4 { font-size: var(--v3-text-base); font-weight: var(--v3-fw-semibold); }

/* ---- Focus state for ALL interactive elements ---- */
.v3 *:focus-visible {
  outline: var(--v3-ring-width) solid var(--v3-ring);
  outline-offset: 2px;
  border-radius: var(--v3-r-sm);
}

/* ---- Buttons ---- */
.v3-btn {
  --bg: var(--v3-primary);
  --fg: var(--v3-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v3-s-2);
  min-height: 44px;
  padding: 0 var(--v3-s-5);
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--v3-text-sm);
  font-weight: var(--v3-fw-semibold);
  border: none;
  border-radius: var(--v3-r);
  cursor: pointer;
  transition: background var(--v3-dur) var(--v3-ease-out),
              transform var(--v3-dur-fast) var(--v3-ease-out),
              box-shadow var(--v3-dur) var(--v3-ease-out);
  white-space: nowrap;
  text-decoration: none;
}
.v3-btn:hover:not(:disabled) {
  --bg: var(--v3-primary-dark);
  box-shadow: var(--v3-shadow-md);
}
.v3-btn:active:not(:disabled) { transform: scale(0.97); }
.v3-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.v3-btn.secondary {
  --bg: var(--v3-surface);
  --fg: var(--v3-fg);
  box-shadow: inset 0 0 0 1.5px var(--v3-border-strong);
}
.v3-btn.secondary:hover:not(:disabled) {
  --bg: var(--v3-surface-2);
  box-shadow: inset 0 0 0 1.5px var(--v3-primary);
}
.v3-btn.success { --bg: var(--v3-accent); }
.v3-btn.success:hover:not(:disabled) { --bg: var(--v3-accent-dark); }
.v3-btn.warn { --bg: var(--v3-warn); }
.v3-btn.danger { --bg: var(--v3-danger); }
.v3-btn.ghost {
  --bg: transparent;
  --fg: var(--v3-primary);
}
.v3-btn.ghost:hover:not(:disabled) { --bg: var(--v3-surface-3); }
.v3-btn.sm { min-height: 36px; padding: 0 var(--v3-s-3); font-size: var(--v3-text-xs); }
.v3-btn.lg { min-height: 52px; padding: 0 var(--v3-s-6); font-size: var(--v3-text-base); }

.v3-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.v3-btn.sm svg { width: 14px; height: 14px; }
.v3-btn.lg svg { width: 20px; height: 20px; }

/* ---- Cards ---- */
.v3-card {
  background: var(--v3-surface);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-r-md);
  padding: var(--v3-s-5);
  transition: border-color var(--v3-dur) var(--v3-ease-out),
              box-shadow var(--v3-dur) var(--v3-ease-out);
}
.v3-card.interactive { cursor: pointer; }
.v3-card.interactive:hover {
  border-color: var(--v3-primary);
  box-shadow: var(--v3-shadow-md);
}
.v3-card.selected {
  border-color: var(--v3-primary);
  box-shadow: 0 0 0 2px var(--v3-surface-3);
}

.v3-card-title {
  font-family: var(--v3-font-display);
  font-size: var(--v3-text-xs);
  font-weight: var(--v3-fw-semibold);
  color: var(--v3-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--v3-s-3) 0;
}

/* ---- Pills ---- */
.v3-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--v3-text-xs);
  font-weight: var(--v3-fw-medium);
  border-radius: var(--v3-r-pill);
  background: var(--v3-surface-3);
  color: var(--v3-primary-darker);
  white-space: nowrap;
}
.v3-pill.success { background: #DCFCE7; color: #166534; }
.v3-pill.warn    { background: var(--v3-warn-bg); color: #92400E; }
.v3-pill.danger  { background: var(--v3-danger-bg); color: #991B1B; }
.v3-pill.info    { background: var(--v3-info-bg); color: #1E40AF; }
.v3-pill.neutral { background: var(--v3-muted); color: var(--v3-fg-muted); }

/* ---- Form fields ---- */
.v3-field { display: flex; flex-direction: column; gap: 6px; }
.v3-label {
  font-family: var(--v3-font-display);
  font-size: var(--v3-text-xs);
  font-weight: var(--v3-fw-semibold);
  color: var(--v3-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.v3-input, .v3-textarea, .v3-select {
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: var(--v3-text-base);
  color: var(--v3-fg);
  background: var(--v3-surface);
  border: 1.5px solid var(--v3-border-strong);
  border-radius: var(--v3-r);
  transition: border-color var(--v3-dur) var(--v3-ease-out),
              box-shadow var(--v3-dur) var(--v3-ease-out);
}
.v3-textarea { min-height: 88px; resize: vertical; line-height: var(--v3-leading-snug); }
.v3-input:hover, .v3-textarea:hover, .v3-select:hover { border-color: var(--v3-primary); }
.v3-input:focus, .v3-textarea:focus, .v3-select:focus {
  outline: none;
  border-color: var(--v3-primary);
  box-shadow: 0 0 0 3px var(--v3-surface-3);
}
.v3-helper { font-size: var(--v3-text-xs); color: var(--v3-fg-subtle); }
.v3-error  { font-size: var(--v3-text-xs); color: var(--v3-danger); font-weight: var(--v3-fw-medium); }

/* ---- Layout shell ---- */
.v3-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--v3-s-6) var(--v3-s-8);
}
@media (max-width: 768px) {
  .v3-shell { padding: var(--v3-s-4); }
}

/* ---- Breadcrumb ---- */
.v3-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--v3-text-xs);
  color: var(--v3-fg-subtle);
  margin-bottom: var(--v3-s-2);
  flex-wrap: wrap;
}
.v3-crumbs a {
  color: var(--v3-fg-muted);
  text-decoration: none;
  transition: color var(--v3-dur) var(--v3-ease-out);
}
.v3-crumbs a:hover { color: var(--v3-primary); }
.v3-crumbs .sep { color: var(--v3-fg-subtle); }
.v3-crumbs .current { color: var(--v3-fg); font-weight: var(--v3-fw-medium); }

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

/* ---- Skip link (keyboard a11y) ---- */
.v3-skip {
  position: absolute;
  top: -100px;
  left: var(--v3-s-2);
  padding: var(--v3-s-2) var(--v3-s-4);
  background: var(--v3-fg);
  color: var(--v3-fg-inverse);
  border-radius: var(--v3-r);
  font-size: var(--v3-text-sm);
  font-weight: var(--v3-fw-semibold);
  z-index: 999;
  transition: top var(--v3-dur) var(--v3-ease-out);
}
.v3-skip:focus { top: var(--v3-s-2); }