/* ============================================================
   OPEN DOORWAY, NOCTURNE
   Private-client visual language (see PREMIUM-TIER-DESIGN-BRIEF.md §3)
   A themed token layer: the same RGB-triplet custom properties the
   app's Tailwind config consumes, re-pointed at Nocturne values.
   Activate with <html class="nocturne"> - no other changes needed.

   Ordering rules (unchanged from the design system):
     purple = actions only · green = up / red = down always ·
     elevation via shadow, not color.
   ============================================================ */

:root {
  /* Palette as R,G,B triplets so Tailwind opacity modifiers
     (bg-primary/5, text-primary/30, ...) keep working in every theme. */
  --c-background: 248 249 252;   /* #f8f9fc page canvas */
  --c-surface: 255 255 255;      /* #ffffff cards */
  --c-surface-container: 241 243 249; /* #f1f3f9 inputs, insets */
  --c-surface-dim: 232 235 240;  /* #e8ebf0 */
  --c-primary: 85 34 219;          /* #5522DB brand purple */
  --c-primary-ink: 85 34 219;      /* same in light: purple reads fine on white */
  --c-primary-dark: 26 7 64;     /* #2F1378 */
  --c-primary-light: 237 229 250;/* #e6ddfb */
  --c-on-primary: 255 255 255;
  --c-on-surface: 26 29 46;      /* #1a1d2e */
  --c-on-surface-variant: 90 97 120; /* #5a6178 */
  --c-outline: 208 213 224;      /* #d0d5e0 */
  --c-outline-variant: 228 231 238; /* #e4e7ee */
  --c-text-muted: 156 163 184;   /* #9ca3b8 */
  --c-success: 5 150 105;        /* #059669 */
  --c-success-bg: 5 150 105;     /* chips render at /10 ≈ emerald tint */
  --c-error: 220 38 38;          /* #dc2626 */
  --c-error-bg: 220 38 38;
  --c-amber: 217 119 6;          /* #d97706 */
  --c-amber-bg: 217 119 6;
  --c-info: 59 130 246;          /* #3b82f6 */
  --c-info-bg: 59 130 246;
  --c-shadow-tint: 0 0 0;        /* neutral shadows in light */

  /* Signature motion, brief §3.4: charts draw once, then hold still. */
  --draw-duration: 900ms;
  --draw-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html.nocturne {
  /* Near-black surfaces (#0a0a0a / #141414 / #1a1a1a per brief) with a
     violet undertone pulled from brand purple #5522DB. */
  --c-background: 0 0 0;          /* #000000 canvas */
  --c-surface: 14 14 17;         /* cards, one step above the black canvas */
  --c-surface-container: 20 20 25; /* inputs, insets */
  --c-surface-dim: 26 26 31;     /* hover fills */

  /* The design-tokens family (bg-surface, bg-surface-raised) is separate from
     the --c-* family above, and html.dark sets it to a grey-black (#0a0a0a).
     Point it at the same true black so the canvas is one colour everywhere
     instead of three (#0a0a0a, #000000 and the old #0c0b10). */
  --surface-base: #000000;
  --surface-raised: #111116;
  --surface-overlay: #17171e;
  --surface-sunken: #000000;

  /* The brand purple is the SAME value as light mode (#5522DB) - only the
     surfaces around it change in dark. */
  --c-primary: 85 34 219;        /* #5522DB, identical to light mode */
  /* Ink: the same hue lifted one step. #5522DB is 2.3:1 on #000, so any
     declaration that paints purple text or a border uses this instead. */
  --c-primary-ink: 156 123 240;  /* #9C7BF0, AA on near-black */
  --c-primary-dark: 67 23 176;   /* #4317B0, hover stays visibly purple on black */
  --c-primary-light: 33 33 44;   /* purple-tinted fill one step above surface */
  --c-on-primary: 255 255 255;   /* white on brand purple, as in light mode */
  --c-on-surface: 250 250 252;
  --c-on-surface-variant: 166 172 192;
  --c-outline: 48 48 60;         /* inputs, focused borders */
  --c-outline-variant: 30 30 38; /* card borders, dividers */
  --c-text-muted: 134 140 158;

  /* Semantic colors lift for dark-surface contrast; badges use
     translucent tints of themselves instead of solid pastel chips. */
  --c-success: 52 211 153;       /* #34d399 */
  --c-success-bg: 52 211 153;    /* tint applied via /10 modifier */
  --c-error: 248 113 113;        /* #f87171 */
  --c-error-bg: 248 113 113;
  --c-amber: 251 191 36;         /* #fbbf24 */
  --c-amber-bg: 251 191 36;
  --c-info: 96 165 250;          /* #60a5fa */
  --c-info-bg: 96 165 250;
  --c-shadow-tint: 0 0 0;        /* shadows go pure black */
}

/* ------------------------------------------------------------
   ELEVATION, surface hierarchy is shadow-based (design rule #3),
   deepened for dark so layers still read against near-black.
   ------------------------------------------------------------ */
html.nocturne .kpi-card:hover,
html.nocturne .property-card:hover {
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.55);
}
html.nocturne .topbar {
  background: rgb(0 0 0 / 0.85);   /* frosted glass over the black canvas */
}

