/* =================================================================
   v22 — Design Polish (Typography + Layout + Component refinement)
   Tasks: #109 WCAG AA Typography, #111 Layout Balance, #112 Design System
   ================================================================= */

/* ==============================================================
   1. TYPOGRAPHY — WCAG 2.1 AA Compliance (4.5:1 contrast, proper sizing)
   ============================================================== */

:root {
  /* Bump minimum font sizes — 10px/11px are below readable threshold */
  --t-2xs: 11px;   /* was 10px — WCAG minimum for legible text */
  --t-xs:  12px;    /* was 11px — secondary labels, timestamps */
  --t-sm:  13.5px;  /* was 13px — better readability for body-secondary */
  --t-md:  15px;    /* was 14px — base body size, WCAG recommended minimum */
  --t-lg:  18px;    /* was 17px — section headings */
  --t-xl:  22px;    /* was 21px — page subheadings */
  --t-2xl: 28px;    /* was 26px — page titles */
  --t-3xl: 36px;    /* was 34px — hero numbers */

  /* Fix muted text contrast — #8b9a8e had only ~3:1 ratio against white.
     #5e6e64 gives ~5.2:1 ratio → passes WCAG AA for normal text. */
  --c-text-mute: #5e6e64;

  /* Sidebar muted also needs boost: #6b7c70 → #566b5e (4.7:1) */
  --c-sidebar-mute: #566b5e;
}

/* Ensure body line-height is generous for Korean text readability */
body {
  line-height: 1.6;    /* was 1.55 — Korean characters benefit from extra leading */
  font-weight: 450;    /* slightly lighter than 500 for better body readability */
  word-break: keep-all; /* prevent awkward mid-syllable Korean line breaks */
}

/* Heading rhythm — ensure consistent vertical spacing */
.h1 { font-size: var(--t-2xl); font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; }
.h2 { font-size: var(--t-xl);  font-weight: 700; line-height: 1.3;  letter-spacing: -0.01em; }
.h3 { font-size: var(--t-lg);  font-weight: 700; line-height: 1.35; }

/* Small text should never be lighter than 500 for readability */
.small, .xs, .sub, .muted {
  font-weight: 500;
}

/* Ensure table and list text inherits readable size */
.tbl tbody td { font-size: var(--t-sm); }
.tbl thead th { font-size: var(--t-sm); font-weight: 700; }

/* Calendar day numbers — larger touch targets with better contrast */
.cal-day-num {
  font-size: var(--t-md);
  font-weight: 600;
}

/* Nav item text - ensure readability in sidebar */
.nav-item {
  font-size: var(--t-sm);
  font-weight: 550;
}
.nav-item.active {
  font-weight: 700;
}

/* Section headers — consistent visual weight */
.nav-section {
  font-size: var(--t-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Card body text — ensure good line-height */
.card-body {
  line-height: 1.6;
}

/* Chip text — bump to readable minimum */
.chip {
  font-size: var(--t-2xs);
  font-weight: 600;
}

/* Event meta text */
.ev-meta {
  font-size: var(--t-2xs);
}

/* KPI values — ensure tabular nums */
.kpi-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Dark mode muted text fix */
[data-theme="dark"] {
  --c-text-mute: #8ea098;    /* was #6e807a — bumped for 4.5:1 on dark bg */
  --c-sidebar-mute: #8ea098;
}

/* ==============================================================
   2. LAYOUT BALANCE — Fix left-bias + fill wasted whitespace
   ============================================================== */

/* Main content area — center with max-width on wide screens */
.view-root {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp-5);
}

/* On ultra-wide monitors, add generous breathing room */
@media (min-width: 1600px) {
  .view-root {
    max-width: 1320px;
    padding: var(--sp-6) var(--sp-7);
  }
}

/* Tablet landscape — balanced padding */
@media (min-width: 900px) and (max-width: 1200px) {
  .view-root {
    padding: var(--sp-4) var(--sp-5);
  }
}

/* Grid items should stretch evenly */
.grid {
  max-width: 100%;
}

/* Card grid — ensure cards stretch to fill available space */
.card {
  width: 100%;
}

/* Section head — prevent orphaned action buttons */
.section-head {
  gap: var(--sp-3);
  align-items: center;
}

/* Cabinet grid — better proportion on wide screens */
@media (min-width: 1024px) {
  .cabinet-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==============================================================
   3. COMPONENT POLISH — Design System Consistency
   ============================================================== */

/* Button focus states — accessibility requirement */
.btn:focus-visible,
.icon-btn:focus-visible,
.nav-item:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

/* Card consistency — uniform shadow and hover */
.card {
  border-radius: var(--r-3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  box-shadow: var(--sh-2);
}

/* Consistent input styling */
.input, .search-box input, .cab-search input, .drawer-foot input {
  font-size: var(--t-sm);
  line-height: 1.5;
}

/* Empty states — center properly in grid */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  text-align: center;
}

/* Toast — ensure readability */
.toast {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.5;
}

/* Badge text — readable size */
.badge {
  font-size: var(--t-2xs);
  font-weight: 700;
}

/* Consistent border-radius on interactive elements */
.btn {
  border-radius: var(--r-2);
}

/* Better hover/active feedback across all clickable items */
.btn:active,
.icon-btn:active,
.chip:active {
  transform: scale(0.97);
}

/* Sub-nav polish — if it exists */
.sub-nav-strip {
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1600px) {
  .sub-nav-strip {
    max-width: 1320px;
  }
}

/* Profile/person badge grid — center */
.prof-grid {
  justify-content: center;
}

/* ==============================================================
   4. MOBILE REFINEMENTS
   ============================================================== */

@media (max-width: 899px) {
  .view-root {
    padding: var(--sp-3);
    max-width: none;
  }

  /* Ensure card text doesn't get too small on mobile */
  .card-body {
    font-size: var(--t-sm);
  }

  /* Better tap targets on mobile */
  .btn {
    min-height: 42px;
    padding: 10px 16px;
  }

  .chip {
    min-height: 32px;
    padding: 4px 10px;
  }
}

@media (max-width: 599px) {
  .view-root {
    padding: var(--sp-2) var(--sp-3);
  }

  .h1 { font-size: 22px; }
  .h2 { font-size: 18px; }
  .h3 { font-size: 16px; }
}

@media (max-width: 360px) {
  /* Already handled in base.css, but ensure t-md stays readable */
  :root {
    --t-md: 14px;  /* keep 14px minimum on tiny screens */
    --t-sm: 13px;
  }
}

/* ==============================================================
   5. PRINT STYLES — basic accessibility
   ============================================================== */
@media print {
  .sidenav, .topbar, .toast-stack, .drawer, .scrim,
  .mobile-bottom-nav, .sub-nav-strip { display: none !important; }
  .view-root { max-width: 100%; padding: 0; margin: 0; }
  .app { display: block; }
  body { background: white; color: black; font-size: 12pt; }
  .card { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
}