/* ============================================================================
   iOS 26 — Liquid Glass design system for fixo-services.com / Tyten AI
   Loads after Tailwind/Bootstrap inline styles. Layers cleanly on top.
   ----------------------------------------------------------------------------
   Conventions
   - All tokens are CSS custom properties scoped to :root + [data-theme="light"]
   - Components use the `.ios26-` prefix to avoid name collisions
   - Existing glass-nav rules in base.html are kept; ios26 just retunes them
   ========================================================================= */

:root {
  /* ── Spacing scale (4px grid, iOS HIG-aligned) ── */
  --ios-space-1:  4px;
  --ios-space-2:  8px;
  --ios-space-3:  12px;
  --ios-space-4:  16px;
  --ios-space-5:  20px;
  --ios-space-6:  24px;
  --ios-space-8:  32px;
  --ios-space-10: 40px;
  --ios-space-12: 48px;
  --ios-space-16: 64px;
  --ios-space-24: 96px;

  /* ── Continuous-curve radii ── */
  --ios-radius-xs:    6px;
  --ios-radius-sm:    8px;
  --ios-radius-md:    12px;
  --ios-radius-lg:    16px;
  --ios-radius-xl:    20px;
  --ios-radius-2xl:   28px;
  --ios-radius-pill:  999px;

  /* ── Type ── */
  --ios-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ios-font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, "SF Pro Display", system-ui, sans-serif;
  --ios-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (iOS HIG semantic — adapted for desktop web) */
  --ios-text-caption-2:   11px;     /* small captions only */
  --ios-text-caption-1:   12px;     /* table headers, helper text, eyebrow labels */
  --ios-text-footnote:    13px;
  --ios-text-subhead:     15px;
  --ios-text-callout:     16px;
  --ios-text-body:        16px;
  --ios-text-headline:    17px;
  --ios-text-title-3:     20px;
  --ios-text-title-2:     22px;
  --ios-text-title-1:     28px;
  --ios-text-large-title: 34px;

  --ios-leading-tight:  1.2;
  --ios-leading-snug:   1.3;
  --ios-leading-normal: 1.45;
  --ios-leading-loose:  1.6;

  /* Weights — SF Pro semibold is 590 not 600; we use 600 for compatibility */
  --ios-weight-regular:   400;
  --ios-weight-medium:    500;
  --ios-weight-semibold:  600;
  --ios-weight-bold:      700;

  /* ── Brand & accents (vibrant, iOS-26-flavoured) ── */
  --ios-brand-blue:       #007aff;     /* iOS system blue */
  --ios-brand-indigo:     #5856d6;
  --ios-brand-purple:     #6366f1;     /* matches existing app indigo-600 */
  --ios-brand-purple-2:   #4f46e5;
  --ios-brand-mint:       #00c7be;
  --ios-brand-pink:       #ff2d55;

  /* Primary action (kept indigo to match daily-driver pages) */
  --ios-action:           var(--ios-brand-purple-2);
  --ios-action-hover:     #4338ca;
  --ios-action-active:    #3730a3;
  --ios-action-tint-bg:   rgba(99, 102, 241, 0.12);
  --ios-action-ring:      rgba(99, 102, 241, 0.4);

  /* ── Status palette (all WCAG AA-safe on light/dark) ── */
  --ios-success:        #16a34a;
  --ios-success-bg:     #dcfce7;
  --ios-success-tint:   rgba(22, 163, 74, 0.12);
  --ios-warning:        #b45309;     /* amber-700 — passes AA, fixes F1.2.5 */
  --ios-warning-bg:     #fef3c7;
  --ios-warning-tint:   rgba(180, 83, 9, 0.14);
  --ios-danger:         #dc2626;
  --ios-danger-bg:      #fee2e2;
  --ios-danger-tint:    rgba(220, 38, 38, 0.14);
  --ios-info:           #1d4ed8;
  --ios-info-bg:        #dbeafe;
  --ios-info-tint:      rgba(29, 78, 216, 0.12);
  --ios-neutral:        #4b5563;
  --ios-neutral-bg:     #f3f4f6;
  --ios-neutral-tint:   rgba(75, 85, 99, 0.10);

  /* ── Surfaces (light-mode defaults; dark variants below) ── */
  --ios-bg-app:           #f7f8fa;          /* very subtle warm white */
  --ios-bg-app-grad:      none;              /* solid; no gradient — keeps body uniform with page chrome */
  --ios-bg-surface:       #ffffff;
  --ios-bg-surface-2:     #f3f4f6;
  --ios-bg-elevated:      #ffffff;

  /* Liquid Glass surfaces: translucent, backdrop-filtered */
  --ios-glass-bg:         rgba(255, 255, 255, 0.62);
  --ios-glass-bg-strong:  rgba(255, 255, 255, 0.78);
  --ios-glass-border:     rgba(255, 255, 255, 0.6);
  --ios-glass-blur:       saturate(1.6) blur(22px);
  --ios-glass-blur-strong: saturate(1.8) blur(34px);
  --ios-glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* ── Text ── */
  --ios-text-strong:      #0b0d12;     /* near-black, saturated */
  --ios-text-default:     #1c1c1e;
  --ios-text-secondary:   #3c3c43;
  --ios-text-label:       #44454a;
  --ios-text-muted:       #6b6e73;     /* AA-safe on app bg, fixes F1.2.4 */
  --ios-text-tertiary:    #8e8e93;
  --ios-text-inverse:     #ffffff;

  /* ── Borders ── */
  --ios-border-subtle:    rgba(60, 60, 67, 0.08);
  --ios-border:           rgba(60, 60, 67, 0.14);
  --ios-border-strong:    rgba(60, 60, 67, 0.24);
  --ios-divider:          rgba(60, 60, 67, 0.10);

  /* ── Shadow scale (with hint of color, like iOS) ── */
  --ios-shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --ios-shadow-md:    0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.05);
  --ios-shadow-lg:    0 10px 28px rgba(15, 23, 42, 0.10), 0 6px 16px rgba(15, 23, 42, 0.06);
  --ios-shadow-xl:    0 24px 56px rgba(15, 23, 42, 0.16), 0 10px 24px rgba(15, 23, 42, 0.08);
  --ios-shadow-glass: 0 1px 1px rgba(15, 23, 42, 0.06), 0 8px 32px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* ── Motion ── */
  --ios-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ios-ease-out:       cubic-bezier(0.0, 0, 0.2, 1);
  --ios-ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ios-spring:         cubic-bezier(0.34, 1.56, 0.64, 1);
  --ios-duration-fast:  150ms;
  --ios-duration-base:  250ms;
  --ios-duration-slow:  400ms;

  /* ── Focus ring (resolves F1.10.1) ── */
  --ios-focus-ring:     0 0 0 3px var(--ios-action-ring);
}

