/* =========================================================
   VakeelOS Chamber/Theatre token system
   - Chamber  = warm ivory paper, near-black warm ink (LIGHT)
   - Theatre  = cinema black paper, warm off-white ink (DARK)
   Three-tier color principle:
     PRIMARY    = ink (text) — 4 weights of typographic hierarchy
     SECONDARY  = paper (surface) — 3 weights of lift
     TERTIARY   = brand cream-gold (accent only — never a dominant fill)
   Status colors (success / warn / danger / info) are LABELS, not theme.
   ========================================================= */

/* ---------- Chamber (light, default) ---------- */
:root,
[data-theme='chamber'] {
  --paper:        oklch(0.985 0.004 80);
  --paper-2:      oklch(0.965 0.005 80);
  --paper-3:      oklch(0.935 0.006 80);

  --ink:          oklch(0.18 0.012 80);
  --ink-2:        oklch(0.36 0.012 80);
  --ink-3:        oklch(0.52 0.012 80);
  --ink-4:        oklch(0.66 0.010 80);

  /* Feature-dark — a *stable* dark anchor that does NOT invert in
     theatre. Used for surfaces whose semantic role is "dark island
     against the page" regardless of mode (splash, colophon, business-
     card-back, iOS icon, dark hero strips). Pairs with --feature-paper
     for text on it. */
  --feature-dark:       oklch(0.155 0.012 75);
  --feature-dark-2:     oklch(0.205 0.012 75);
  --feature-paper:      oklch(0.985 0.005 80);

  --rule:         oklch(0.88 0.006 80);
  --rule-strong:  oklch(0.74 0.008 80);

  /* Brand — chamber default sits one step deeper than theatre so it has
     contrast against ivory. The hue is tweakable via --brand-h. */
  --brand-h:      70;
  --brand:        oklch(0.72 0.105 var(--brand-h));
  --brand-deep:   oklch(0.58 0.115 var(--brand-h));
  --brand-soft:   oklch(0.94 0.040 var(--brand-h));

  /* Complementary cool accent — sits opposite the warm brand on the color
     wheel. Used for temperature contrast: data emphasis, comparison metrics,
     interactive states. Chamber leans deep indigo. */
  --accent-h:     250;
  --accent:       oklch(0.55 0.110 var(--accent-h));
  --accent-deep:  oklch(0.44 0.130 var(--accent-h));
  --accent-soft:  oklch(0.94 0.035 var(--accent-h));

  /* Categorical data palette — 5 hues at MATCHED L/C so they read as a
     family in charts, pipelines, sparkline groups. Order is intentional:
     warm-cool-warm-cool-warm for alternation in stacked viz. */
  --data-1:       oklch(0.62 0.140 40);   /* clay */
  --data-2:       oklch(0.62 0.140 175);  /* teal */
  --data-3:       oklch(0.62 0.140 90);   /* olive-gold */
  --data-4:       oklch(0.62 0.140 265);  /* indigo */
  --data-5:       oklch(0.62 0.140 320);  /* mulberry */

  --success:      oklch(0.55 0.13 155);
  --success-soft: oklch(0.94 0.04 155);
  --warn:         oklch(0.65 0.13 75);
  --warn-soft:    oklch(0.95 0.04 75);
  --danger:       oklch(0.55 0.20 25);
  --danger-soft:  oklch(0.94 0.05 25);
  --info:         oklch(0.50 0.13 240);
  --info-soft:    oklch(0.94 0.04 240);

  --shadow-card:  0 1px 2px oklch(0.18 0.012 80 / 0.03),
                  0 6px 18px oklch(0.18 0.012 80 / 0.05),
                  0 18px 40px oklch(0.18 0.012 80 / 0.04);
  --shadow-pop:   0 12px 32px oklch(0.18 0.012 80 / 0.10),
                  0 4px 12px  oklch(0.18 0.012 80 / 0.06);

  --radius:       6px;
  --radius-lg:    16px;
  --radius-xl:    22px;
  --radius-pill:  999px;
}

