/* Tiragena design tokens + theme parity (load after main.css + brand.css). */

:root {
  --ds-color-bg: var(--bg-deep);
  --ds-color-surface: var(--bg-panel);
  --ds-color-surface-glass: var(--bg-glass);
  --ds-color-text: var(--text);
  --ds-color-text-muted: var(--muted);
  --ds-color-accent: var(--accent);
  --ds-color-accent-2: var(--accent-2);
  --ds-color-border: var(--border);
  --ds-color-success: var(--accent);
  --ds-radius-sm: 0.5rem;
  --ds-radius-md: var(--radius);
  --ds-radius-pill: 999px;
  /* 8px grid — use multiples only (0.5rem = 8px @ 16px root) */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-elev-1: 0 1px 0 rgba(15, 23, 42, 0.06);
  --ds-elev-2: var(--shadow);
  /* Motion — single easing curve site-wide (aligns with main.css --ease-out) */
  --ease-standard: var(--ease-out, cubic-bezier(0.33, 1, 0.68, 1));
  --motion-micro: 150ms;
  --motion-ui: 240ms;
  --motion-panel: 320ms;
  --motion-emphasis: 400ms;
  --ds-transition-fast: color var(--motion-micro) var(--ease-standard),
    background var(--motion-micro) var(--ease-standard),
    border-color var(--motion-micro) var(--ease-standard),
    box-shadow var(--motion-ui) var(--ease-standard),
    transform var(--motion-micro) var(--ease-standard);
  /* Typography scale aliases — source: main.css --type-* / --font-* */
  --ds-font-sans: var(--font-sans);
  --ds-font-display: var(--font-display);
  --ds-type-body: var(--type-body);
  --ds-type-lede: var(--type-lede);
  --ds-type-h2: var(--type-h2);
  --ds-type-h3: var(--type-h3);
  --ds-line-prose: var(--prose-line-height);
  --ds-line-body: var(--body-line-height);
  /* Sticky header offset before tir-menu.css loads */
  --tir-nav-h-fallback: 7rem;
  /* Section vertical rhythm — alias main.css tokens for new work */
  --ds-section-y: var(--section-pad-y);
  --ds-section-y-compact: var(--section-pad-compact);
  --ds-content-max: var(--max);
  --ds-prose: var(--prose);
}

