/**
 * iOS Typography System — typography.css
 * Apple Human Interface Guidelines 2026
 * Part of: /_design-system/apple-native/
 * Wavult Group · 2026-05-24
 *
 * iOS Type Scale (HIG exact):
 *   Large Title   34px  700   lh:41px
 *   Title 1       28px  700   lh:34px
 *   Title 2       22px  700   lh:28px
 *   Title 3       20px  600   lh:25px
 *   Headline      17px  600   lh:22px
 *   Body          17px  400   lh:22px
 *   Callout       16px  400   lh:21px
 *   Subheadline   15px  400   lh:20px
 *   Footnote      13px  400   lh:18px
 *   Caption 1     12px  400   lh:16px
 *   Caption 2     11px  400   lh:13px
 */

/* ─── Type Scale — Custom Properties ─────────────────────────────── */
:root {
  /* Font stacks */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text",    "Helvetica Neue", system-ui, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --font-mono:    "SF Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;

  /* Sizes */
  --text-large-title:  34px;
  --text-title1:       28px;
  --text-title2:       22px;
  --text-title3:       20px;
  --text-headline:     17px;
  --text-body:         17px;
  --text-callout:      16px;
  --text-subheadline:  15px;
  --text-footnote:     13px;
  --text-caption1:     12px;
  --text-caption2:     11px;

  /* Weights */
  --weight-large-title:  700;
  --weight-title1:       700;
  --weight-title2:       700;
  --weight-title3:       600;
  --weight-headline:     600;
  --weight-body:         400;
  --weight-callout:      400;
  --weight-subheadline:  400;
  --weight-footnote:     400;
  --weight-caption1:     400;
  --weight-caption2:     400;

  /* Line heights */
  --lh-large-title:  41px;
  --lh-title1:       34px;
  --lh-title2:       28px;
  --lh-title3:       25px;
  --lh-headline:     22px;
  --lh-body:         22px;
  --lh-callout:      21px;
  --lh-subheadline:  20px;
  --lh-footnote:     18px;
  --lh-caption1:     16px;
  --lh-caption2:     13px;

  /* iOS System Colors — strict light mode values */
  --c-blue:   #007AFF;
  --c-green:  #34C759;
  --c-orange: #FF9500;
  --c-red:    #FF3B30;
  --c-purple: #AF52DE;
  --c-teal:   #5AC8FA;
  --c-indigo: #5856D6;
  --c-yellow: #FFCC00;
  --c-pink:   #FF2D55;

  /* Semantic labels */
  --c-label:   #000000;
  --c-label-2: rgba(60,60,67,0.6);
  --c-label-3: rgba(60,60,67,0.3);
  --c-label-4: rgba(60,60,67,0.18);

  /* Backgrounds */
  --c-bg:   #F2F2F7;
  --c-bg-2: #FFFFFF;
  --c-separator: rgba(60,60,67,0.29);

  /* 8pt spacing grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-11: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-blue:   #0A84FF;
    --c-green:  #30D158;
    --c-orange: #FF9F0A;
    --c-red:    #FF453A;
    --c-purple: #BF5AF2;
    --c-label:   #FFFFFF;
    --c-label-2: rgba(235,235,245,0.6);
    --c-label-3: rgba(235,235,245,0.3);
    --c-label-4: rgba(235,235,245,0.16);
    --c-bg:   #000000;
    --c-bg-2: #1C1C1E;
    --c-separator: rgba(84,84,88,0.65);
  }
}

/* ─── Base Styles ─────────────────────────────────────────────────── */
body {
  font-family: var(--font-text);
  font-size:   var(--text-body);
  line-height: var(--lh-body);
  color:       var(--c-label);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* HTML heading defaults — semantic markup alignment */
h1 { font-size: var(--text-large-title); font-weight: var(--weight-large-title); line-height: var(--lh-large-title); letter-spacing: -0.025em; }
h2 { font-size: var(--text-title1);      font-weight: var(--weight-title1);      line-height: var(--lh-title1);      letter-spacing: -0.02em;  }
h3 { font-size: var(--text-title2);      font-weight: var(--weight-title2);      line-height: var(--lh-title2);      letter-spacing: -0.015em; }
h4 { font-size: var(--text-title3);      font-weight: var(--weight-title3);      line-height: var(--lh-title3);      letter-spacing: -0.01em;  }
h5 { font-size: var(--text-headline);    font-weight: var(--weight-headline);    line-height: var(--lh-headline);    }
h6 { font-size: var(--text-callout);     font-weight: var(--weight-callout);     line-height: var(--lh-callout);     }

/* ─── Utility Classes ─────────────────────────────────────────────── */
.ios-large-title  { font-size: var(--text-large-title); font-weight: var(--weight-large-title); line-height: var(--lh-large-title); letter-spacing: -0.025em; }
.ios-title-1      { font-size: var(--text-title1);      font-weight: var(--weight-title1);      line-height: var(--lh-title1);      letter-spacing: -0.02em;  }
.ios-title-2      { font-size: var(--text-title2);      font-weight: var(--weight-title2);      line-height: var(--lh-title2);      letter-spacing: -0.015em; }
.ios-title-3      { font-size: var(--text-title3);      font-weight: var(--weight-title3);      line-height: var(--lh-title3);      letter-spacing: -0.01em;  }
.ios-headline     { font-size: var(--text-headline);    font-weight: var(--weight-headline);    line-height: var(--lh-headline);    }
.ios-body         { font-size: var(--text-body);        font-weight: var(--weight-body);        line-height: var(--lh-body);        }
.ios-callout      { font-size: var(--text-callout);     font-weight: var(--weight-callout);     line-height: var(--lh-callout);     }
.ios-subheadline  { font-size: var(--text-subheadline); font-weight: var(--weight-subheadline); line-height: var(--lh-subheadline); }
.ios-footnote     { font-size: var(--text-footnote);    font-weight: var(--weight-footnote);    line-height: var(--lh-footnote);    }
.ios-caption-1    { font-size: var(--text-caption1);    font-weight: var(--weight-caption1);    line-height: var(--lh-caption1);    }
.ios-caption-2    { font-size: var(--text-caption2);    font-weight: var(--weight-caption2);    line-height: var(--lh-caption2);    }

/* ─── System-wide Typography Corrections ─────────────────────────── */

/* Large Title: 34px/700 — used as top-of-page section title */
.large-title {
  font-size:      34px   !important;
  font-weight:    700    !important;
  line-height:    41px   !important;
  letter-spacing: -0.025em !important;
}
.large-subtitle {
  font-size:   15px  !important;
  font-weight: 400   !important;
  line-height: 20px  !important;
}

/* Page Title → Title 1: 28px/700 */
.page-title,
.page-header-left .page-title {
  font-size:      28px   !important;
  font-weight:    700    !important;
  line-height:    34px   !important;
  letter-spacing: -0.02em !important;
}
.page-sub {
  font-size:   15px  !important;
  font-weight: 400   !important;
  line-height: 20px  !important;
}

/* Card group title → Title 3: 20px/600 */
.card-group-title {
  font-size:   20px  !important;
  font-weight: 600   !important;
  line-height: 25px  !important;
}

/* Card header title / calendar header → Headline: 17px/600 */
.card-title,
.calendar-header-title {
  font-size:   17px  !important;
  font-weight: 600   !important;
  line-height: 22px  !important;
}

/* Module / Project / Employee names → Headline: 17px/600 */
.module-name,
.project-name,
.emp-name {
  font-size:   17px  !important;
  font-weight: 600   !important;
  line-height: 22px  !important;
}

/* Module / Project descriptions → Subheadline: 15px/400 */
.module-desc,
.project-desc {
  font-size:   15px  !important;
  font-weight: 400   !important;
  line-height: 20px  !important;
}

/* Employee job title → Footnote: 13px/400 */
.emp-title {
  font-size:   13px  !important;
  font-weight: 400   !important;
  line-height: 18px  !important;
}

/* KPI / Stat values → Title 1: 28px/700 */
.kpi-value,
.stat-value,
.stat-val {
  font-size:      28px   !important;
  font-weight:    700    !important;
  line-height:    34px   !important;
  letter-spacing: -0.02em !important;
}

/* Compact stats (mini-stat) → Title 2: 22px/700 */
.mini-stat-value {
  font-size:      22px   !important;
  font-weight:    700    !important;
  line-height:    28px   !important;
  letter-spacing: -0.015em !important;
}

/* KPI / stat labels → Caption 2: 11px semibold (uppercase context) */
.kpi-label,
.stat-label {
  font-size:   11px  !important;
  font-weight: 600   !important;
  line-height: 13px  !important;
}

/* Status badges → Caption 2: 11px/600 */
.badge,
.module-badge,
.cal-urgency,
.badge-ok,
.badge-warn,
.badge-review,
.badge-na {
  font-size:   11px !important;
  font-weight: 600  !important;
  line-height: 1    !important;
}

/* ─── 8pt Grid Spacing Corrections ───────────────────────────────── */

/* cockpit.html — KPI grid: gap 12px → 16px */
.kpi-grid {
  gap: 16px !important;
}

/* cockpit.html — KPI card padding: 18px → 20px */
.kpi-card {
  padding: 20px !important;
}

/* people.html — employee list cell: min 44px tap target */
.emp-card {
  min-height: 44px    !important;
  padding:    12px 16px !important;
}

/* projects.html — kanban/project card padding: 18px → 20px */
.project-card {
  padding: 20px !important;
}

/* ─── Touch Interactions — iOS native feel ───────────────────────── */
.kpi-card,
.module-card,
.template-card,
.project-card,
.scenario-btn,
.emp-card {
  transition: opacity 0.15s ease,
              transform 0.13s cubic-bezier(0.32, 0.72, 0, 1) !important;
  will-change: opacity, transform;
}

/* Hover: scale stays 1.0, opacity to 0.75 */
.kpi-card:hover,
.module-card:hover,
.template-card:hover {
  opacity:   0.75     !important;
  transform: scale(1) !important;
}

/* Active: press-in scale 0.97 */
.kpi-card:active,
.module-card:active,
.template-card:active,
.project-card:active,
.scenario-btn:active,
.emp-card:active {
  transform: scale(0.97) !important;
  opacity:   1           !important;
}

/* ─── Tap Target Minimums ─────────────────────────────────────────── */
.btn:not(.btn-sm),
.nav-add-btn,
.tab-item,
.submit-btn,
.dept-chip,
.nav-item,
.os-nav-item {
  min-height: 44px !important;
}
.btn-sm {
  min-height: 32px !important; /* toolbar context — per HIG exception */
}

/* Minimum tap area for interactive links */
button,
[role="button"] {
  min-height: 44px;
  min-width:  44px;
}