/*
 * Shared Components
 * ────────────────────────────────────────────────
 * Import after tokens.css:
 *   <link rel="stylesheet" href="../../shared/styles/tokens.css">
 *   <link rel="stylesheet" href="../../shared/styles/components.css">
 *
 * All components use the token variables from tokens.css.
 * Override any style locally in your own <style> block.
 *
 * TABLE OF CONTENTS
 * ─────────────────
 * 1. WDS Text Styles
 * 2. Phone Frame
 * 3. Buttons
 * 4. Cards
 * 5. Badges & Pills
 * 6. Nav Bar
 * 7. Banners & Callouts
 * 8. Form Controls
 * 9. Modal / Overlay
 * 10. Skeleton Loaders
 * 11. Utilities
 */


/* ═══════════════════════════════════════════════
   1. WDS TEXT STYLES
   ═══════════════════════════════════════════════

   Maps to WDS Figma text styles (Display, Title, Body, Caption, Callout).
   Each style has a regular and semibold variant.

   Usage:
     <span class="display1">Hero text</span>
     <h2 class="title1-semibold">Section Header</h2>
     <p class="body1">Paragraph text</p>
     <span class="caption text-secondary">Fine print</span>

   Pair with a color utility or inline style to set text color:
     <p class="body2 text-secondary">Description</p>
     <p class="body1" style="color: var(--content-positive)">Success</p>
*/

/* Display 1 — 32/36 — large hero text */
.display1 {
  font-family: var(--font-family-base);
  font-size: var(--font-size-display1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display1);
}
.display1-semibold {
  font-family: var(--font-family-base);
  font-size: var(--font-size-display1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-display1);
}

/* Display 2 — 24/32 — standing status, large numbers */
.display2 {
  font-family: var(--font-family-base);
  font-size: var(--font-size-display2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-display2);
}
.display2-semibold {
  font-family: var(--font-family-base);
  font-size: var(--font-size-display2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-display2);
}

/* Title 1 — 18/24 — section headers */
.title1 {
  font-family: var(--font-family-base);
  font-size: var(--font-size-title1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-title1);
}
.title1-semibold {
  font-family: var(--font-family-base);
  font-size: var(--font-size-title1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-title1);
}

/* Title 2 — 16/20 — subsection headers */
.title2 {
  font-family: var(--font-family-base);
  font-size: var(--font-size-title2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-title2);
}
.title2-semibold {
  font-family: var(--font-family-base);
  font-size: var(--font-size-title2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-title2);
}

/* Body 1 — 14/20 — body paragraphs */
.body1 {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body1);
}
.body1-semibold {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body1);
}

/* Body 2 — 13/18 — secondary body, descriptions */
.body2 {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body2);
}
.body2-semibold {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body2);
}

/* Caption — 12/16 — fine print */
.caption {
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-caption);
}
.caption-semibold {
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-caption);
}

/* Callout — 11/14 — smallest text */
.callout {
  font-family: var(--font-family-base);
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-callout);
}
.callout-semibold {
  font-family: var(--font-family-base);
  font-size: var(--font-size-callout);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-callout);
}


/* ═══════════════════════════════════════════════
   2. PHONE FRAME
   ═══════════════════════════════════════════════

   HTML structure:
   <div class="phone-frame">
     <div class="phone-notch"></div>
     <div class="phone-screen">
       <div class="phone-status-bar">
         <span class="phone-time">9:41</span>
         <span class="phone-status-icons">
           <svg>...</svg>  (signal)
           <svg>...</svg>  (wifi)
           <svg>...</svg>  (battery)
         </span>
       </div>
       <div class="phone-content">
         <!-- your prototype content here -->
       </div>
       <div class="phone-home-indicator"></div>
     </div>
   </div>
*/

.phone-frame {
  width: calc(var(--phone-width) + var(--phone-frame-stroke) * 2);
  height: calc(var(--phone-height) + var(--phone-frame-stroke) * 2);
  background: var(--phone-frame-color);
  border-radius: calc(var(--phone-frame-radius) + var(--phone-frame-stroke));
  padding: var(--phone-frame-stroke);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.12),
    0 40px 80px rgba(0, 0, 0, 0.16);
  position: relative;
  flex-shrink: 0;
}