/* --- Light theme: readable hierarchy (fixes muddy / leaked dark styles) --- */
html[data-theme="light"],
html:not([data-theme]) {
  /* Immutable light palette: prevents dark-token bleed into light UI. */
  --bg-primary: #f8fafc;
  --bg-secondary: #eef2f7;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --border-color: #cbd5e1;
  --accent-color: #0ea5a4;
  --accent-neon: #06b6d4;
  --accent-neon-soft: rgba(6, 182, 212, 0.18);

  /* Map legacy site tokens to the dedicated light palette. */
  --bg-deep: var(--bg-primary);
  --bg-panel: rgba(255, 255, 255, 0.92);
  --bg-glass: rgba(255, 255, 255, 0.84);
  --surface-header: rgba(248, 250, 252, 0.94);
  --surface-header-solid: #f8fafc;
  --surface-nav: rgba(255, 255, 255, 0.97);
  --surface-input: #ffffff;
  --border: color-mix(in srgb, var(--border-color) 88%, white);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --accent: var(--accent-color);
  --accent-2: var(--accent-neon);

  /* Component-safe aliases for newer sections. */
  --ds-color-bg: var(--bg-primary);
  --ds-color-surface: var(--bg-panel);
  --ds-color-text: var(--text-primary);
  --ds-color-text-muted: var(--text-secondary);
  --ds-color-border: var(--border);
  --ds-color-accent: var(--accent-color);

  /* Keep controls visible by default in light mode. */
  --btn-primary-bg: linear-gradient(135deg, #0d9488, #06b6d4);
  --btn-primary-fg: #f8fafc;
  --btn-ghost-bg: rgba(255, 255, 255, 0.92);
  --btn-ghost-fg: #0f172a;

  --ds-elev-1: 0 1px 0 rgba(15, 23, 42, 0.08);
  color-scheme: light;
}

html[data-theme="light"] body,
html:not([data-theme]) body {
  background-color: var(--bg-deep);
  color: var(--text);
}

html[data-theme="light"] main,
html:not([data-theme]) main,
html[data-theme="light"] .section,
html:not([data-theme]) .section {
  color: var(--text-primary);
}

/* Readability-first heading fallback: prevent transparent text in light mode. */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .ix-hero h1,
html[data-theme="light"] .page-hero h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html:not([data-theme]) .hero h1,
html:not([data-theme]) .ix-hero h1,
html:not([data-theme]) .page-hero h1,
html:not([data-theme]) h2,
html:not([data-theme]) h3 {
  color: var(--text-primary);
  -webkit-text-fill-color: currentColor;
}

/* High-contrast light controls baseline. */
html[data-theme="light"] .btn,
html[data-theme="light"] .ix-btn,
html:not([data-theme]) .btn,
html:not([data-theme]) .ix-btn {
  color: var(--btn-ghost-fg) !important;
  border-color: color-mix(in srgb, var(--accent-color) 30%, var(--border-color)) !important;
  background: var(--btn-ghost-bg) !important;
  opacity: 1 !important;
}

html[data-theme="light"] .btn.btn-primary,
html[data-theme="light"] .ix-btn.ix-btn--primary,
html:not([data-theme]) .btn.btn-primary,
html:not([data-theme]) .ix-btn.ix-btn--primary {
  color: var(--btn-primary-fg) !important;
  background: var(--btn-primary-bg) !important;
  border-color: transparent !important;
}

/* Subtle neon accents for interactive affordances only. */
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] a:not(.btn):not(.ix-btn):hover,
  html:not([data-theme]) a:not(.btn):not(.ix-btn):hover,
  html[data-theme="light"] .nav-list > li > a:not(.btn):hover,
  html:not([data-theme]) .nav-list > li > a:not(.btn):hover {
    color: var(--accent-neon);
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.2);
  }

  html[data-theme="light"] .btn.btn-primary:hover,
  html[data-theme="light"] .ix-btn.ix-btn--primary:hover,
  html:not([data-theme]) .btn.btn-primary:hover,
  html:not([data-theme]) .ix-btn.ix-btn--primary:hover {
    box-shadow: 0 10px 24px -14px rgba(8, 145, 178, 0.55), 0 0 0 1px var(--accent-neon-soft);
  }
}

html[data-theme="dark"] body {
  background-color: var(--bg-deep);
  color: var(--text);
}

/* --- Header --- */
.site-header {
  border-bottom-color: var(--border);
  background: var(--surface-header);
  box-shadow: var(--ds-elev-1);
}

.nav-list > li > a:not(.btn) {
  border-radius: 0.35rem;
  transition: var(--ds-transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .nav-list > li > a:not(.btn):hover {
    color: var(--accent);
    box-shadow: inset 0 -2px 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
  }
}

.nav-list > li > a:not(.btn):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Dropdowns: no inner scroll “archive” panel; compact panels only --- */
.nav-dropdown--scroll,
.nav-dropdown.nav-dropdown--sub {
  max-height: none !important;
  overflow: visible !important;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;
}

.nav-dropdown {
  border-color: var(--border);
  background: var(--surface-nav);
}

html[data-theme="light"] .nav-dropdown,
html:not([data-theme]) .nav-dropdown {
  box-shadow: 0 18px 48px -12px rgba(15, 23, 42, 0.14);
}

html[data-theme="dark"] .nav-dropdown {
  box-shadow: 0 22px 56px -16px rgba(0, 0, 0, 0.65);
}

.nav-item--dropdown.is-open .nav-dropdown-toggle {
  color: var(--accent);
}

/* Desktop: hover / focus-within pipeline (smooth, no flicker) */
@keyframes tir-dd-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 64rem) and (hover: hover) {
  .site-header .nav-item--dropdown:hover > .nav-dropdown,
  .site-header .nav-item--dropdown:focus-within > .nav-dropdown,
  .ix-header .nav-item--dropdown:hover > .nav-dropdown,
  .ix-header .nav-item--dropdown:focus-within > .nav-dropdown {
    display: block !important;
    animation: tir-dd-in 0.18s ease-out both;
  }

  .site-header .nav-item--dropdown:hover > .nav-dropdown-toggle,
  .site-header .nav-item--dropdown:focus-within > .nav-dropdown-toggle,
  .ix-header .nav-item--dropdown:hover > .nav-dropdown-toggle,
  .ix-header .nav-item--dropdown:focus-within > .nav-dropdown-toggle {
    color: var(--accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown {
    animation: none !important;
  }
}

/* Theme select */
.theme-select {
  color: var(--text);
  background-color: var(--surface-input);
  border-color: var(--border);
}

.theme-select option {
  color: #0f172a;
  background: #f8fafc;
}

html[data-theme="dark"] .theme-select option {
  color: #e2e8f0;
  background: #0f172a;
}

/* --- Premium footer (4 columns + bar) --- */
.footer--premium .footer-grid--premium {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 52rem) {
  .footer--premium .footer-grid--premium {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.footer--premium .footer-desc {
  margin: 0.65rem 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 38ch;
}

.footer--premium .footer-col h4 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.65rem;
}

.footer--premium .footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer--premium .footer-col a,
.footer--premium .footer-col button.text-link {
  font-size: 0.98rem;
  padding: 0.4rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  border-radius: 0.25rem;
}

.footer--premium .footer-col a:hover,
.footer--premium .footer-col button.text-link:hover {
  color: var(--accent);
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted);
}

.footer-bar__copy,
.footer-bar__domains,
.footer-bar__dev {
  margin: 0;
}

.footer-bar__dev .footer-dev-name {
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 51.99rem) {
  .footer-bar {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}

.footer-col--contact a[href^='mailto:'] {
  word-break: break-word;
}

/* --- Data tables & comparison grids --- */
.tir-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.25rem 0;
}

table.tir-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
}

table.tir-table th,
table.tir-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

table.tir-table thead th {
  font-weight: 700;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

table.tir-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--bg-panel) 80%, transparent);
}