/* ---------- Theatre (dark) ---------- */
[data-theme='theatre'] {
  --paper:        oklch(0.115 0.005 80);
  --paper-2:      oklch(0.145 0.006 80);
  --paper-3:      oklch(0.18  0.008 80);

  --ink:          oklch(0.96 0.008 80);
  --ink-2:        oklch(0.78 0.010 80);
  --ink-3:        oklch(0.62 0.012 80);
  --ink-4:        oklch(0.48 0.012 80);

  /* Feature-dark — kept deeper than theatre paper so it still reads as
     the "darker island" against the page. */
  --feature-dark:       oklch(0.075 0.010 75);
  --feature-dark-2:     oklch(0.115 0.010 75);
  --feature-paper:      oklch(0.96 0.008 80);

  --rule:         oklch(0.25 0.006 80);
  --rule-strong:  oklch(0.40 0.008 80);

  --brand:        oklch(0.82 0.085 var(--brand-h));
  --brand-deep:   oklch(0.72 0.105 var(--brand-h));
  --brand-soft:   oklch(0.92 0.050 var(--brand-h));

  --accent:       oklch(0.75 0.090 var(--accent-h));
  --accent-deep:  oklch(0.65 0.115 var(--accent-h));
  --accent-soft:  oklch(0.30 0.060 var(--accent-h));

  /* Categorical palette — lifted for dark surfaces */
  --data-1:       oklch(0.72 0.130 40);
  --data-2:       oklch(0.72 0.130 175);
  --data-3:       oklch(0.72 0.130 90);
  --data-4:       oklch(0.72 0.130 265);
  --data-5:       oklch(0.72 0.130 320);

  --success:      oklch(0.78 0.13 155);
  --success-soft: oklch(0.30 0.05 155);
  --warn:         oklch(0.82 0.13 75);
  --warn-soft:    oklch(0.30 0.05 75);
  --danger:       oklch(0.70 0.18 25);
  --danger-soft:  oklch(0.30 0.06 25);
  --info:         oklch(0.72 0.10 240);
  --info-soft:    oklch(0.30 0.05 240);

  --shadow-card:  0 1px 2px oklch(0 0 0 / 0.40),
                  0 8px 24px oklch(0 0 0 / 0.40),
                  0 24px 60px oklch(0 0 0 / 0.35);
  --shadow-pop:   0 18px 36px oklch(0 0 0 / 0.50),
                  0 4px 10px  oklch(0 0 0 / 0.35);
}

