/**
 * Typography Tokens - Centralized Design System
 *
 * This file consolidates all hard-coded typography values into a single source of truth.
 * All values maintain exact visual output and scaling behavior.
 *
 * Usage: Link this file in index.html BEFORE Tailwind CDN
 */

:root {
  /* ============================================
     FONT SIZES
     ============================================ */

  /* Scaled page content (viewed in page viewer) */
  --font-size-page-card: 0.5rem;      /* 8px - Card content on scaled pages */
  --font-size-page-label: 0.625rem;   /* 10px - Section labels on scaled pages */

  /* Edit modal content */
  --font-size-modal-card: 1rem;       /* 16px - Editable card content in modals */

  /* Modal and library section headers */
  --font-size-modal-header: 1.25rem;  /* 20px - Section headers in modals and library pages */

  /* ============================================
     LINE HEIGHTS
     ============================================ */

  --line-height-card: 120%;           /* Consistent card line height */

  /* ============================================
     ICON SIZES
     ============================================ */

  --icon-size-placeholder: 1.5rem;    /* 24px - Placeholder card icons */
  --icon-size-modal: 3rem;            /* 48px - Edit modal card icons */

  /* ============================================
     BRAND COLORS
     ============================================ */

  --color-brand-black: #161616;       /* Primary brand color */
}


/* ============================================
   GLOBAL ELEMENT STYLES
   ============================================ */

*, *::before, *::after {
  font-family: 'Inter', sans-serif;
}

h2 {
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* ============================================
   CUSTOM CHECKBOX COMPONENT (.cb-row)
   ============================================ */

.cb-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 8px;
  gap: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-bottom: 0;
}

.cb-row:hover {
  background: #e5e7eb;
}

.cb-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cb-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cb-box::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 1.5px solid #d1d5db;
  background: #ffffff;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.cb-box::after {
  content: '';
  position: relative;
  display: none;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5l2.5 2.5 4.5-4.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 1;
}

.cb-input:checked + .cb-box::before {
  background: #161616;
  border-color: #161616;
}

.cb-input:checked + .cb-box::after {
  display: block;
}

.cb-input:indeterminate + .cb-box::before {
  background: #161616;
  border-color: #161616;
}

.cb-input:indeterminate + .cb-box::after {
  display: block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5h6' stroke='white' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

.cb-row:hover .cb-input:indeterminate + .cb-box::before {
  background: #2d2d2d;
  border-color: #2d2d2d;
}

.cb-row:hover .cb-input:not(:checked) + .cb-box::before {
  border-color: #9ca3af;
}

.cb-row:hover .cb-input:checked + .cb-box::before {
  background: #2d2d2d;
  border-color: #2d2d2d;
}

.cb-input:focus-visible + .cb-box::before {
  outline: 2.5px solid #161616;
  outline-offset: 2px;
}

.cb-input:disabled + .cb-box::before {
  background: #f3f4f6;
  border-color: #e5e7eb;
}

.cb-input:disabled:checked + .cb-box::before {
  background: #f3f4f6;
  border-color: #e5e7eb;
}

.cb-input:disabled ~ .cb-label {
  color: #9ca3af;
}

.cb-row.cb-row--disabled:hover {
  background: transparent;
}

.cb-label {
  font-size: 14px;
  font-weight: 500;
  color: #343434;
  line-height: 1.4;
}

.cb-label--show-all {
  font-weight: 600;
  color: #161616;
}

.cb-row--show-all {
  margin-bottom: 2px;
}

.cb-show-all-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #ffffff;
  padding: 8px 8px 0;
}

.cb-show-all-sticky .cb-row--show-all {
  margin-bottom: 0;
}

.cb-show-all-sticky .cb-show-all-divider {
  margin-top: 8px;
  margin-bottom: 0;
}

.cb-show-all-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 6px 16px 8px;
}

/* H2 border with 40% transparency */
.border-brand-black-60 {
  border-color: rgba(22, 22, 22, 0.6);
}


/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Modal and Library Section Header */
.modal-section-header {
  font-size: var(--font-size-modal-header);
  font-weight: 400;
  color: #000;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-brand-black);
  padding-bottom: 0.5rem;
}

.modal-section-header.with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Font Size Utilities */
.text-page-card {
  font-size: var(--font-size-page-card);
}

.text-page-label {
  font-size: var(--font-size-page-label);
}

.text-modal-card {
  font-size: var(--font-size-modal-card);
}

/* Line Height Utilities */
.leading-card {
  line-height: var(--line-height-card);
}

/* Combined Typography Classes (for convenience) */
.text-page-card-default {
  font-size: var(--font-size-page-card);
  line-height: var(--line-height-card);
}

.text-modal-card-default {
  font-size: var(--font-size-modal-card);
  line-height: var(--line-height-card);
}

/* Color Utilities */
.text-brand-black {
  color: var(--color-brand-black);
}

.bg-brand-black {
  background-color: var(--color-brand-black);
}

.border-brand-black {
  border-color: var(--color-brand-black);
}

/* Hover State Utilities */
.hover\:text-brand-black:hover {
  color: var(--color-brand-black);
}

.hover\:bg-brand-black:hover {
  background-color: var(--color-brand-black);
}

.hover\:border-brand-black:hover {
  border-color: var(--color-brand-black);
}

/* Icon Size Utilities */
.icon-placeholder {
  width: var(--icon-size-placeholder);
  height: var(--icon-size-placeholder);
  color: #D1D5DB;
  transition: color 150ms ease-in-out;
}

