/* ═══════════════════════════════════════════════════════════
   Celerity Data Studio — Shared Base CSS
   WCAG 2.2 AA + UDL 3.0 compliant design tokens & utilities
   ═══════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────── */
:root {
  /* Brand palette */
  --ink:          #1E1E2C;
  --charcoal:     #2E2E3A;
  --blue:         #5BAFD6;   /* decorative / dark-bg interactive */
  --blue-i:       #1676a0;   /* AA 4.59:1 on light — interactive on light bg */
  --purple:       #7B5EA7;   /* AA 4.74:1 on light; 3.13:1 on dark (large text) */
  --purple-light: #A882D4;   /* AA 5.33:1 on dark */
  --rose:         #F5A9B8;   /* decorative / AAA 8.81:1 on dark */
  --rose-deep:    #A85E72;   /* AA 4.21:1 on light (large text); 3.53:1 on dark */
  --mid:          #6B6B7B;   /* AA 4.73:1 on light */
  --parchment:    #F6F3EE;
  --off-white:    #EDEAE3;
  --border-ui:    #8A8078;   /* 3.49:1 on parchment — WCAG 1.4.11 */
  --border-focus: #1676a0;

  /* Dark theme surface tokens (used on all public pages) */
  --surface-dark:   rgba(255,255,255,0.05);
  --border-dark:    rgba(255,255,255,0.10);

  /* Accessible text on dark (#1E1E2C) — all verified hex equivalents */
  --text-primary:   #FFFFFF;        /* 16.44:1 */
  --text-secondary: #C4C4D8;        /* 9.58:1  */
  --text-tertiary:  #9B9BAC;        /* 6.01:1  */
  --text-muted:     #888898;        /* 4.53:1  — minimum AA */
  --text-value-desc:#929298;        /* 4.51:1  — replaces 0.40 opacity */
  --text-label:     #7B7B8C;        /* WCAG 3.1:1 — large text / mono labels */

  /* Typography */
  --sans:  'DM Sans', sans-serif;
  --serif: 'DM Serif Display', serif;
  --mono:  'DM Mono', monospace;

  /* Spacing */
  --r: 6px;
  --r-lg: 12px;
  --r-pill: 40px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── Skip link ──────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -44px;
  left: 0;
  background: var(--blue-i);
  color: #fff;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  border-radius: 0 0 var(--r) 0;
  transition: top .15s;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ── Focus ring — universal ─────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--border-focus) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Body base ──────────────────────────────────────────── */
body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--text-primary);
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ── Background — shared dark gradient scene ────────────── */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 50% 50%, rgba(123,94,167,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgba(245,169,184,0.07) 0%, transparent 65%);
}
.page-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(91,175,214,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,175,214,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Nav ────────────────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 0;
  position: relative;
  z-index: 10;
}
.nav-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
}
.nav-link {
  padding: 8px 20px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  background: none;
  border: none;
  border-radius: 32px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: color .2s, background .2s;
  min-height: 36px;
  display: flex;
  align-items: center;
}
.nav-link:hover { color: var(--text-secondary); }
.nav-link[aria-current="page"] {
  background: rgba(255,255,255,0.10);
  color: var(--text-primary);
}

/* ── Page content wrapper ───────────────────────────────── */
.page-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 40px 80px;
  overflow-y: auto;
}

/* ── Rose rule ──────────────────────────────────────────── */
.rose-rule {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--rose);
  opacity: 0.55;
  border: none;
}

/* ── Brand lockup ───────────────────────────────────────── */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
}
.brand-name {
  font-family: var(--serif);
  font-size: 42px;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--purple-light);
  margin-top: 4px;
  display: block;
}

/* ── Ghost button ───────────────────────────────────────── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 26px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s;
  min-height: 44px;
  cursor: pointer;
}
.btn-ghost:hover {
  background: rgba(91,175,214,0.12);
  border-color: rgba(91,175,214,0.4);
  color: var(--text-primary);
}

/* ── Primary button ─────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 28px;
  background: var(--purple);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .2s;
  min-height: 44px;
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

/* ── Value cards ────────────────────────────────────────── */
.value-card {
  background: var(--surface-dark);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-lg);
  padding: 20px 18px;
  text-align: left;
}
.value-num {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--blue);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.value-name {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.3;
}
.value-desc {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-value-desc);
}

/* ── Fade-up animation ──────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up   { animation: fadeUp 0.7s ease both; }
.fade-up-2 { animation: fadeUp 0.7s 0.2s ease both; }
.fade-up-3 { animation: fadeUp 0.7s 0.38s ease both; }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .page-content { padding: 40px 20px 60px; }
  .brand-name   { font-size: 32px; }
  .brand-lockup { gap: 14px; }
  input, select, textarea { font-size: 16px !important; }
}

/* ── Site footer links ──────────────────────────────────── */
.site-footer a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer a:hover { color: var(--text-secondary); }
.site-footer a[aria-current="page"] { color: var(--text-secondary); }