/* Dark mode tokens (data-theme="dark" or default) */
[data-theme="dark"], :root:not([data-theme="light"]) {
  --ios-bg-app:           #0a0a0f;
  --ios-bg-app-grad:      none;              /* solid; no surrounding gradient */
  --ios-bg-surface:       rgba(28, 28, 30, 0.86);
  --ios-bg-surface-2:     rgba(44, 44, 46, 0.6);
  --ios-bg-elevated:      rgba(58, 58, 60, 0.88);

  --ios-glass-bg:         rgba(28, 28, 32, 0.62);
  --ios-glass-bg-strong:  rgba(28, 28, 32, 0.82);
  --ios-glass-border:     rgba(255, 255, 255, 0.10);
  --ios-glass-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --ios-text-strong:      #f5f5f7;
  --ios-text-default:     #ebebf0;
  --ios-text-secondary:   #d1d1d6;
  --ios-text-label:       #c7c7cc;
  --ios-text-muted:       #98989f;
  --ios-text-tertiary:    #6c6c72;
  --ios-text-inverse:     #0b0d12;

  --ios-border-subtle:    rgba(255, 255, 255, 0.06);
  --ios-border:           rgba(255, 255, 255, 0.10);
  --ios-border-strong:    rgba(255, 255, 255, 0.18);
  --ios-divider:          rgba(255, 255, 255, 0.08);

  --ios-shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --ios-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --ios-shadow-lg:    0 10px 28px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.4);
  --ios-shadow-xl:    0 24px 56px rgba(0, 0, 0, 0.7), 0 10px 24px rgba(0, 0, 0, 0.5);
  --ios-shadow-glass: 0 1px 1px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ============================================================================
   FOUNDATION — body, scrolling, focus
   ========================================================================= */

body {
  font-family: var(--ios-font-sans);
  font-size: var(--ios-text-body);
  line-height: var(--ios-leading-normal);
  color: var(--ios-text-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Light-mode body bg: subtle gradient like iOS app surfaces */
[data-theme="light"] body { background: var(--ios-bg-app) !important; }
[data-theme="light"] main.bg-gray-900,
[data-theme="light"] .bg-gray-900 { background: var(--ios-bg-app) !important; }

/* Dark-mode body bg: deep blue-black with radial highlight */
[data-theme="dark"] body, :root:not([data-theme="light"]) body { background: var(--ios-bg-app) !important; }

/* Selection */
::selection { background: var(--ios-action-tint-bg); color: var(--ios-text-strong); }

/* Focus ring (F1.10.1) — applied via :focus-visible only so mouse users don't see it */
:where(button, a, input, textarea, select, [tabindex]):focus { outline: none; }
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ios-focus-ring);
  border-radius: var(--ios-radius-sm);
}

/* Smooth scrolling for in-page anchors */
html { scroll-behavior: smooth; }

/* Page <main> — full bleed by default. Pages opt INTO a constrained width via
   class="ios26-prose" if the page is prose-heavy. This avoids the "black-inside-blue"
   boxed-in effect on dark admin pages where the body and page chrome differ. */
main { padding: 0; }
main.ios26-prose,
main[data-layout="prose"] {
  max-width: 1320px;
  margin: 0 auto;
  padding: var(--ios-space-6) clamp(var(--ios-space-4), 4vw, var(--ios-space-10));
}

/* ============================================================================
   TYPOGRAPHY (resolves F1.3.x)
   ========================================================================= */

h1, .ios26-title-1 {
  font-family: var(--ios-font-rounded);
  font-size: var(--ios-text-title-1);
  font-weight: var(--ios-weight-bold);
  line-height: var(--ios-leading-tight);
  letter-spacing: -0.02em;
  color: var(--ios-text-strong);
  margin: var(--ios-space-2) 0 var(--ios-space-4);
}
h1.ios26-display, .ios26-display {
  font-size: var(--ios-text-large-title);
  letter-spacing: -0.025em;
}
h2, .ios26-title-2 {
  font-family: var(--ios-font-rounded);
  font-size: var(--ios-text-title-2);
  font-weight: var(--ios-weight-semibold);
  line-height: var(--ios-leading-tight);
  letter-spacing: -0.015em;
  color: var(--ios-text-strong);
}
h3, .ios26-title-3 {
  font-size: var(--ios-text-title-3);
  font-weight: var(--ios-weight-semibold);
  line-height: var(--ios-leading-snug);
  color: var(--ios-text-strong);
}
.ios26-headline {
  font-size: var(--ios-text-headline);
  font-weight: var(--ios-weight-semibold);
  color: var(--ios-text-strong);
}