/* ------------------------------------------------------------
   EDITORIAL SERIF, brief §3.2. Inter remains the data voice;
   Fraunces is the human voice: briefs, Desk messages, page titles.
   ------------------------------------------------------------ */
html.nocturne .font-display {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   GLASS HEADERS, depth without ornament (Apple-style layering).
   ------------------------------------------------------------ */
.glass {
  background: rgb(255 255 255 / 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html.nocturne .glass {
  background: rgb(11 11 15 / 0.72);
}

/* ------------------------------------------------------------
   SIGNATURE MOTION - "charts draw themselves on first reveal,
   then stay still." Bars grow once via transform; reduced-motion
   users get the final state immediately.
   ------------------------------------------------------------ */
.chart-bar { transform-origin: left center; }
.chart-draw .chart-bar {
  animation: chart-draw-in var(--draw-duration) var(--draw-ease) both;
}
@keyframes chart-draw-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Shimmer skeleton uses opacity so it works on any surface. */
@media (prefers-reduced-motion: reduce) {
  .chart-draw .chart-bar { animation: none; }
  .pulse-dot { animation: none; }
}

/* ------------------------------------------------------------
   FOCUS, purple ring is sacred; keep it visible on dark.
   ------------------------------------------------------------ */
html.nocturne :focus-visible { outline-color: var(--c-primary-ink); }

/* ------------------------------------------------------------
   PAGE-BOILERPLATE OVERRIDES, the core pages (market explorer,
   calculator, settings, reports, terminal) share identical inline
   style blocks with fixed white surfaces. These class-targeted
   rules re-point them under Nocturne; the light rules are untouched,
   so un-themed pages render exactly as before.
   ------------------------------------------------------------ */
html.nocturne .topbar {
  background: rgb(11 11 15 / 0.92);
  border-bottom-color: rgb(var(--c-outline-variant));
}
html.nocturne .kpi-card,
html.nocturne .insight-card,
html.nocturne .quick-action,
html.nocturne .metric-pill {
  background: rgb(var(--c-surface));
  border-color: rgb(var(--c-outline-variant));
}
html.nocturne .kpi-card:hover,
html.nocturne .insight-card:hover,
html.nocturne .quick-action:hover,
html.nocturne .metric-pill:hover {
  border-color: rgb(var(--c-primary-ink));
}
html.nocturne .kpi-icon {
  background: linear-gradient(135deg, rgb(var(--c-primary) / 0.14), rgb(var(--c-primary) / 0.06));
  border-color: rgb(var(--c-primary-ink) / 0.25);
}
html.nocturne .activity-item { border-bottom-color: rgb(var(--c-outline-variant)); }
html.nocturne .activity-item:hover { background: rgb(var(--c-surface-container)); }
html.nocturne .search-input { background: rgb(var(--c-surface-container)); border-color: rgb(var(--c-outline-variant)); color: rgb(var(--c-on-surface)); }
html.nocturne .search-input:focus { background: rgb(var(--c-surface)); border-color: rgb(var(--c-primary-ink)); }
html.nocturne .section-title { color: rgb(var(--c-on-surface)); }
html.nocturne .section-subtitle { color: rgb(var(--c-on-surface-variant)); }
html.nocturne .custom-scrollbar::-webkit-scrollbar-thumb { background: rgb(var(--c-outline)); }
html.nocturne .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-text-muted)); }