#edit-modal .group:hover .icon-placeholder {
  color: var(--color-brand-black);
}

.placeholder-resource-card .group\/card:hover svg {
  color: var(--color-brand-black);
}

.icon-modal {
  width: var(--icon-size-modal);
  height: var(--icon-size-modal);
}


/* ============================================
   RESPONSIVE OVERRIDES (if needed)
   ============================================ */

/*
 * Note: Current implementation doesn't require responsive typography
 * changes since page scaling handles zoom at the container level.
 * Add @media queries here if responsive token changes are needed.
 */

/* Example responsive override (currently not needed):
@media (max-width: 768px) {
  :root {
    --font-size-modal-card: 0.875rem;
  }
}
*/


/* ============================================
   NAV TOOLTIP
   Rendered as a fixed-position singleton appended
   to <body> so sidebar overflow:hidden never clips it.
   Arrow points left toward the triggering button.
   ============================================ */

#nav-tooltip {
  display: none;
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: #ffffff;
  color: #111111;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transition: opacity 0.12s ease;
}

#nav-tooltip.nav-tooltip--visible {
  display: block;
  opacity: 1;
}

#nav-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: rgba(0, 0, 0, 0.08);
  margin-right: 1px;
}

#nav-tooltip::after {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #ffffff;
}


/* ============================================
   SIDEBAR HEIGHT-RESPONSIVE BEHAVIOR
   The nav uses justify-center so the list is
   vertically centered when it fits. The ul gets
   max-height: 100% so it is constrained to the
   nav's available height and scrolls when the
   list is taller than that space.
   ============================================ */

#sidebar nav > ul {
  max-height: 100%;
}

@media (max-height: 640px) {
  #sidebar > div {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  #sidebar > div > button:first-child {
    margin-bottom: 1rem;
  }
}


/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .scalable-content {
    transform: none !important;
    width: 8.5in !important;
    height: 11in !important;
  }

  .page-container {
    width: 8.5in !important;
    height: 11in !important;
    max-width: none !important;
    max-height: none !important;
    box-shadow: none !important;
  }

  .page-content-scalable {
    width: 8.5in !important;
    height: 11in !important;
    overflow: visible !important;
  }
}


/* ============================================
   MODAL ANIMATIONS
   ============================================ */

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-panel-in {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes modal-backdrop-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes modal-panel-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.97) translateY(6px); }
}

.modal-entering {
  animation: modal-backdrop-in 180ms ease forwards;
}

.modal-entering > * {
  animation: modal-panel-in 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-leaving {
  animation: modal-backdrop-out 140ms ease forwards;
}

.modal-leaving > * {
  animation: modal-panel-out 140ms ease forwards;
}


/* ============================================
   PAGE VIEWER TRANSITION
   ============================================ */

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-viewer-transitioning {
  pointer-events: none;
}

.page-viewer-content-enter {
  animation: page-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}


/* ============================================
   GRID SPINNER & CARD FADE-IN
   ============================================ */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes card-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.grid-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}

.grid-spinner__ring {
  width: 28px;
  height: 28px;
  border: 2.5px solid #e5e7eb;
  border-top-color: #161616;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

.cards-grid-enter .strategy-card,
.cards-grid-enter .resource-card {
  animation: card-fade-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cards-grid-enter .strategy-card:nth-child(1),
.cards-grid-enter .resource-card:nth-child(1)  { animation-delay: 0ms; }
.cards-grid-enter .strategy-card:nth-child(2),
.cards-grid-enter .resource-card:nth-child(2)  { animation-delay: 25ms; }
.cards-grid-enter .strategy-card:nth-child(3),
.cards-grid-enter .resource-card:nth-child(3)  { animation-delay: 50ms; }
.cards-grid-enter .strategy-card:nth-child(4),
.cards-grid-enter .resource-card:nth-child(4)  { animation-delay: 75ms; }
.cards-grid-enter .strategy-card:nth-child(5),
.cards-grid-enter .resource-card:nth-child(5)  { animation-delay: 100ms; }
.cards-grid-enter .strategy-card:nth-child(6),
.cards-grid-enter .resource-card:nth-child(6)  { animation-delay: 110ms; }
.cards-grid-enter .strategy-card:nth-child(n+7),
.cards-grid-enter .resource-card:nth-child(n+7) { animation-delay: 120ms; }


/* ============================================
   NAV BUTTON PRESS FEEDBACK
   ============================================ */

.nav-arrow:not([disabled]):active {
  transform: scale(0.9);
  transition: transform 80ms ease;
}


/* ============================================
   DEVELOPER NOTES
   ============================================ */

/*
 * MIGRATION GUIDE:
 *
 * Replace inline styles:
 *   style="font-size: 0.5rem; line-height: 120%;"
 *   → class="text-page-card leading-card"
 *
 * Replace arbitrary Tailwind values:
 *   class="text-[0.625rem]"
 *   → class="text-page-label"
 *
 * Replace brand color references:
 *   class="text-[#161616]"
 *   → class="text-brand-black"
 *
 * SCALING BEHAVIOR:
 * - Page content uses transform: scale() at container level
 * - These values remain consistent and scale with container
 * - Do NOT change these values to adjust visual size
 * - Adjust container scale factor instead
 *
 * BROWSER SUPPORT:
 * - CSS Custom Properties: IE 11+ (not supported), Edge 15+, All modern browsers
 * - All utility classes use standard CSS properties
 */