/* =========================================================
   Base
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--rule);
}

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: 'ss01', 'ss03', 'cv11', 'kern';
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient backdrop — complementary warm/cool wash. Warm brand sits top-right
   (the visual "source" of light), cool accent sits bottom-left. The temperature
   contrast gives the page depth without competing with content. */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 100% 0%, color-mix(in oklch, var(--brand) 22%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 55% at 0% 100%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 65%);
  opacity: 0.55;
  animation: ambient 28s ease-in-out infinite alternate;
}
[data-theme='theatre'] body::before {
  opacity: 0.45;
  background:
    radial-gradient(ellipse 55% 45% at 100% 0%, color-mix(in oklch, var(--brand) 16%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 55% at 0% 100%, color-mix(in oklch, var(--accent) 18%, transparent), transparent 65%);
}
@keyframes ambient {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2%, -1%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* Theme cross-fade on the surfaces only (don't animate clickables, that lags) */
body, .surface-anim {
  transition:
    background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-feature-settings: 'ss01';
}

/* Serif — reserved for brand moments (logomark wordmark, brand page hero,
   document/certificate surfaces). Lends a chamber/scholarly weight that
   pairs with the warm gold V mark. Do not use for UI labels — keep Inter
   the workhorse. */
.serif {
  font-family: 'Fraunces', 'Source Serif Pro', Georgia, serif;
  font-feature-settings: 'ss01', 'ss03';
}
:root { --font-serif: 'Fraunces', 'Source Serif Pro', Georgia, serif; }

/* =========================================================
   Surface / text / border utility shorthands
   These are the ONLY color classes the components use.
   ========================================================= */
.bg-paper    { background-color: var(--paper); }
.bg-paper-2  { background-color: var(--paper-2); }
.bg-paper-3  { background-color: var(--paper-3); }

.text-ink    { color: var(--ink); }
.text-ink-2  { color: var(--ink-2); }
.text-ink-3  { color: var(--ink-3); }
.text-ink-4  { color: var(--ink-4); }

.border-rule        { border-color: var(--rule); }
.border-rule-strong { border-color: var(--rule-strong); }

.text-brand        { color: var(--brand); }
.text-brand-deep   { color: var(--brand-deep); }
.bg-brand          { background-color: var(--brand); }
.bg-brand-deep     { background-color: var(--brand-deep); }
.bg-brand-soft     { background-color: var(--brand-soft); }

.text-accent       { color: var(--accent); }
.text-accent-deep  { color: var(--accent-deep); }
.bg-accent         { background-color: var(--accent); }
.bg-accent-deep    { background-color: var(--accent-deep); }
.bg-accent-soft    { background-color: var(--accent-soft); }

.text-data-1 { color: var(--data-1); } .bg-data-1 { background-color: var(--data-1); }
.text-data-2 { color: var(--data-2); } .bg-data-2 { background-color: var(--data-2); }
.text-data-3 { color: var(--data-3); } .bg-data-3 { background-color: var(--data-3); }
.text-data-4 { color: var(--data-4); } .bg-data-4 { background-color: var(--data-4); }
.text-data-5 { color: var(--data-5); } .bg-data-5 { background-color: var(--data-5); }

.text-success { color: var(--success); }
.text-warn    { color: var(--warn); }
.text-danger  { color: var(--danger); }
.text-info    { color: var(--info); }
.bg-success-soft { background-color: var(--success-soft); }
.bg-warn-soft    { background-color: var(--warn-soft); }
.bg-danger-soft  { background-color: var(--danger-soft); }
.bg-info-soft    { background-color: var(--info-soft); }

/* =========================================================
   Component primitives
   ========================================================= */

/* Card / tile — soft, lifted, modern */
.tile {
  background: var(--paper-2);
  border: 1px solid color-mix(in oklch, var(--rule) 70%, transparent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
}
/* Subtle top highlight — gives cards a premium, lit-from-above feel */
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--paper) 60%, transparent) 0%,
    transparent 30%
  );
  opacity: 0.5;
}
[data-theme='theatre'] .tile::before {
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--ink) 4%, transparent) 0%,
    transparent 25%
  );
}
.tile-interactive {
  cursor: pointer;
}
.tile-interactive:hover {
  background: var(--paper-3);
  border-color: color-mix(in oklch, var(--brand-deep) 25%, var(--rule));
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
}

/* Eyebrow — small uppercase mono label */
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Status pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-2);
}
.pill-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-3); }

.pill-success    { color: var(--success); border-color: color-mix(in oklch, var(--success) 30%, transparent); background: var(--success-soft); }
.pill-success .pill-dot { background: var(--success); }
.pill-warn       { color: var(--warn);    border-color: color-mix(in oklch, var(--warn) 30%, transparent);    background: var(--warn-soft); }
.pill-warn .pill-dot    { background: var(--warn); }
.pill-danger     { color: var(--danger);  border-color: color-mix(in oklch, var(--danger) 30%, transparent);  background: var(--danger-soft); }
.pill-danger .pill-dot  { background: var(--danger); }
.pill-info       { color: var(--info);    border-color: color-mix(in oklch, var(--info) 30%, transparent);    background: var(--info-soft); }
.pill-info .pill-dot    { background: var(--info); }
.pill-brand      { color: var(--brand-deep); border-color: color-mix(in oklch, var(--brand-deep) 30%, transparent); background: var(--brand-soft); }
.pill-brand .pill-dot   { background: var(--brand-deep); }
.pill-accent     { color: var(--accent-deep); border-color: color-mix(in oklch, var(--accent-deep) 30%, transparent); background: var(--accent-soft); }
.pill-accent .pill-dot  { background: var(--accent-deep); }

/* Hero tile — uses the complementary warm/cool gradient as a backdrop.
   The gradient runs diagonal from warm brand (top-right) to cool accent
   (bottom-left); both blended into paper so the wash stays subtle. */
.tile-hero {
  position: relative;
  isolation: isolate;
}
.tile-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, color-mix(in oklch, var(--brand) 22%, transparent), transparent 55%),
    radial-gradient(ellipse 80% 90% at 0% 100%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 60%);
  opacity: 0.9;
}
[data-theme='theatre'] .tile-hero::after {
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, color-mix(in oklch, var(--brand) 18%, transparent), transparent 55%),
    radial-gradient(ellipse 80% 90% at 0% 100%, color-mix(in oklch, var(--accent) 22%, transparent), transparent 60%);
  opacity: 0.75;
}