.phone-notch {
  position: absolute;
  top: calc(var(--phone-frame-stroke) + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: var(--phone-notch-width);
  height: var(--phone-notch-height);
  background: var(--phone-frame-color);
  border-radius: 20px;
  z-index: 10;
}

.phone-screen {
  width: var(--phone-width);
  height: var(--phone-height);
  background: var(--color-bg);
  border-radius: var(--phone-frame-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.phone-status-bar {
  flex-shrink: 0;
  height: var(--phone-status-bar-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  position: relative;
  z-index: 5;
}

.phone-time {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}

.phone-status-icons {
  display: flex;
  gap: 6px;
  align-items: center;
}

.phone-status-icons svg {
  width: auto;
  height: 12px;
  fill: currentColor;
}

.phone-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.phone-home-indicator {
  flex-shrink: 0;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-home-indicator::after {
  content: '';
  width: var(--phone-home-indicator-width);
  height: 5px;
  background: var(--color-text);
  opacity: 0.2;
  border-radius: var(--radius-pill);
}

/* Centered phone layout (wrap your frame in this) */
.phone-viewport {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--color-bg-tertiary);
}

/* Responsive: remove frame on small screens */
@media (max-width: 430px) {
  .phone-frame {
    width: 100%;
    height: 100vh;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .phone-notch { display: none; }
  .phone-screen { border-radius: 0; height: 100%; }
  .phone-viewport { padding: 0; min-height: auto; }
}


/* ═══════════════════════════════════════════════
   3. BUTTONS
   ═══════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  padding: 12px var(--space-5);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}

.btn:active { transform: scale(0.97); }

/* Primary: brand yellow */
.btn-primary {
  background: var(--color-brand-yellow);
  color: var(--color-brand-black);
}

.btn-primary:hover {
  background: #f0d800;
}

/* Secondary: dark filled */
.btn-secondary {
  background: var(--content-primary);
  color: var(--background-canvas-default);
}

.btn-secondary:hover {
  opacity: 0.85;
}

/* Tertiary Transparent: light grey filled, no border. Uses the container-
   level subtle token (instead of canvas-subtle) so the button stays visibly
   distinct from the page background in dark mode, where canvas-subtle ==
   canvas-default. */
.btn-tertiary,
.btn-ghost {
  background: var(--background-container-opaque-subtle);
  color: var(--content-primary);
  border: none;
}

.btn-tertiary:hover,
.btn-ghost:hover {
  background: var(--background-canvas-inset);
}

/* Tertiary Hollow: outline only, no fill */
.btn-hollow {
  background: transparent;
  color: var(--content-primary);
  border: 1.5px solid var(--stroke-container-default);
}

.btn-hollow:hover {
  background: var(--background-canvas-subtle);
}

/* Inverse: light in light mode, dark in dark mode */
.btn-inverse {
  background: var(--background-canvas-default);
  color: var(--content-primary);
  border: none;
}

.btn-inverse:hover {
  opacity: 0.85;
}

html.dark-mode .btn-inverse {
  background: var(--content-primary);
  color: var(--background-canvas-default);
}

/* Danger / Destructive */
.btn-danger {
  background: var(--color-error);
  color: var(--color-neutrals-opaque-0);
}

.btn-danger:hover {
  background: #d13438;
}

/* Sizes */
.btn-sm { font-size: var(--font-size-sm); padding: 8px var(--space-3); }
.btn-lg { font-size: var(--font-size-md); padding: 16px var(--space-6); }
.btn-block { width: 100%; }
.btn-pill { border-radius: var(--radius-full); }

/* Disabled */
.btn:disabled, .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}


/* ═══════════════════════════════════════════════
   4. CARDS
   ═══════════════════════════════════════════════ */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: box-shadow var(--transition-fast);
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  box-shadow: var(--shadow-md);
}

.card-image {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  margin-bottom: var(--space-4);
}

.card-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.card-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.card-footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}


/* ═══════════════════════════════════════════════
   5. BADGES & PILLS
   ═══════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  line-height: 1.2;
}

.badge-neutral {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.badge-success {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.badge-error {
  background: var(--color-error-subtle);
  color: var(--color-error);
}

.badge-warning {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

.badge-info {
  background: var(--color-info-subtle);
  color: var(--color-info);
}

.pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pill:hover { background: var(--color-border); color: var(--color-text); }
.pill.is-active { background: var(--color-brand-black); color: var(--color-brand-white); }


/* ═══════════════════════════════════════════════
   6. NAV BAR (in-phone navigation)
   ═══════════════════════════════════════════════ */

.nav-bar {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  position: relative;
  flex-shrink: 0;
}

.nav-bar-back {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  margin-left: calc(var(--space-2) * -1);
}

.nav-bar-back svg {
  width: 20px;
  height: 20px;
}

.nav-bar-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
}

.nav-bar-action {
  margin-left: auto;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}

/* Bottom tab bar */
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

.tab-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  color: var(--color-text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-3);
  transition: color var(--transition-fast);
}

