/* v3-foundation.css — v3.x build foundation per Round 3 critique additions.
 *
 * Adds (does NOT replace base.css):
 *  - Explicit spacing scale tokens (4/8/12/16/24/32/48/64)
 *  - Explicit type ramp tokens (12/14/16/20/24/32/40)
 *  - 4-state semantic colors aligned to v3 spec (Green/Yellow/Red/Grey)
 *  - Skeleton loader primitives
 *  - Empty-state component primitives
 *  - iPad-first responsive breakpoints
 *  - WCAG AA contrast-enforced semantic tokens (paired light/dark)
 *
 * Per Captain v3.x rule: take nothing away, only add. This file SUPPLEMENTS
 * base.css without modifying any existing token. Existing components keep
 * their current tokens; new components use v3 tokens prefixed --v3-*.
 *
 * Load order: base.css → components.css → v3-foundation.css → page-specific.
 */

:root {
  /* === SPACING SCALE (Linear/Stripe pattern — locked from v0.1) === */
  --v3-space-1:    4px;
  --v3-space-2:    8px;
  --v3-space-3:   12px;
  --v3-space-4:   16px;
  --v3-space-5:   24px;
  --v3-space-6:   32px;
  --v3-space-7:   48px;
  --v3-space-8:   64px;

  /* === TYPE RAMP (locked from v0.1) === */
  --v3-text-xs:   12px;   /* metadata, audit log timestamps */
  --v3-text-sm:   14px;   /* body small, labels */
  --v3-text-base: 16px;   /* body default */
  --v3-text-lg:   20px;   /* section headers */
  --v3-text-xl:   24px;   /* page titles */
  --v3-text-2xl:  32px;   /* hero on landing pages */
  --v3-text-3xl:  40px;   /* marketing hero */

  /* === LINE HEIGHTS === */
  --v3-leading-tight:  1.2;
  --v3-leading-snug:   1.35;
  --v3-leading-normal: 1.5;
  --v3-leading-relaxed: 1.65;

  /* === FONT WEIGHTS === */
  --v3-font-regular: 400;
  --v3-font-medium:  500;
  --v3-font-semi:    600;
  --v3-font-bold:    700;

  /* === COMPONENT PRIMITIVES === */
  --v3-radius-sm:   6px;
  --v3-radius-md:  10px;
  --v3-radius-lg:  16px;
  --v3-radius-xl:  24px;

  --v3-border-thin: 1px;
  --v3-border-med:  2px;
  --v3-border-thk:  3px;

  --v3-focus-ring: 0 0 0 3px var(--accent-glow-2);
}

/* === 4-STATE SEMANTIC COLORS (Captain's v2 lock — Green/Yellow/Red/Grey) ===
 * Paired light/dark variants from token-1 per designer round 2 critique.
 * Every state pairs with an icon + label per WCAG AA — see _partials/_state_chip.html. */

:root[data-theme="dark"],
:root[data-theme="tenant_default"],
:root:not([data-theme]) {
  /* Status semantics — meaning encoded by color + icon + label */
  --v3-state-green-fg:   #4ADE80;
  --v3-state-green-bg:   rgba(74, 222, 128, 0.12);
  --v3-state-green-bord: rgba(74, 222, 128, 0.30);

  --v3-state-yellow-fg:  #EAB308;
  --v3-state-yellow-bg:  rgba(234, 179, 8, 0.12);
  --v3-state-yellow-bord: rgba(234, 179, 8, 0.30);

  --v3-state-red-fg:     #F87171;
  --v3-state-red-bg:     rgba(248, 113, 113, 0.12);
  --v3-state-red-bord:   rgba(248, 113, 113, 0.30);

  --v3-state-grey-fg:    #9CA3AF;
  --v3-state-grey-bg:    rgba(156, 163, 175, 0.12);
  --v3-state-grey-bord:  rgba(156, 163, 175, 0.30);

  /* Skeleton shimmer */
  --v3-skeleton-base:    #1A1A1D;
  --v3-skeleton-shine:   #2A2A2E;
}

:root[data-theme="light"] {
  --v3-state-green-fg:   #16A34A;
  --v3-state-green-bg:   rgba(22, 163, 74, 0.10);
  --v3-state-green-bord: rgba(22, 163, 74, 0.25);

  --v3-state-yellow-fg:  #D97706;
  --v3-state-yellow-bg:  rgba(217, 119, 6, 0.10);
  --v3-state-yellow-bord: rgba(217, 119, 6, 0.25);

  --v3-state-red-fg:     #DC2626;
  --v3-state-red-bg:     rgba(220, 38, 38, 0.10);
  --v3-state-red-bord:   rgba(220, 38, 38, 0.25);

  --v3-state-grey-fg:    #6B7280;
  --v3-state-grey-bg:    rgba(107, 114, 128, 0.10);
  --v3-state-grey-bord:  rgba(107, 114, 128, 0.25);

  --v3-skeleton-base:    #E5E5E8;
  --v3-skeleton-shine:   #F0F0F3;
}

