/* MarketMind — Design tokens
   Premium market cockpit. Calm, not casino. Deep ink canvas, emerald/cyan
   profit accents, amber risk accents, and a soft "paper" light mode.
   Single source of truth: colour, type, spacing, radii, shadow, motion. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,30..100&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ───── Type families ─────
     Display: Fraunces — an elegant editorial serif for headings only.
     UI:      Plus Jakarta Sans — a dense, neutral grotesque for body + chrome.
     Mono:    JetBrains Mono — every price, quantity, P/L, and table cell, so
              numbers align in tabular columns the way a trading terminal reads. */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, 'Menlo', monospace;

  --display-opsz: 132;
  --display-soft: 40;

  /* ───── Type scale ───── */
  --t-display-xl: 50px;   --t-display-xl-lh: 1.04; --t-display-xl-tr: -0.020em;
  --t-display-l:  36px;   --t-display-l-lh:  1.06; --t-display-l-tr:  -0.018em;
  --t-display-m:  26px;   --t-display-m-lh:  1.12; --t-display-m-tr:  -0.016em;
  --t-title:      21px;   --t-title-lh:      1.20; --t-title-tr:      -0.012em;
  --t-headline:   16px;   --t-headline-lh:   1.32; --t-headline-tr:   -0.006em;
  --t-body:       15px;   --t-body-lh:       1.46; --t-body-tr:        0;
  --t-caption:    13px;   --t-caption-lh:    1.40; --t-caption-tr:     0;
  --t-micro:      11px;   --t-micro-lh:      1.30; --t-micro-tr:       0.08em;

  /* ───── Spacing (4-based) ───── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

  /* ───── Radii ───── */
  --r-xs: 6px; --r-s: 10px; --r-m: 14px; --r-l: 18px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;

  /* ───── Motion ───── */
  --ease-spring: linear(0, 0.0085 1.6%, 0.0339 3.3%, 0.1359 6.7%, 0.3025 10.2%, 0.5275 13.8%, 0.7975 17.7%, 1.103 21.8%, 1.205 23.9%, 1.286 26.2%, 1.343 28.5%, 1.374 30.9%, 1.378 33.4%, 1.356 36%, 1.31 38.7%, 1.243 41.6%, 1.071 47.7%, 0.918 53.9%, 0.836 57.4%, 0.835 60.5%, 0.866 63.7%, 0.97 70.3%, 1.011 73.6%, 1.032 77.1%, 1.038 80.7%, 1.028 84.6%, 0.996 92.4%, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms; --dur-5: 760ms;

  /* ───── Ink mode (default) ─────
     A deep, cool charcoal-navy cockpit. Low glare, high legibility. */
  --bg-canvas:    #090C12;
  --bg-canvas-2:  #0C1018;
  --bg-surface:   #11161F;
  --bg-elevated:  #161C28;
  --bg-subtle:    rgba(255,255,255,0.035);
  --bg-inset:     rgba(0,0,0,0.32);
  --bg-overlay:   rgba(4,6,10,0.66);
  --bg-glass:     rgba(17,22,31,0.72);
  --bg-glass-stroke: rgba(255,255,255,0.07);
  --app-backdrop:
    radial-gradient(120% 80% at 8% -6%, rgba(21, 194, 107, 0.10), transparent 56%),
    radial-gradient(110% 70% at 100% 2%, rgba(34, 211, 238, 0.08), transparent 60%),
    linear-gradient(180deg, #0A0E15 0%, #090C12 100%);
  --theme-color: #090C12;

  --text-primary:    #ECF1F7;
  --text-secondary:  #9AA6B8;
  --text-tertiary:   #5F6C80;
  --text-on-accent:  #04130C;
  --text-inverse:    #0A0E15;

  --border-hair:   rgba(255,255,255,0.05);
  --border:        rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-2: 0 6px 18px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.35);
  --shadow-3: 0 18px 44px rgba(0,0,0,0.55), 0 4px 10px rgba(0,0,0,0.40);
  --shadow-4: 0 32px 80px rgba(0,0,0,0.62), 0 10px 22px rgba(0,0,0,0.45);
  --shadow-accent: 0 14px 36px var(--accent-glow, rgba(21,194,107,0.22));

  /* ───── Semantic market colours ─────
     Profit and loss are intentionally muted and never flash or animate. */
  --profit:        #2BD17E;
  --profit-soft:   rgba(43, 209, 126, 0.14);
  --loss:          #F0727E;
  --loss-soft:     rgba(240, 114, 126, 0.14);
  --flat:          #8A96A8;

  --success: #2BD17E;
  --warning: #F5A524;
  --danger:  #F0727E;
  --info:    #22D3EE;

  /* ───── Module accents (a small, calm palette) ───── */
  --emerald:       #15C26B;
  --emerald-soft:  rgba(21, 194, 107, 0.15);
  --emerald-deep:  #7BE8B4;
  --emerald-glow:  rgba(21, 194, 107, 0.34);

  --cyan:          #22D3EE;
  --cyan-soft:     rgba(34, 211, 238, 0.14);
  --cyan-deep:     #9DEEFA;
  --cyan-glow:     rgba(34, 211, 238, 0.30);

  --amber:         #F5A524;
  --amber-soft:    rgba(245, 165, 36, 0.15);
  --amber-deep:    #FBD58A;
  --amber-glow:    rgba(245, 165, 36, 0.30);

  --violet:        #8B7BF7;
  --violet-soft:   rgba(139, 123, 247, 0.16);
  --violet-deep:   #C7BEFB;
  --violet-glow:   rgba(139, 123, 247, 0.30);

  --slate:         #6E8BB0;
  --slate-soft:    rgba(110, 139, 176, 0.16);
  --slate-deep:    #B9C9DE;
  --slate-glow:    rgba(110, 139, 176, 0.28);

  /* Active accent (overridden per module via [data-accent]) */
  --accent:       var(--emerald);
  --accent-soft:  var(--emerald-soft);
  --accent-deep:  var(--emerald-deep);
  --accent-glow:  var(--emerald-glow);
}