.compare-matrix-wrap--premium {
  margin-inline: auto;
  max-width: min(100%, 72rem);
}

.compare-matrix--premium .compare-matrix__head,
.compare-matrix--premium .compare-matrix__row {
  font-size: 0.92rem;
  line-height: 1.45;
}

.compare-matrix--premium .compare-matrix__cell,
.compare-matrix--premium .compare-matrix__dim {
  text-align: center;
  padding-inline: 0.5rem;
}

/* --- Typography rhythm (inner pages) --- */
main .legal-doc h1,
main .page-hero h1 {
  line-height: 1.12;
  letter-spacing: -0.03em;
}

main .legal-doc h2 {
  margin-top: 2rem;
}

main .legal-doc p {
  line-height: 1.65;
}

.investors-faq > section + section {
  margin-top: 1.35rem;
}

/* ==========================================================================
   Light Theme Design System Rebuild (readability-first, premium neutral UI)
   ========================================================================== */
html[data-theme="light"],
html:not([data-theme]) {
  --bg-primary: #fcfcfd;
  --bg-secondary: #f6f8fb;
  --bg-tertiary: #ffffff;

  --text-primary: #111827;
  --text-secondary: #374151;
  --text-disabled: #6b7280;

  --accent-primary: #0f766e;
  --accent-hover: #0e857b;

  --border-color: #d9e2ec;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --shadow-soft: 0 8px 24px -20px rgba(15, 23, 42, 0.3);
  --shadow-card: 0 12px 30px -24px rgba(15, 23, 42, 0.22);

  /* Hard map into existing site tokens to prevent dark leakage. */
  --bg-deep: var(--bg-primary);
  --bg-panel: rgba(255, 255, 255, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.9);
  --surface-header: rgba(252, 252, 253, 0.96);
  --surface-header-solid: #fcfcfd;
  --surface-nav: rgba(255, 255, 255, 0.98);
  --surface-input: #ffffff;
  --border: color-mix(in srgb, var(--border-color) 86%, white);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --accent: var(--accent-primary);
  --accent-2: #0ea5a4;
}

html[data-theme="light"] body,
html:not([data-theme]) body {
  color: var(--text-primary);
  background: var(--bg-primary);
}

/* Typography hierarchy and readability lock. */
html[data-theme="light"] :where(h1, h2, h3),
html:not([data-theme]) :where(h1, h2, h3) {
  color: var(--text-primary) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  -webkit-text-fill-color: currentColor !important;
}
html[data-theme="light"] :where(p, li, dt, dd, small),
html:not([data-theme]) :where(p, li, dt, dd, small) {
  color: var(--text-secondary) !important;
  line-height: 1.65;
}