/* === SKELETON LOADER ===
 * Use: <div class="v3-skeleton" style="height: 24px; width: 200px"></div>
 * Replaces spinner pattern per designer round 2 critique. */
.v3-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--v3-skeleton-base) 0%,
    var(--v3-skeleton-shine) 50%,
    var(--v3-skeleton-base) 100%
  );
  background-size: 200% 100%;
  animation: v3-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--v3-radius-sm);
}
.v3-skeleton--text { height: 14px; margin: 6px 0; }
.v3-skeleton--text-lg { height: 20px; margin: 8px 0; }
.v3-skeleton--circle { border-radius: 50%; }
.v3-skeleton--card { height: 120px; border-radius: var(--v3-radius-md); }

@keyframes v3-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .v3-skeleton { animation: none; opacity: 0.6; }
}

/* === EMPTY STATE ===
 * Use: <div class="v3-empty">
 *        <svg class="v3-empty__icon">...</svg>
 *        <h3 class="v3-empty__title">No patients yet</h3>
 *        <p class="v3-empty__desc">Add your first patient to get started.</p>
 *        <button class="v3-empty__cta">+ Add patient</button>
 *      </div>
 * Replaces "No data" text pattern per designer round 2 critique. */
.v3-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--v3-space-7) var(--v3-space-5);
  background: var(--bg-card);
  border: 1px dashed var(--border-hi);
  border-radius: var(--v3-radius-lg);
  min-height: 280px;
}
.v3-empty__icon {
  width: 48px; height: 48px;
  color: var(--text-muted);
  margin-bottom: var(--v3-space-4);
  opacity: 0.7;
}
.v3-empty__title {
  font: var(--v3-font-semi) var(--v3-text-lg)/var(--v3-leading-snug) var(--font-display);
  color: var(--text);
  margin: 0 0 var(--v3-space-2);
}
.v3-empty__desc {
  font-size: var(--v3-text-sm);
  color: var(--text-dim);
  margin: 0 0 var(--v3-space-5);
  max-width: 320px;
}
.v3-empty__cta {
  background: var(--accent);
  color: #04161e;
  border: none;
  padding: var(--v3-space-3) var(--v3-space-5);
  border-radius: var(--v3-radius-md);
  font: var(--v3-font-semi) var(--v3-text-sm)/1 var(--font-body);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.v3-empty__cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--v3-focus-ring);
}
.v3-empty__cta:focus-visible {
  outline: none;
  box-shadow: var(--v3-focus-ring);
}
.v3-empty__cta--secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  margin-left: var(--v3-space-2);
}

/* === STATE CHIP (color + icon + label per WCAG AA) ===
 * Use: <span class="v3-chip v3-chip--green"><svg>✓</svg> Paid</span> */
.v3-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--v3-space-1);
  padding: 2px var(--v3-space-2);
  border-radius: var(--v3-radius-sm);
  font-size: var(--v3-text-xs);
  font-weight: var(--v3-font-semi);
  letter-spacing: 0.5px;
  line-height: 1.4;
  border: 1px solid transparent;
  white-space: nowrap;
}
.v3-chip svg { width: 12px; height: 12px; }

.v3-chip--green  { background: var(--v3-state-green-bg);  color: var(--v3-state-green-fg);  border-color: var(--v3-state-green-bord); }
.v3-chip--yellow { background: var(--v3-state-yellow-bg); color: var(--v3-state-yellow-fg); border-color: var(--v3-state-yellow-bord); }
.v3-chip--red    { background: var(--v3-state-red-bg);    color: var(--v3-state-red-fg);    border-color: var(--v3-state-red-bord); }
.v3-chip--grey   { background: var(--v3-state-grey-bg);   color: var(--v3-state-grey-fg);   border-color: var(--v3-state-grey-bord); }

/* === IPAD-FIRST RESPONSIVE BREAKPOINTS ===
 * Mobile-first cascading. iPad portrait = 768px is the primary clinical device.
 * Designer round 2 critique demanded these from v0.1. */

/* Touch targets: WCAG 2.5.5 — minimum 44×44pt on touch surfaces */
@media (hover: none) and (pointer: coarse) {
  button, .v3-empty__cta, .v3-chip,
  a[role="button"], input[type="button"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* iPad portrait — sidebar collapses to icon-only */
@media (max-width: 900px) {
  :root { --sidenav-w: 72px; }
}

/* iPad portrait below — sidebar becomes bottom-tab-bar */
@media (max-width: 768px) {
  :root { --sidenav-w: 0px; }
  /* Layouts that depend on sidebar should switch to bottom-tab pattern */
}

/* Phone */
@media (max-width: 480px) {
  :root { --topbar-h: 56px; }
}

/* === FOCUS STATES (WCAG AA from v0.1 per designer critique) === */
:focus-visible {
  outline: none;
  box-shadow: var(--v3-focus-ring);
  border-radius: var(--v3-radius-sm);
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}