/* Button — soft modern radius */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-ink {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.08), 0 4px 12px color-mix(in oklch, var(--ink) 18%, transparent);
}
.btn-ink:hover { background: var(--ink-2); box-shadow: 0 2px 4px oklch(0 0 0 / 0.10), 0 8px 20px color-mix(in oklch, var(--ink) 25%, transparent); }

.btn-brand {
  background: var(--brand);
  color: var(--paper);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px color-mix(in oklch, var(--brand) 35%, transparent);
}
[data-theme='chamber'] .btn-brand { color: var(--ink); }
.btn-brand:hover { background: var(--brand-deep); color: var(--paper); box-shadow: 0 2px 4px oklch(0 0 0 / 0.08), 0 10px 24px color-mix(in oklch, var(--brand) 45%, transparent); }

.btn-outline {
  background: var(--paper-2);
  color: var(--ink);
  border-color: color-mix(in oklch, var(--ink) 14%, transparent);
}
.btn-outline:hover {
  background: var(--paper-3);
  border-color: color-mix(in oklch, var(--ink) 28%, transparent);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: color-mix(in oklch, var(--ink) 5%, transparent); }

.btn-sm { height: 32px; padding: 0 14px; font-size: 12.5px; }
.btn-icon { width: 38px; padding: 0; }

/* Input */
.field {
  display: block;
  width: 100%;
  height: 38px;
  padding: 0 14px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 14px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.field::placeholder { color: var(--ink-4); }
.field:focus {
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 30%, transparent);
}

/* Focus ring */
.focus-ring:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Row-rule list — borrowed from marketing site */
.row-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--rule);
  transition: background-color 0.4s cubic-bezier(0.65, 0, 0.35, 1), color 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.row-rule:last-child { border-bottom: 1px solid var(--rule); }
.row-rule:hover { background: var(--paper-3); }

/* Subtle paper texture */
.paper-grid {
  background-image: linear-gradient(to right, color-mix(in oklch, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size: 96px 100%;
}

/* =========================================================
   Animations
   ========================================================= */
@keyframes lift-in {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}
.lift-in { animation: lift-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--delay, 0ms)) forwards; }

@keyframes wipe-x {
  from { transform: scaleX(1); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
.wipe-in { animation: wipe-x 1s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--delay, 0ms)) forwards; }

@keyframes brand-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand) 50%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in oklch, var(--brand) 0%, transparent); }
}
.brand-pulse { animation: brand-pulse 2.4s ease-in-out infinite; }

/* page transition */
@keyframes page-in {
  from { transform: translateY(6px); }
  to   { transform: translateY(0); }
}
.page-in { animation: page-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

/* underline-on-hover */
.under-reveal {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.under-reveal:hover { background-size: 100% 1.5px; }

/* live indicator */
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand) 60%, transparent);
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--brand) 55%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in oklch, var(--brand) 0%, transparent); }
}

/* count-up shimmer when value changes */
@keyframes value-rise {
  from { opacity: 0.4; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.value-rise { animation: value-rise 0.4s ease-out both; }

/* nav active underline */
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav-link.active::after,
.nav-link:hover::after { transform: scaleX(1); }

/* sidebar shape */
.side-rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius);
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  width: 100%;
  text-align: left;
}
.side-rail-item:hover { background: var(--paper-3); color: var(--ink); }
.side-rail-item.active {
  color: var(--ink);
  background: var(--paper-3);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--brand-deep) 18%, transparent);
}
.side-rail-item.active::before {
  content: '';
  position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 16px;
  background: var(--brand-deep);
  border-radius: 999px;
}

/* table */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}
.tbl thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  white-space: nowrap;
}
.tbl tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.tbl tbody tr:hover { background: var(--paper-3); }

/* scrollbar */
.scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar::-webkit-scrollbar-track { background: transparent; }
.scrollbar::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; }
.scrollbar::-webkit-scrollbar-thumb:hover { background: var(--rule-strong); }

@media (prefers-reduced-motion: reduce) {
  .lift-in, .wipe-in, .brand-pulse, .live-dot, .value-rise, .page-in {
    animation: none !important;
  }
  .surface-anim, body { transition: none !important; }
}