/* Section eyebrow label — replaces the gray-on-gray section labels (resolves F1.2.3) */
.ios26-section-label {
  font-size: var(--ios-text-caption-1);
  font-weight: var(--ios-weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ios-text-muted);
  display: inline-block;
}

/* Page subtitle / hero secondary text */
.ios26-subtitle, .ios26-page-subtitle {
  font-size: var(--ios-text-callout);
  color: var(--ios-text-secondary);
  margin-top: calc(-1 * var(--ios-space-3));
  margin-bottom: var(--ios-space-5);
}

/* Helper / muted (resolves F1.2.4 + F1.3.5 by raising contrast + size floor) */
.ios26-helper, .text-muted, small.ios26-small {
  font-size: var(--ios-text-footnote);
  color: var(--ios-text-muted);
}

/* Form labels (resolves F1.3.7 + F1.2.7 — single weight + AA color) */
.ios26-label, .ios26-form label {
  display: block;
  font-size: var(--ios-text-footnote);
  font-weight: var(--ios-weight-medium);
  color: var(--ios-text-label);
  margin-bottom: var(--ios-space-1);
  letter-spacing: 0.005em;
}
.ios26-label--required::after { content: " *"; color: var(--ios-danger); font-weight: 700; }

/* ============================================================================
   LIQUID GLASS NAVBAR (extends existing .glass-nav, retunes for iOS 26)
   ========================================================================= */

.glass-nav, .ios26-nav {
  background: var(--ios-glass-bg) !important;
  -webkit-backdrop-filter: var(--ios-glass-blur) !important;
  backdrop-filter: var(--ios-glass-blur) !important;
  border-bottom: 1px solid var(--ios-glass-border) !important;
  box-shadow: var(--ios-shadow-glass) !important;
}
[data-theme="light"] .glass-nav,
[data-theme="light"] .ios26-nav {
  background: var(--ios-glass-bg-strong) !important;
}

/* Nav dropdown toggles (capsule pills, iOS-flavoured) */
.glass-nav .dropdown-toggle, .ios26-nav .ios26-nav-link {
  border-radius: var(--ios-radius-md) !important;
  padding: 6px 12px !important;
  font-size: var(--ios-text-footnote) !important;
  font-weight: var(--ios-weight-medium) !important;
  letter-spacing: 0;
  color: var(--ios-text-strong);
  transition: background var(--ios-duration-fast) var(--ios-ease),
              color var(--ios-duration-fast) var(--ios-ease);
}
[data-theme="light"] .glass-nav .dropdown-toggle { color: var(--ios-text-strong) !important; }
.glass-nav .dropdown-toggle::after { display: none; }
.glass-nav .dropdown-toggle:hover {
  background: var(--ios-action-tint-bg) !important;
  color: var(--ios-action) !important;
}

/* Active section indicator (resolves F1.4.9) */
.glass-nav .dropdown.is-active > .dropdown-toggle,
.glass-nav .nav-link-pill.is-active {
  background: var(--ios-action-tint-bg) !important;
  color: var(--ios-action) !important;
  position: relative;
}
.glass-nav .dropdown.is-active > .dropdown-toggle::before {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: -10px;
  height: 2px; border-radius: 999px;
  background: var(--ios-action);
}

/* Dropdown menus — Liquid Glass cards */
.glass-nav .dropdown-menu, .ios26-dropdown-menu {
  background: var(--ios-glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--ios-glass-blur-strong) !important;
  backdrop-filter: var(--ios-glass-blur-strong) !important;
  border: 1px solid var(--ios-glass-border) !important;
  border-radius: var(--ios-radius-lg) !important;
  box-shadow: var(--ios-shadow-xl) !important;
  padding: var(--ios-space-2) !important;
  margin-top: var(--ios-space-2) !important;
  min-width: 240px;
}
.glass-nav .dropdown-item, .ios26-dropdown-item {
  border-radius: var(--ios-radius-sm) !important;
  padding: 8px 12px !important;
  font-size: var(--ios-text-subhead) !important;
  font-weight: var(--ios-weight-medium) !important;
  color: var(--ios-text-default) !important;
  background: transparent !important;
  /* Resolves F1.4.6 — strip any inline gradient backgrounds */
  background-image: none !important;
  transition: background var(--ios-duration-fast) var(--ios-ease);
}
.glass-nav .dropdown-item:hover,
.glass-nav .dropdown-item:focus,
.ios26-dropdown-item:hover {
  background: var(--ios-action-tint-bg) !important;
  color: var(--ios-action) !important;
}
/* Single accent item — used sparingly (e.g. AI Demo in Commercial menu) */
.ios26-dropdown-item--accent, .glass-nav .ios26-dropdown-item--accent {
  background: var(--ios-action-tint-bg) !important;
  color: var(--ios-action) !important;
  font-weight: var(--ios-weight-semibold) !important;
}
.ios26-dropdown-item--accent:hover, .glass-nav .ios26-dropdown-item--accent:hover {
  background: rgba(99, 102, 241, 0.18) !important;
}

.glass-nav .dropdown-divider {
  border-color: var(--ios-divider) !important;
  margin: var(--ios-space-2) calc(-1 * var(--ios-space-2)) !important;
}
.glass-nav .dropdown-header {
  font-size: var(--ios-text-caption-1) !important;
  font-weight: var(--ios-weight-semibold) !important;
  color: var(--ios-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--ios-space-2) var(--ios-space-3) var(--ios-space-1);
}

/* ============================================================================
   BREADCRUMBS (resolves F1.4.7)
   ========================================================================= */

