'UI Shell and General Architecture'

1 files changed, 2 insertions, 645 deletions

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 2756364..7c4ad44 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -1,646 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap");
+@import "./design-tokens.css";
+@import "./prism-shell.css";
 
-:root {
-  --ink-0: #0b0e13;
-  --ink-1: #11151c;
-  --ink-2: #181d26;
-  --ink-3: #222934;
-  --line-1: #232934;
-  --line-2: #2e3645;
-  --fg-1: #f2ecdc;
-  --fg-2: #c7c0ae;
-  --fg-3: #8e8676;
-  --fg-4: #5e5849;
-  --brass: #c2aa7a;
-  --brass-bright: #dcc79e;
-  --brass-ink: #17120a;
-  --positive: #4f8c5e;
-  --negative: #b5494b;
-  --warning: #c49545;
-  --info: #4a78b5;
-  --font-display: "EB Garamond", Georgia, serif;
-  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
-  --font-mono: "IBM Plex Mono", monospace;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  min-height: 100%;
-  margin: 0;
-  background: var(--ink-0);
-  color: var(--fg-2);
-  font-family: var(--font-sans);
-}
-
-button,
-input {
-  font: inherit;
-}
-
-button {
-  cursor: pointer;
-}
-
-.shell {
-  display: grid;
-  grid-template-columns: 320px minmax(0, 1fr);
-  min-height: 100vh;
-}
-
-.sidebar {
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  overflow: auto;
-  border-right: 1px solid var(--line-1);
-  background: var(--ink-1);
-  padding: 22px 18px;
-}
-
-.brand {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding-bottom: 22px;
-  border-bottom: 1px solid var(--line-1);
-}
-
-.brand-mark {
-  display: grid;
-  width: 36px;
-  height: 36px;
-  place-items: center;
-  border: 1px solid var(--brass);
-  color: var(--brass-bright);
-  font-family: var(--font-display);
-  font-size: 24px;
-}
-
-.brand-name {
-  color: var(--fg-1);
-  font-family: var(--font-display);
-  font-size: 24px;
-}
-
-.brand-sub,
-.section-label,
-.search-form label {
-  color: var(--fg-4);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-
-.search-form,
-.selected-summary,
-.watchlist {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: 24px;
-}
-
-.search-box {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid var(--line-2);
-  background: var(--ink-2);
-  padding: 10px 12px;
-}
-
-.search-box input {
-  min-width: 0;
-  width: 100%;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: var(--fg-1);
-  font-family: var(--font-mono);
-}
-
-.search-results {
-  border: 1px solid var(--line-1);
-  background: var(--ink-2);
-}
-
-.search-results button,
-.watch-row,
-.watch-table button {
-  display: grid;
-  width: 100%;
-  grid-template-columns: 72px minmax(0, 1fr);
-  gap: 8px;
-  border: 0;
-  border-bottom: 1px solid var(--line-1);
-  background: transparent;
-  color: var(--fg-2);
-  padding: 9px 10px;
-  text-align: left;
-}
-
-.search-results button:hover,
-.watch-row:hover,
-.watch-table button:hover {
-  background: var(--ink-3);
-}
-
-.search-results span,
-.watch-row span:first-child,
-.watch-table span:first-child {
-  color: var(--fg-1);
-  font-family: var(--font-mono);
-}
-
-.search-results small {
-  overflow: hidden;
-  color: var(--fg-3);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.muted-row,
-.empty-copy {
-  color: var(--fg-4);
-  font-size: 13px;
-  padding: 8px 0;
-}
-
-.summary-symbol {
-  color: var(--fg-1);
-  font-family: var(--font-display);
-  font-size: 32px;
-}
-
-.summary-name {
-  color: var(--fg-3);
-}
-
-.summary-price {
-  display: flex;
-  justify-content: space-between;
-  color: var(--fg-1);
-  font-family: var(--font-mono);
-}
-
-.watch-action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  border: 0;
-  background: var(--brass);
-  color: var(--brass-ink);
-  padding: 9px 12px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.watch-row {
-  grid-template-columns: 1fr auto auto;
-  font-family: var(--font-mono);
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.watch-count {
-  color: var(--fg-4);
-  font-family: var(--font-mono);
-  font-size: 12px;
-  text-align: right;
-}
-
-.content {
-  min-width: 0;
-  padding: 24px;
-}
-
-.market-bar {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-  margin-bottom: 22px;
-}
-
-.market-item,
-.stat,
-.signal,
-.detail-panel,
-.chart-shell,
-.empty-state,
-.empty-panel,
-.error-panel {
-  border: 1px solid var(--line-1);
-  background: var(--ink-1);
-}
-
-.market-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 14px 16px;
-}
-
-.market-item span,
-.stat span,
-.signal span {
-  color: var(--fg-4);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-
-.market-item strong,
-.stat strong {
-  color: var(--fg-1);
-  font-family: var(--font-mono);
-  font-size: 20px;
-  font-weight: 500;
-}
-
-.positive {
-  color: var(--positive) !important;
-}
-
-.negative {
-  color: var(--negative) !important;
-}
-
-.neutral {
-  color: var(--fg-4) !important;
-}
-
-.overview {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.company-header {
-  display: flex;
-  justify-content: space-between;
-  gap: 24px;
-  padding: 22px 0 12px;
-  border-bottom: 1px solid var(--line-1);
-}
-
-.header-title-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.eyebrow {
-  color: var(--brass);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-
-h1 {
-  margin: 4px 0;
-  color: var(--fg-1);
-  font-family: var(--font-display);
-  font-size: 42px;
-  font-weight: 500;
-  line-height: 1.05;
-}
-
-.company-header p {
-  margin: 0;
-  color: var(--fg-3);
-}
-
-.quote-block {
-  display: flex;
-  min-width: 180px;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 6px;
-  font-family: var(--font-mono);
-}
-
-.quote-block span {
-  color: var(--fg-1);
-  font-size: 28px;
-}
-
-.quote-block small {
-  color: var(--fg-3);
-}
-
-.status-chip {
-  border: 1px solid var(--warning);
-  color: var(--warning);
-  padding: 5px 8px;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.signal-grid,
-.stat-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.stat-grid {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
-.signal,
-.stat {
-  display: flex;
-  min-height: 92px;
-  flex-direction: column;
-  gap: 6px;
-  justify-content: center;
-  padding: 14px;
-}
-
-.signal strong {
-  color: var(--fg-1);
-  font-family: var(--font-mono);
-  font-size: 17px;
-}
-
-.signal small {
-  color: var(--fg-3);
-}
-
-.inline-note {
-  border: 1px solid var(--line-1);
-  background: var(--ink-2);
-  color: var(--fg-3);
-  padding: 12px 14px;
-}
-
-.error-copy {
-  border-color: rgba(181, 73, 75, 0.35);
-  color: var(--negative);
-}
-
-.signal.pos strong {
-  color: var(--positive);
-}
-
-.signal.warn strong {
-  color: var(--warning);
-}
-
-.signal.neg strong {
-  color: var(--negative);
-}
-
-.split-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
-
-.detail-panel {
-  padding: 16px;
-}
-
-.range-values {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 12px;
-  margin-top: 18px;
-  color: var(--fg-3);
-  font-family: var(--font-mono);
-}
-
-.range-values strong {
-  color: var(--brass-bright);
-}
-
-.range-values span:last-child {
-  text-align: right;
-}
-
-.range-rail {
-  position: relative;
-  height: 4px;
-  margin-top: 16px;
-  background: var(--line-2);
-}
-
-.range-rail span {
-  position: absolute;
-  inset: 0 auto 0 0;
-  background: var(--brass);
-}
-
-.range-rail i {
-  position: absolute;
-  top: -4px;
-  width: 2px;
-  height: 12px;
-  background: var(--brass-bright);
-}
-
-.mini-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.mini-grid .stat {
-  min-height: 72px;
-  background: var(--ink-2);
-}
-
-.chart-shell {
-  padding: 16px;
-}
-
-.chart-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 18px;
-  margin-bottom: 10px;
-}
-
-.chart-head strong {
-  color: var(--fg-1);
-  font-family: var(--font-display);
-  font-size: 24px;
-  font-weight: 500;
-}
-
-.segmented {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.segmented button {
-  min-width: 42px;
-  border: 1px solid var(--line-2);
-  background: var(--ink-2);
-  color: var(--fg-3);
-  padding: 7px 10px;
-  font-size: 12px;
-}
-
-.segmented button.active {
-  border-color: var(--brass);
-  color: var(--brass-bright);
-}
-
-.chart {
-  width: 100%;
-}
-
-.compact-panel {
-  padding: 18px;
-}
-
-.empty-state,
-.empty-panel,
-.error-panel {
-  padding: 32px;
-}
-
-.empty-state p,
-.empty-panel,
-.error-panel {
-  color: var(--fg-3);
-}
-
-.error-panel {
-  border-color: var(--negative);
-  color: var(--negative);
-}
-
-.invalid-state p {
-  margin: 12px 0 20px;
-}
-
-.ghost-action {
-  border: 1px solid var(--line-2);
-  background: transparent;
-  color: var(--fg-1);
-  padding: 10px 14px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.missing-value {
-  color: var(--fg-4) !important;
-}
-
-.profile-list {
-  display: grid;
-  gap: 12px;
-  margin-top: 12px;
-}
-
-.profile-list div {
-  display: grid;
-  gap: 4px;
-}
-
-.profile-list span {
-  color: var(--fg-4);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-
-.profile-list strong,
-.profile-list a,
-.quality-copy strong {
-  color: var(--fg-1);
-  font-family: var(--font-mono);
-  font-weight: 500;
-  word-break: break-word;
-}
-
-.profile-list a {
-  text-decoration: none;
-}
-
-.profile-summary {
-  margin: 18px 0 0;
-  color: var(--fg-3);
-  line-height: 1.6;
-}
-
-.quality-copy {
-  margin-top: 12px;
-  color: var(--fg-3);
-}
-
-.compact-list {
-  margin-top: 16px;
-}
-
-.watch-table {
-  max-width: 520px;
-  margin-top: 18px;
-  border: 1px solid var(--line-1);
-}
-
-.watch-table button {
-  grid-template-columns: 1fr auto auto;
-}
-
-@media (max-width: 1100px) {
-  .shell {
-    grid-template-columns: 1fr;
-  }
-
-  .sidebar {
-    position: relative;
-    height: auto;
-  }
-
-  .market-bar,
-  .signal-grid,
-  .stat-grid,
-  .split-row {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media (max-width: 680px) {
-  .content {
-    padding: 16px;
-  }
-
-  .market-bar,
-  .signal-grid,
-  .stat-grid,
-  .split-row {
-    grid-template-columns: 1fr;
-  }
-
-  .company-header,
-  .chart-head {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .quote-block {
-    align-items: flex-start;
-  }
-}