/* ───── Paper mode (light) ─────
   A soft, warm trading-desk paper. Same structure, low-glare light surface. */
[data-theme="paper"] {
  --bg-canvas:    #F4F1EA;
  --bg-canvas-2:  #ECE7DC;
  --bg-surface:   #FCFAF5;
  --bg-elevated:  #FFFFFF;
  --bg-subtle:    rgba(20,28,22,0.045);
  --bg-inset:     rgba(20,28,22,0.06);
  --bg-overlay:   rgba(26,30,24,0.40);
  --bg-glass:     rgba(252,250,245,0.74);
  --bg-glass-stroke: rgba(255,255,255,0.85);
  --app-backdrop:
    radial-gradient(120% 78% at 6% -8%, rgba(21, 150, 90, 0.10), transparent 58%),
    radial-gradient(110% 70% at 100% 0%, rgba(24, 165, 190, 0.08), transparent 60%),
    linear-gradient(180deg, #F7F4ED 0%, #F0ECE2 100%);
  --theme-color: #F4F1EA;

  --text-primary:    #14201A;
  --text-secondary:  #4C5A52;
  --text-tertiary:   #8A968C;
  --text-on-accent:  #FFFFFF;
  --text-inverse:    #F4F1EA;

  --border-hair:   rgba(20,28,22,0.07);
  --border:        rgba(20,28,22,0.12);
  --border-strong: rgba(20,28,22,0.20);

  --shadow-1: 0 1px 2px rgba(28,38,30,0.05), 0 1px 1px rgba(28,38,30,0.03);
  --shadow-2: 0 5px 16px rgba(28,38,30,0.08), 0 1px 2px rgba(28,38,30,0.04);
  --shadow-3: 0 14px 36px rgba(28,38,30,0.12), 0 5px 10px rgba(28,38,30,0.06);
  --shadow-4: 0 28px 70px rgba(28,38,30,0.16), 0 10px 20px rgba(28,38,30,0.08);

  --profit:        #0E9D5B;
  --profit-soft:   rgba(14, 157, 91, 0.13);
  --loss:          #D14B59;
  --loss-soft:     rgba(209, 75, 89, 0.12);
  --flat:          #6B7770;

  --success: #0E9D5B;
  --warning: #C97E12;
  --danger:  #D14B59;
  --info:    #1597B0;

  --emerald:      #0E9D5B; --emerald-soft: rgba(14,157,91,0.13);  --emerald-deep: #0A6E40; --emerald-glow: rgba(14,157,91,0.24);
  --cyan:         #1597B0; --cyan-soft:    rgba(21,151,176,0.13);  --cyan-deep:    #0C5A6B; --cyan-glow:    rgba(21,151,176,0.22);
  --amber:        #C97E12; --amber-soft:   rgba(201,126,18,0.14);  --amber-deep:   #7A4C06; --amber-glow:   rgba(201,126,18,0.24);
  --violet:       #6A57D6; --violet-soft:  rgba(106,87,214,0.14);  --violet-deep:  #3F329A; --violet-glow:  rgba(106,87,214,0.24);
  --slate:        #4E688A; --slate-soft:   rgba(78,104,138,0.14);  --slate-deep:   #2E4866; --slate-glow:  rgba(78,104,138,0.22);
}

/* ───── Accent setters ───── */
[data-accent="emerald"] { --accent: var(--emerald); --accent-soft: var(--emerald-soft); --accent-deep: var(--emerald-deep); --accent-glow: var(--emerald-glow); }
[data-accent="cyan"]    { --accent: var(--cyan);    --accent-soft: var(--cyan-soft);    --accent-deep: var(--cyan-deep);    --accent-glow: var(--cyan-glow); }
[data-accent="amber"]   { --accent: var(--amber);   --accent-soft: var(--amber-soft);   --accent-deep: var(--amber-deep);   --accent-glow: var(--amber-glow); }
[data-accent="violet"]  { --accent: var(--violet);  --accent-soft: var(--violet-soft);  --accent-deep: var(--violet-deep);  --accent-glow: var(--violet-glow); }
[data-accent="slate"]   { --accent: var(--slate);   --accent-soft: var(--slate-soft);   --accent-deep: var(--slate-deep);   --accent-glow: var(--slate-glow); }

/* ───── Globals ───── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--app-backdrop, var(--bg-canvas));
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}

/* Type primitives */
.display-xl, .display-l, .display-m {
  font-family: var(--font-display);
  font-variation-settings: "opsz" var(--display-opsz), "SOFT" var(--display-soft);
  font-weight: 400;
  letter-spacing: -0.018em;
  color: var(--text-primary);
}
.display-xl { font-size: var(--t-display-xl); line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-tr); }
.display-l  { font-size: var(--t-display-l);  line-height: var(--t-display-l-lh);  letter-spacing: var(--t-display-l-tr); }
.display-m  { font-size: var(--t-display-m);  line-height: var(--t-display-m-lh);  letter-spacing: var(--t-display-m-tr); }

.title    { font-family: var(--font-ui); font-size: var(--t-title); line-height: var(--t-title-lh); letter-spacing: var(--t-title-tr); font-weight: 700; }
.headline { font-family: var(--font-ui); font-size: var(--t-headline); line-height: var(--t-headline-lh); letter-spacing: var(--t-headline-tr); font-weight: 600; }
.body     { font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--t-body-lh); font-weight: 400; }
.caption  { font-family: var(--font-ui); font-size: var(--t-caption); line-height: var(--t-caption-lh); font-weight: 500; color: var(--text-secondary); }
.micro    { font-family: var(--font-ui); font-size: var(--t-micro); line-height: var(--t-micro-lh); letter-spacing: var(--t-micro-tr); font-weight: 700; text-transform: uppercase; color: var(--text-tertiary); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num-profit { color: var(--profit); }
.num-loss   { color: var(--loss); }
.num-flat   { color: var(--flat); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

::selection { background: var(--accent); color: var(--text-on-accent); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}