.tab-bar-item svg { width: 24px; height: 24px; }
.tab-bar-item.is-active { color: var(--color-text); }


/* ═══════════════════════════════════════════════
   7. BANNERS & CALLOUTS
   ═══════════════════════════════════════════════ */

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.banner-info {
  background: var(--color-info-subtle);
  color: var(--color-text);
  border-left: 3px solid var(--color-info);
}

.banner-success {
  background: var(--color-success-subtle);
  color: var(--color-text);
  border-left: 3px solid var(--color-success);
}

.banner-warning {
  background: var(--color-warning-subtle);
  color: var(--color-text);
  border-left: 3px solid var(--color-warning);
}

.banner-error {
  background: var(--color-error-subtle);
  color: var(--color-text);
  border-left: 3px solid var(--color-error);
}

.banner-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
}

.banner-text { flex: 1; }
.banner-text strong { font-weight: var(--font-weight-semibold); }


/* ═══════════════════════════════════════════════
   8. FORM CONTROLS
   ═══════════════════════════════════════════════ */

.input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  padding: 12px var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
  outline: none;
}

.input::placeholder { color: var(--color-text-tertiary); }
.input:focus { border-color: var(--color-brand-black); box-shadow: 0 0 0 3px var(--color-focus-ring); }
.input:disabled { opacity: 0.5; cursor: not-allowed; }

.input-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.toggle {
  position: relative;
  width: 51px;
  height: 31px;
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.toggle.is-on { background: var(--color-success); }
.toggle.is-on::after { transform: translateX(20px); }


/* ═══════════════════════════════════════════════
   9. MODAL / OVERLAY
   ═══════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  max-width: 480px;
  width: 90%;
  box-shadow: var(--shadow-xl);
  transform: translateY(16px) scale(0.97);
  transition: transform var(--transition-normal);
}

.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
}

.modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-3);
}

.modal-body {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
}

.modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* Bottom sheet (for phone prototypes) */
.bottom-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-5) var(--space-5) var(--space-8);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: var(--z-overlay);
}

.bottom-sheet.is-open { transform: translateY(0); }

.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
  margin: 0 auto var(--space-4);
}


/* ═══════════════════════════════════════════════
   10. SKELETON LOADERS
   ═══════════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(90deg,
    var(--color-bg-tertiary) 25%,
    var(--color-bg-secondary) 50%,
    var(--color-bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 14px;
  margin-bottom: var(--space-2);
  width: 100%;
}

.skeleton-text:last-child { width: 60%; }

.skeleton-heading {
  height: 20px;
  width: 40%;
  margin-bottom: var(--space-3);
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-image {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-md);
}

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


/* ═══════════════════════════════════════════════
   11. UTILITIES
   ═══════════════════════════════════════════════ */

/* Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Text */
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-bold { font-weight: var(--font-weight-bold); }
.text-semibold { font-weight: var(--font-weight-semibold); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-center { text-align: center; }
.text-mono { font-family: var(--font-mono); }

/* Spacing */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }

/* Layout */
.w-full { width: 100%; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 960px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Visibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Divider */
.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: var(--space-4) 0;
}