/* Buttons: always visible with clear contrast in light mode. */
html[data-theme="light"] :where(.btn, .ix-btn),
html:not([data-theme]) :where(.btn, .ix-btn) {
  min-height: 48px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border-color) 84%, white) !important;
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: var(--shadow-soft);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 220ms ease, transform 180ms ease;
}
html[data-theme="light"] :where(.btn-primary, .ix-btn--primary),
html:not([data-theme]) :where(.btn-primary, .ix-btn--primary) {
  background: linear-gradient(135deg, #0f766e, #0ea5a4) !important;
  color: #f8fafc !important;
  border-color: transparent !important;
  box-shadow: 0 12px 24px -18px rgba(15, 118, 110, 0.55);
}
html[data-theme="light"] :where(.btn-ghost, .ix-btn--ghost, .btn-outline),
html:not([data-theme]) :where(.btn-ghost, .ix-btn--ghost, .btn-outline) {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-color)) !important;
}
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] :where(.btn, .ix-btn):hover,
  html:not([data-theme]) :where(.btn, .ix-btn):hover {
    border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-color)) !important;
    box-shadow: 0 14px 28px -20px rgba(15, 23, 42, 0.24);
    transform: translateY(-1px);
  }
  html[data-theme="light"] :where(a:not(.btn):not(.ix-btn)):hover,
  html:not([data-theme]) :where(a:not(.btn):not(.ix-btn)):hover {
    color: var(--accent-hover);
  }
}

/* Cards and surfaces: premium but restrained. */
html[data-theme="light"] :where(.card, .ix-value-card, .ix-phase-card, .contact-panel, .disclosure),
html:not([data-theme]) :where(.card, .ix-value-card, .ix-phase-card, .contact-panel, .disclosure) {
  background: var(--bg-tertiary) !important;
  border-color: color-mix(in srgb, var(--border-color) 88%, white) !important;
  box-shadow: var(--shadow-card);
}

/* Nav + footer clarity on light mode. */
html[data-theme="light"] :where(.nav-list a, .nav-dropdown-toggle, .footer-col a, .footer-col button.text-link),
html:not([data-theme]) :where(.nav-list a, .nav-dropdown-toggle, .footer-col a, .footer-col button.text-link) {
  color: var(--text-secondary) !important;
}
html[data-theme="light"] :where(.nav-list a[aria-current="page"], .nav-list a.is-active),
html:not([data-theme]) :where(.nav-list a[aria-current="page"], .nav-list a.is-active) {
  color: var(--text-primary) !important;
}

@media (max-width: 47.99rem) {
  html[data-theme="light"] :where(.btn, .ix-btn),
  html:not([data-theme]) :where(.btn, .ix-btn) {
    width: 100%;
    justify-content: center;
    min-height: 50px;
  }
}

/* Final premium light pass: typography rhythm + controlled neon accents. */
html[data-theme="light"],
html:not([data-theme]) {
  --bg-primary: #f8fbff;
  --bg-secondary: #eff4fa;
  --bg-tertiary: #ffffff;
  --text-primary: #0b1220;
  --text-secondary: #334155;
  --accent-primary: #0b7a75;
  --accent-hover: #0891b2;
  --border-color: #d5e2ef;
}

html[data-theme="light"] :where(h1, h2, h3),
html:not([data-theme]) :where(h1, h2, h3) {
  letter-spacing: -0.028em;
  line-height: 1.15;
  text-wrap: balance;
}

html[data-theme="light"] :where(p, li),
html:not([data-theme]) :where(p, li) {
  line-height: 1.7;
}

html[data-theme="light"] :where(.section, .card, .ix-phase-card, .ix-value-card, .contact-panel),
html:not([data-theme]) :where(.section, .card, .ix-phase-card, .ix-value-card, .contact-panel) {
  border-color: color-mix(in srgb, var(--border-color) 86%, white);
  box-shadow: 0 16px 34px -26px rgba(15, 23, 42, 0.24);
}

html[data-theme="light"] :where(a:not(.btn):not(.ix-btn)),
html:not([data-theme]) :where(a:not(.btn):not(.ix-btn)) {
  color: #0f172a;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] :where(a:not(.btn):not(.ix-btn)):hover,
  html:not([data-theme]) :where(a:not(.btn):not(.ix-btn)):hover {
    color: var(--accent-hover);
    text-shadow: 0 0 10px rgba(8, 145, 178, 0.16);
  }
}