.ios26-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ios-space-2);
  font-size: var(--ios-text-footnote);
  color: var(--ios-text-muted);
  margin: 0 0 var(--ios-space-3);
  list-style: none;
  padding: 0;
}
.ios26-breadcrumb a {
  color: var(--ios-text-secondary);
  text-decoration: none;
  transition: color var(--ios-duration-fast) var(--ios-ease);
  border-radius: var(--ios-radius-xs);
  padding: 2px 4px;
}
.ios26-breadcrumb a:hover { color: var(--ios-action); background: var(--ios-action-tint-bg); }
.ios26-breadcrumb .ios26-breadcrumb-sep {
  color: var(--ios-text-tertiary);
  font-weight: var(--ios-weight-medium);
}
.ios26-breadcrumb [aria-current="page"] {
  color: var(--ios-text-strong);
  font-weight: var(--ios-weight-medium);
}

/* ============================================================================
   CARDS (Liquid Glass + flat variants)
   ========================================================================= */

.ios26-card {
  background: var(--ios-bg-surface);
  border: 1px solid var(--ios-border-subtle);
  border-radius: var(--ios-radius-lg);
  box-shadow: var(--ios-shadow-sm);
  padding: var(--ios-space-6);
  transition: transform var(--ios-duration-base) var(--ios-ease),
              box-shadow var(--ios-duration-base) var(--ios-ease);
}
.ios26-card.is-hoverable:hover,
.ios26-card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--ios-shadow-md);
}
.ios26-card--glass {
  background: var(--ios-glass-bg);
  -webkit-backdrop-filter: var(--ios-glass-blur);
  backdrop-filter: var(--ios-glass-blur);
  border: 1px solid var(--ios-glass-border);
  box-shadow: var(--ios-shadow-glass);
}
.ios26-card--elevated { box-shadow: var(--ios-shadow-md); }
.ios26-card--floating { box-shadow: var(--ios-shadow-lg); }
.ios26-card--compact { padding: var(--ios-space-4); }
.ios26-card--inset {
  background: var(--ios-bg-surface-2);
  box-shadow: none;
  border: 1px solid var(--ios-border-subtle);
}

