/* ════════════════════════════════════════════════════════════════
   base.css — MFP shared base styles
   Loaded by base_public.html and base_dashboard.html
   Phase 3 — CSS extraction (2026-04-14)
   v2 calm minimal redesign (2026-04-17)
   ════════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; max-width: 100%; }

/* ── Design Tokens (v2 calm minimal) ── */
:root {
  /* Backgrounds */
  --bg:              #f2f4f6;
  --card-bg:         #ffffff;
  --card-border:     #dcdfe3;

  /* Text */
  --text-heading:    #1a1a2e;  /* ink */
  --text-body:       #888888;  /* muted */
  --text-positive:   #0e9068;

  /* Teal family */
  --teal:            #0e9068;
  --teal-light:      #e0f5ee;
  --teal-dark:       #0f6e56;

  /* Lavender family */
  --lavender:        #2563eb;
  --lavender-light:  #dbeafe;
  --lavender-dark:   #1d4ed8;

  /* Peach family */
  --peach:           #c0392b;
  --peach-light:     #fce8e0;
  --peach-dark:      #993c1d;

  /* Amber */
  --amber:           #ba7517;

  /* Border */
  --border:          #dcdfe3;

  /* Spacing */
  --space-xs:        4px;
  --space-sm:        8px;
  --space-md:        12px;
  --space-lg:        16px;
  --space-xl:        24px;
  --space-2xl:       32px;

  /* Radius */
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-lg:       20px;

  /* Legacy aliases (backward compat — maps old names to new values) */
  --ink:             #1a1a2e;
  --muted:           #888888;
  --green:           #0e9068;
  --red:             #0e9068;
  --red-light:       #fce8e0;
  --gold:            #ba7517;
  --warm-mid:        #dcdfe3;
  --warm-light:      #f2f4f6;
  --card:            #ffffff;
  --paper:           #f2f4f6;
  --accent:          #0e9068;
  --accent-light:    #e0f5ee;
  --ahead:           #0e9068;
  --average:         #ba7517;
  --behind:          #993c1d;
  --shadow:          none;
  --shadow-lg:       none;

  /* Radius legacy */
  --r-card:          20px;
  --r-input:         10px;
  --r-btn:           10px;
  --radius-card:     20px;
  --radius-btn:      10px;
  --radius-input:    10px;

  /* Font — system sans-serif only, no Google Fonts */
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Dashboard layout */
  --page-bg:         #f2f4f6;
  --sidebar-bg:      #ffffff;
  --sidebar-border:  #dcdfe3;
  --sidebar-w:       220px;
}

/* ── No italic anywhere ── */
em, i { font-style: normal; }

/* ── Base HTML/Body ── */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  background: #f2f4f6;
  color: #888888;
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  color: #1a1a2e;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Animations (one-shot, on load only) ── */
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cardIn  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ── Mobile: iOS font-size fix ── */
@media (max-width: 768px) {
  input[type="number"],
  input[type="email"],
  input[type="text"],
  input[type="password"] { font-size: 16px !important; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Calm Minimal: no shadows anywhere */
*, *::before, *::after {
  box-shadow: none !important;
}

/* ── Mobile Responsive Additions (v2 pass) ── */

/* No horizontal overflow on any viewport */
body { overflow-x: hidden; }
.page, .main { overflow-x: hidden; }

@media (max-width: 767px) {
  /* Touch targets: ensure min 44px height on interactive elements */
  button, .btn, .btn-primary, .btn-secondary, .btn-ghost,
  .btn-primary-v2, .btn-secondary-v2, .nav-item, .nav-cta-btn,
  input[type="submit"], input[type="button"] {
    min-height: 44px;
  }

  /* Forms: full-width inputs on mobile */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  select, textarea {
    width: 100%;
    min-height: 44px;
  }

  /* Typography: hero numbers scale down */
  .hero-value, .kpi-value, .hero-number {
    font-size: clamp(20px, 6vw, 32px) !important;
  }

  /* Labels: minimum 10px */
  .card-label, .kpi-label, .section-eyebrow, .eyebrow,
  .nav-section-label, .form-label {
    font-size: 10px;
  }
}

@media (max-width: 374px) {
  /* Mobile S: 320-374px — tightest constraints */
  body { font-size: 13px; }
  .page { padding: 12px 12px 40px !important; }
}