/* Card grid */
.ios26-cards-grid {
  display: grid;
  gap: var(--ios-space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.ios26-cards-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ios26-cards-grid--wide   { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* KPI / metric card */
.ios26-kpi {
  background: var(--ios-bg-surface);
  border: 1px solid var(--ios-border-subtle);
  border-radius: var(--ios-radius-lg);
  padding: var(--ios-space-5);
  display: flex; flex-direction: column; gap: var(--ios-space-2);
  position: relative;
  overflow: hidden;
  transition: all var(--ios-duration-base) var(--ios-ease);
}
.ios26-kpi:hover { transform: translateY(-2px); box-shadow: var(--ios-shadow-md); }
.ios26-kpi-value {
  font-family: var(--ios-font-rounded);
  font-size: var(--ios-text-title-1);
  font-weight: var(--ios-weight-bold);
  line-height: 1;
  color: var(--ios-text-strong);
  letter-spacing: -0.02em;
}
.ios26-kpi-label {
  font-size: var(--ios-text-footnote);
  font-weight: var(--ios-weight-medium);
  color: var(--ios-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ios26-kpi-trend {
  font-size: var(--ios-text-caption-1);
  color: var(--ios-text-secondary);
  display: inline-flex; align-items: center; gap: 4px;
}
.ios26-kpi-trend.is-up   { color: var(--ios-success); }
.ios26-kpi-trend.is-down { color: var(--ios-danger); }
/* Status accent bar on left edge */
.ios26-kpi--success { box-shadow: inset 4px 0 0 var(--ios-success), var(--ios-shadow-sm); }
.ios26-kpi--warning { box-shadow: inset 4px 0 0 var(--ios-warning), var(--ios-shadow-sm); }
.ios26-kpi--danger  { box-shadow: inset 4px 0 0 var(--ios-danger),  var(--ios-shadow-sm); }
.ios26-kpi--info    { box-shadow: inset 4px 0 0 var(--ios-info),    var(--ios-shadow-sm); }

/* ============================================================================
   BUTTONS (resolves F1.2.1, F1.2.2, F1.8.x)
   ========================================================================= */

.ios26-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ios-space-2);
  padding: 10px 16px;
  font-family: var(--ios-font-sans);
  font-size: var(--ios-text-subhead);
  font-weight: var(--ios-weight-semibold);
  line-height: 1;
  border-radius: var(--ios-radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ios-text-default);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--ios-duration-fast) var(--ios-ease),
              color var(--ios-duration-fast) var(--ios-ease),
              transform var(--ios-duration-fast) var(--ios-ease),
              box-shadow var(--ios-duration-fast) var(--ios-ease),
              border-color var(--ios-duration-fast) var(--ios-ease);
}
.ios26-btn:active { transform: translateY(1px) scale(0.99); }
.ios26-btn:disabled, .ios26-btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none;
}

/* Primary — solid action color */
.ios26-btn--primary {
  background: var(--ios-action);
  color: var(--ios-text-inverse);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ios26-btn--primary:hover { background: var(--ios-action-hover); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.ios26-btn--primary:active { background: var(--ios-action-active); }

/* Secondary — tinted bg, action color text */
.ios26-btn--secondary {
  background: var(--ios-action-tint-bg);
  color: var(--ios-action);
}
.ios26-btn--secondary:hover { background: rgba(99, 102, 241, 0.18); }

/* Ghost — no bg until hover */
.ios26-btn--ghost {
  background: transparent;
  color: var(--ios-text-default);
}
.ios26-btn--ghost:hover { background: var(--ios-bg-surface-2); }

/* Outline — border-only */
.ios26-btn--outline {
  background: transparent;
  border-color: var(--ios-border-strong);
  color: var(--ios-text-default);
}
.ios26-btn--outline:hover { background: var(--ios-bg-surface-2); border-color: var(--ios-action); color: var(--ios-action); }

/* Danger */
.ios26-btn--danger {
  background: var(--ios-danger);
  color: var(--ios-text-inverse);
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.ios26-btn--danger:hover { background: #b91c1c; box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3); }

/* Sizes */
.ios26-btn--sm { padding: 6px 10px; font-size: var(--ios-text-footnote); border-radius: var(--ios-radius-sm); }
.ios26-btn--lg { padding: 14px 22px; font-size: var(--ios-text-headline); border-radius: var(--ios-radius-lg); }

/* Capsule — pill shape (iOS 26 favourite) */
.ios26-btn--capsule { border-radius: var(--ios-radius-pill); padding: 8px 18px; }

/* Block / full-width */
.ios26-btn--block { width: 100%; }

/* ── Compatibility shims: existing Bootstrap .btn-* classes inherit iOS 26 feel ──
   These override Bootstrap 4 defaults globally so pages that haven't migrated
   to .ios26-btn still look consistent. */

/* Base shape applied to every .btn variant */
.btn {
  font-family: var(--ios-font-sans);
  font-weight: var(--ios-weight-semibold) !important;
  font-size: var(--ios-text-subhead);
  line-height: 1;
  border-radius: var(--ios-radius-md) !important;
  padding: 9px 16px !important;
  border-width: 1px;
  transition: background var(--ios-duration-fast) var(--ios-ease),
              border-color var(--ios-duration-fast) var(--ios-ease),
              color var(--ios-duration-fast) var(--ios-ease),
              box-shadow var(--ios-duration-fast) var(--ios-ease),
              transform var(--ios-duration-fast) var(--ios-ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-sm { padding: 6px 12px !important; font-size: var(--ios-text-footnote); border-radius: var(--ios-radius-sm) !important; }
.btn-lg { padding: 14px 22px !important; font-size: var(--ios-text-headline); border-radius: var(--ios-radius-lg) !important; }

/* Primary */
.btn-primary {
  background: var(--ios-action) !important;
  border-color: var(--ios-action) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--ios-action-hover) !important;
  border-color: var(--ios-action-hover) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
  color: #fff !important;
}

/* Secondary — flat tinted bg, action color text */
.btn-secondary {
  background: var(--ios-action-tint-bg) !important;
  border-color: transparent !important;
  color: var(--ios-action) !important;
  box-shadow: none !important;
}
.btn-secondary:hover, .btn-secondary:focus {
  background: rgba(99, 102, 241, 0.18) !important;
  color: var(--ios-action) !important;
}

/* Danger */
.btn-danger {
  background: var(--ios-danger) !important;
  border-color: var(--ios-danger) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-danger:hover, .btn-danger:focus {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
  color: #fff !important;
}

/* Success */
.btn-success {
  background: var(--ios-success) !important;
  border-color: var(--ios-success) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-success:hover, .btn-success:focus {
  background: #15803d !important;
  border-color: #15803d !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
  color: #fff !important;
}

/* Warning — uses AA-safe amber */
.btn-warning {
  background: var(--ios-warning) !important;
  border-color: var(--ios-warning) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-warning:hover, .btn-warning:focus {
  background: #92400e !important;
  border-color: #92400e !important;
  color: #fff !important;
}

/* Info */
.btn-info {
  background: var(--ios-info) !important;
  border-color: var(--ios-info) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(29, 78, 216, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-info:hover, .btn-info:focus { background: #1e40af !important; border-color: #1e40af !important; color: #fff !important; }

/* Light / Dark / Link — softer treatments */
.btn-light {
  background: var(--ios-bg-surface-2) !important;
  border-color: var(--ios-border-subtle) !important;
  color: var(--ios-text-default) !important;
  box-shadow: none !important;
}
.btn-light:hover, .btn-light:focus {
  background: var(--ios-bg-surface) !important;
  border-color: var(--ios-border) !important;
  color: var(--ios-text-strong) !important;
}
.btn-dark {
  background: var(--ios-text-strong) !important;
  border-color: var(--ios-text-strong) !important;
  color: #fff !important;
}
.btn-link {
  color: var(--ios-action) !important;
  text-decoration: none !important;
  font-weight: var(--ios-weight-medium) !important;
}
.btn-link:hover { color: var(--ios-action-hover) !important; text-decoration: underline !important; }

/* Outline variants — border-only */
.btn-outline-primary {
  background: transparent !important;
  border-color: var(--ios-action) !important;
  color: var(--ios-action) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--ios-action) !important; color: #fff !important;
}
.btn-outline-secondary {
  background: transparent !important;
  border-color: var(--ios-border-strong) !important;
  color: var(--ios-text-default) !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background: var(--ios-bg-surface-2) !important;
  border-color: var(--ios-action) !important;
  color: var(--ios-action) !important;
}
.btn-outline-danger {
  background: transparent !important;
  border-color: var(--ios-danger) !important;
  color: var(--ios-danger) !important;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background: var(--ios-danger) !important; color: #fff !important;
}
.btn-outline-success {
  background: transparent !important;
  border-color: var(--ios-success) !important;
  color: var(--ios-success) !important;
}
.btn-outline-success:hover, .btn-outline-success:focus {
  background: var(--ios-success) !important; color: #fff !important;
}

/* Block/full-width — keep Bootstrap behavior */
.btn-block { width: 100%; }

/* Disabled state */
.btn:disabled, .btn[disabled], .btn.disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Buildings-Create "Save All Changes" type giant action — wraps over .btn classes
   so this also applies if the template uses raw .btn-primary etc. */
.btn.btn-block.btn-lg { font-size: var(--ios-text-headline); }

/* "aum-btn" — the iOS-blue pill admin buttons used on AI Context / Postcode Coverage —
   keep iOS-blue (it's already aligned), but make it consistent with our action token
   for visual unity across the app. */
.aum-btn-primary {
  background: var(--ios-action) !important;
  border-color: var(--ios-action) !important;
  color: #fff !important;
}
.aum-btn-primary:hover { background: var(--ios-action-hover) !important; border-color: var(--ios-action-hover) !important; }

/* ============================================================================
   FORMS (resolves F1.6.x)
   ========================================================================= */

.ios26-field {
  display: grid;
  gap: var(--ios-space-1);
  margin-bottom: var(--ios-space-4);
}
.ios26-field input[type="text"],
.ios26-field input[type="email"],
.ios26-field input[type="password"],
.ios26-field input[type="search"],
.ios26-field input[type="tel"],
.ios26-field input[type="url"],
.ios26-field input[type="number"],
.ios26-field input[type="date"],
.ios26-field textarea,
.ios26-field select,
.ios26-input {
  padding: 10px 14px;
  font-size: var(--ios-text-subhead);
  font-family: var(--ios-font-sans);
  color: var(--ios-text-default);
  background: var(--ios-bg-surface);
  border: 1px solid var(--ios-border);
  border-radius: var(--ios-radius-md);
  transition: border-color var(--ios-duration-fast) var(--ios-ease),
              box-shadow var(--ios-duration-fast) var(--ios-ease),
              background var(--ios-duration-fast) var(--ios-ease);
  width: 100%;
}
.ios26-field input:focus,
.ios26-field textarea:focus,
.ios26-field select:focus,
.ios26-input:focus {
  outline: none;
  border-color: var(--ios-action);
  box-shadow: var(--ios-focus-ring);
}
.ios26-field input::placeholder, .ios26-field textarea::placeholder {
  color: var(--ios-text-tertiary);
}
.ios26-field-helper { font-size: var(--ios-text-caption-1); color: var(--ios-text-muted); margin-top: 2px; }
.ios26-field-error  { font-size: var(--ios-text-caption-1); color: var(--ios-danger);   margin-top: 2px; }

.ios26-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ios-space-4);
}

/* ============================================================================
   TABLES (resolves F1.7.3 + F1.3.4 + F1.7.5)
   ========================================================================= */

.ios26-table-wrap {
  background: var(--ios-bg-surface);
  border: 1px solid var(--ios-border-subtle);
  border-radius: var(--ios-radius-lg);
  overflow: hidden;
  box-shadow: var(--ios-shadow-sm);
}
.ios26-table-wrap.is-scroll { overflow-x: auto; }

.ios26-table { width: 100%; border-collapse: collapse; }
.ios26-table thead {
  position: sticky; top: 0; z-index: 1;
  background: var(--ios-bg-surface-2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--ios-divider);
}
.ios26-table th {
  text-align: left;
  font-size: var(--ios-text-caption-1);
  font-weight: var(--ios-weight-semibold);
  color: var(--ios-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--ios-space-3) var(--ios-space-4);
  white-space: nowrap;
  user-select: none;
}
.ios26-table th[aria-sort] { cursor: pointer; transition: color var(--ios-duration-fast) var(--ios-ease); }
.ios26-table th[aria-sort]:hover { color: var(--ios-text-strong); }
.ios26-table th[aria-sort]::after {
  content: " ↕"; opacity: 0.4; font-weight: 400;
}
.ios26-table th[aria-sort="ascending"]::after  { content: " ↑"; opacity: 1; color: var(--ios-action); }
.ios26-table th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; color: var(--ios-action); }
.ios26-table td {
  font-size: var(--ios-text-subhead);
  color: var(--ios-text-default);
  padding: var(--ios-space-3) var(--ios-space-4);
  border-top: 1px solid var(--ios-divider);
  vertical-align: middle;
  line-height: var(--ios-leading-normal);
}
.ios26-table tbody tr { transition: background var(--ios-duration-fast) var(--ios-ease); }
.ios26-table tbody tr:hover td { background: var(--ios-bg-surface-2); }

.ios26-table--compact td, .ios26-table--compact th { padding: 6px var(--ios-space-3); font-size: var(--ios-text-footnote); }

/* Sticky thead for legacy Bootstrap tables (resolves F1.7.3 globally) */
table thead {
  position: sticky; top: 0; z-index: 1;
}

/* ============================================================================
   STATUS PILLS (resolves F1.2.9 + F1.2.5)
   ========================================================================= */

.ios26-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-size: var(--ios-text-caption-1);
  font-weight: var(--ios-weight-semibold);
  border-radius: var(--ios-radius-pill);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.ios26-pill--success { background: var(--ios-success-bg); color: var(--ios-success); }
.ios26-pill--warning { background: var(--ios-warning-bg); color: var(--ios-warning); }
.ios26-pill--danger  { background: var(--ios-danger-bg);  color: var(--ios-danger); }
.ios26-pill--info    { background: var(--ios-info-bg);    color: var(--ios-info); }
.ios26-pill--neutral { background: var(--ios-neutral-bg); color: var(--ios-neutral); }
.ios26-pill--brand   { background: var(--ios-action-tint-bg); color: var(--ios-action); }

/* Override Bootstrap's text-warning / text-success / etc. globally for AA */
[data-theme="light"] .text-warning,  .text-warning  { color: var(--ios-warning) !important; }
[data-theme="light"] .text-success,  .text-success  { color: var(--ios-success) !important; }
[data-theme="light"] .text-danger,   .text-danger   { color: var(--ios-danger) !important; }
[data-theme="light"] .text-info,     .text-info     { color: var(--ios-info) !important; }
[data-theme="light"] .bg-warning,    .bg-warning    { background-color: var(--ios-warning-bg) !important; color: var(--ios-warning) !important; }
[data-theme="light"] .badge-warning, .badge-warning { background-color: var(--ios-warning-bg) !important; color: var(--ios-warning) !important; }

/* ============================================================================
   PAGE HERO (used by Dashboard + flagship pages)
   ========================================================================= */

.ios26-hero {
  display: flex; flex-direction: column; gap: var(--ios-space-2);
  padding: var(--ios-space-5) 0 var(--ios-space-6);
}
.ios26-hero-greeting {
  font-size: var(--ios-text-footnote);
  color: var(--ios-text-muted);
  font-weight: var(--ios-weight-medium);
}
.ios26-hero-title {
  font-family: var(--ios-font-rounded);
  font-size: var(--ios-text-large-title);
  font-weight: var(--ios-weight-bold);
  line-height: var(--ios-leading-tight);
  letter-spacing: -0.025em;
  color: var(--ios-text-strong);
  margin: 0;
}
.ios26-hero-subtitle {
  font-size: var(--ios-text-callout);
  color: var(--ios-text-secondary);
  max-width: 70ch;
}
.ios26-hero-actions {
  display: flex; gap: var(--ios-space-2); align-items: center; flex-wrap: wrap;
  margin-top: var(--ios-space-2);
}

/* ============================================================================
   SEGMENTED CONTROL (iOS-style toggle, replaces Default Client / Built-to-Rent)
   ========================================================================= */

.ios26-segmented {
  display: inline-flex;
  background: var(--ios-bg-surface-2);
  padding: 3px;
  border-radius: var(--ios-radius-md);
  border: 1px solid var(--ios-border-subtle);
  gap: 2px;
}
.ios26-segmented > * {
  padding: 6px 14px;
  font-size: var(--ios-text-footnote);
  font-weight: var(--ios-weight-medium);
  color: var(--ios-text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--ios-radius-sm);
  cursor: pointer;
  transition: background var(--ios-duration-fast) var(--ios-ease), color var(--ios-duration-fast) var(--ios-ease);
}
.ios26-segmented > .is-active,
.ios26-segmented > [aria-pressed="true"] {
  background: var(--ios-bg-surface);
  color: var(--ios-text-strong);
  box-shadow: var(--ios-shadow-sm);
}

/* ============================================================================
   FILTER BAR / TOOLBAR
   ========================================================================= */

.ios26-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ios-space-3);
  padding: var(--ios-space-3) var(--ios-space-4);
  background: var(--ios-bg-surface);
  border: 1px solid var(--ios-border-subtle);
  border-radius: var(--ios-radius-lg);
  box-shadow: var(--ios-shadow-sm);
  margin-bottom: var(--ios-space-4);
}
.ios26-toolbar-search {
  position: relative;
  flex: 1; min-width: 240px;
}
.ios26-toolbar-search input {
  width: 100%;
  padding: 8px 14px 8px 36px;
  font-size: var(--ios-text-subhead);
  border: 1px solid var(--ios-border);
  border-radius: var(--ios-radius-md);
  background: var(--ios-bg-app);
  transition: all var(--ios-duration-fast) var(--ios-ease);
}
.ios26-toolbar-search input:focus { background: var(--ios-bg-surface); border-color: var(--ios-action); box-shadow: var(--ios-focus-ring); outline: none; }
.ios26-toolbar-search::before {
  content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

/* ============================================================================
   EMPTY / LOADING / ERROR STATES (resolves F1.9.1 + F1.9.2)
   ========================================================================= */

.ios26-empty, .ios26-error-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--ios-space-10) var(--ios-space-6);
  gap: var(--ios-space-2);
  color: var(--ios-text-muted);
}
.ios26-empty h3 { font-size: var(--ios-text-title-3); color: var(--ios-text-strong); margin: 0; }
.ios26-empty p { font-size: var(--ios-text-callout); max-width: 50ch; }
.ios26-empty-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--ios-radius-pill);
  background: var(--ios-bg-surface-2);
  color: var(--ios-text-tertiary);
  font-size: 28px;
  margin-bottom: var(--ios-space-2);
}

/* Skeleton loader */
@keyframes ios26-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.ios26-skeleton {
  background: linear-gradient(90deg, var(--ios-bg-surface-2) 0%, var(--ios-bg-app) 50%, var(--ios-bg-surface-2) 100%);
  background-size: 800px 100%;
  animation: ios26-shimmer 1.4s infinite linear;
  border-radius: var(--ios-radius-sm);
}

/* In-flight saving indicator on form submits (resolves F1.9.4) */
.ios26-btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.ios26-btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: ios26-spin 0.6s linear infinite;
}
@keyframes ios26-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   UTILITY ATOMS
   ========================================================================= */

.ios26-stack       { display: flex; flex-direction: column; gap: var(--ios-space-3); }
.ios26-stack--lg   { gap: var(--ios-space-6); }
.ios26-row         { display: flex; align-items: center; gap: var(--ios-space-3); flex-wrap: wrap; }
.ios26-row--end    { justify-content: flex-end; }
.ios26-row--between { justify-content: space-between; }

.ios26-divider     { height: 1px; background: var(--ios-divider); margin: var(--ios-space-6) 0; }

.ios26-text-strong { color: var(--ios-text-strong); }
.ios26-text-muted  { color: var(--ios-text-muted); }
.ios26-text-mono   { font-family: var(--ios-font-mono); }
.ios26-text-rounded { font-family: var(--ios-font-rounded); }

/* Sticky page-action bar (used for save/cancel on long forms — resolves F1.6.1 P0 alternative) */
.ios26-action-bar {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; gap: var(--ios-space-2); justify-content: flex-end;
  padding: var(--ios-space-3) var(--ios-space-5);
  background: var(--ios-glass-bg-strong);
  -webkit-backdrop-filter: var(--ios-glass-blur);
  backdrop-filter: var(--ios-glass-blur);
  border-top: 1px solid var(--ios-glass-border);
  margin: var(--ios-space-6) calc(-1 * var(--ios-space-5)) calc(-1 * var(--ios-space-6));
  border-radius: 0 0 var(--ios-radius-lg) var(--ios-radius-lg);
}

/* ============================================================================
   COMPATIBILITY OVERRIDES for existing in-app design primitives
   These shore up specific accessibility / contrast failures named in the audit
   without disturbing the page's own visual identity.
   ========================================================================= */

/* Dashboard's `.lg-section-title` uses --text-sub (~0.45 alpha) → fails WCAG AA.
   Resolves F2.1.2 / F1.2.3 by raising contrast to AA-safe gray-700 equivalent. */
.lg-scene .lg-section-title {
  color: var(--ios-text-muted) !important;
  font-weight: var(--ios-weight-bold) !important;
}
/* Tagline (small text after section title) — also low contrast. Resolves F2.1.3. */
.lg-scene [style*="color: var(--text-faint)"] {
  color: var(--ios-text-muted) !important;
  opacity: 0.85;
}
/* Dashboard tile descriptions — match the new muted token */
.lg-scene .lg-tile-desc { color: var(--ios-text-secondary); }

/* Bills Admin and other dense pages use 11px labels at gray-500 — fail WCAG AA.
   Resolves F1.3.3 + F1.3.5 globally. */
[data-theme="light"] form label,
[data-theme="light"] .form-label,
[data-theme="light"] th,
.ios26-scope label {
  color: var(--ios-text-label) !important;
}
[data-theme="light"] .form-label,
[data-theme="light"] form > label,
[data-theme="light"] .form-group > label {
  font-size: max(13px, var(--ios-text-footnote)) !important;
  font-weight: var(--ios-weight-medium) !important;
}

/* Bootstrap warning yellow → AA-safe amber. Resolves F1.2.5 globally. */
[data-theme="light"] .badge-warning,
[data-theme="light"] .alert-warning,
[data-theme="light"] .bg-warning {
  background-color: var(--ios-warning-bg) !important;
  color: var(--ios-warning) !important;
  border-color: rgba(180, 83, 9, 0.2) !important;
}

/* Sticky scroll-margin so anchored content + sticky-thead don't collide */
:target { scroll-margin-top: var(--ios-space-16); }

/* ── Operations Monitor → Platform Totals investor panel — theme-aware ──
   Replaces hardcoded light gradient inline-style on the panel + white inner cards. */
.ios26-investor-panel {
  background: linear-gradient(135deg, rgba(238, 242, 255, 0.85), rgba(243, 232, 255, 0.85)) !important;
  border-color: rgba(99, 102, 241, 0.20) !important;
}
[data-theme="dark"] .ios26-investor-panel,
:root:not([data-theme="light"]) .ios26-investor-panel {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(168, 85, 247, 0.12)) !important;
  border-color: rgba(99, 102, 241, 0.28) !important;
}
.ios26-investor-stat {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: background var(--ios-duration-base) var(--ios-ease), border-color var(--ios-duration-base) var(--ios-ease);
}
[data-theme="dark"] .ios26-investor-stat,
:root:not([data-theme="light"]) .ios26-investor-stat {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}
.ios26-investor-title { color: #4338ca; letter-spacing: -0.015em; }
[data-theme="dark"] .ios26-investor-title,
:root:not([data-theme="light"]) .ios26-investor-title { color: #c7d2fe; }
.ios26-investor-footer { border-top: 1px solid rgba(99, 102, 241, 0.15); }
[data-theme="dark"] .ios26-investor-footer,
:root:not([data-theme="light"]) .ios26-investor-footer { border-top-color: rgba(99, 102, 241, 0.30); }

/* Stat value tints — theme-aware (light variants stay vibrant; dark variants brighten) */
.ios26-stat--green  { color: #15803d; letter-spacing: -0.02em; }
.ios26-stat--blue   { color: #1d4ed8; letter-spacing: -0.02em; }
.ios26-stat--purple { color: #7c3aed; letter-spacing: -0.02em; }
.ios26-stat--amber  { color: #b45309; letter-spacing: -0.02em; }
.ios26-stat--cyan   { color: #0891b2; letter-spacing: -0.02em; }
.ios26-stat--teal   { color: #0e7490; letter-spacing: -0.02em; }
[data-theme="dark"] .ios26-stat--green,  :root:not([data-theme="light"]) .ios26-stat--green  { color: #4ade80; }
[data-theme="dark"] .ios26-stat--blue,   :root:not([data-theme="light"]) .ios26-stat--blue   { color: #93c5fd; }
[data-theme="dark"] .ios26-stat--purple, :root:not([data-theme="light"]) .ios26-stat--purple { color: #c4b5fd; }
[data-theme="dark"] .ios26-stat--amber,  :root:not([data-theme="light"]) .ios26-stat--amber  { color: #fcd34d; }
[data-theme="dark"] .ios26-stat--cyan,   :root:not([data-theme="light"]) .ios26-stat--cyan   { color: #67e8f9; }
[data-theme="dark"] .ios26-stat--teal,   :root:not([data-theme="light"]) .ios26-stat--teal   { color: #5eead4; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}