/* ═══════════════════════════════════════════════════════════════════════
   theme.css — Design tokens v2: Middle-ground palette
   Dark: Rich TradingView-style slate (not pitch black)
   Light: Cool blue-tinted professional (not plain white)
   Pakistan Green brand throughout both modes
   ═══════════════════════════════════════════════════════════════════════ */

/* ── DaisyUI primary → Muted forest green (light) ───────────────────── */
[data-theme="corporate"] {
  --color-primary:         oklch(38% 0.07 155);   /* muted forest green #2d6a4f */
  --color-primary-content: oklch(98% 0 0);
}
/* ── DaisyUI primary → Neon green (dark) ────────────────────────────── */
[data-theme="night"] {
  --color-primary:         oklch(78.5% 0.196 155.4);
  --color-primary-content: oklch(12% 0.05 155);
}

/* ───────────────────────────────────────────────────────────────────────
   DARK THEME  —  rich dark slate, like TradingView / Linear
   Not pure black. Backgrounds are navy-slate, cards lift slightly.
   ─────────────────────────────────────────────────────────────────────── */
[data-theme="night"] {
  /* Page backgrounds — layered depth */
  --bg:      #111827;   /* outer bg — deep slate */
  --bg1:     #1a2436;   /* topmost (symbol bar, table headers) */
  --bg2:     #1f2d42;   /* inputs, secondary elements */
  --bg3:     #263450;   /* hover, active states */
  --surface: #1a2436;   /* card / panel surfaces — one step lighter than bg */

  /* Borders */
  --border:  #2a3a58;
  --border2: #344a6e;

  /* Brand — neon terminal green */
  --green:    #00e676;
  --green-lt: #00c85a;
  --green-bg: rgba(0, 230, 118, 0.09);
  --green-mid:#00d96a;

  /* State */
  --red:      #ff4d6a;
  --red-bg:   rgba(255, 77, 106, 0.09);
  --amber:    #f5a623;
  --amber-bg: rgba(245, 166, 35, 0.09);

  /* Text */
  --white:  #e8edf5;   /* primary — crisp near-white, easy on eyes */
  --dim:    #9bb5d0;   /* secondary — bumped up for readability */
  --dimmer: #6e8faf;   /* tertiary — was #4d6a88, failed contrast */
}

/* ───────────────────────────────────────────────────────────────────────
   LIGHT THEME  —  warm, low-contrast, easy on the eyes
   Think: Notion / Linear light / warm paper — not clinical white.
   Muted forest green accent, warm cream backgrounds, soft warm slate text.
   ─────────────────────────────────────────────────────────────────────── */
[data-theme="corporate"] {
  /* Page backgrounds — warm cream layers */
  --bg:      #f0ece6;   /* outer bg — warm parchment */
  --bg1:     #ede9e2;   /* symbol bar, table headers */
  --bg2:     #e6e1d9;   /* inputs, secondary elements */
  --bg3:     #ddd8cf;   /* hover, active states */
  --surface: #faf8f5;   /* cards — warm white, not cold */

  /* Borders — warm taupe, not blue-gray */
  --border:  #d4cfc7;
  --border2: #c8c2b9;

  /* Brand — muted forest green (readable, not harsh) */
  --green:    #2d6a4f;   /* softer moss/forest green */
  --green-lt: #3a8a65;   /* hover — slightly lighter */
  --green-bg: rgba(45, 106, 79, 0.08);
  --green-mid:#357a5b;

  /* State colors — warm-tinted, lower saturation */
  --red:     #c0392b;
  --red-bg:  rgba(192, 57, 43, 0.07);
  --amber:   #9a6f00;   /* warm amber, not harsh yellow */
  --amber-bg:rgba(154, 111, 0, 0.08);

  /* Text — warm slate, never harsh black */
  --white:  #2d3748;   /* primary — soft dark slate (not navy, not black) */
  --dim:    #4a5a6a;   /* secondary — bumped for readability */
  --dimmer: #7a8fa0;   /* tertiary — was #9aabb8, too light on warm bg */
}


/* ── Global typography & font stacks ──────────────────────────────────── */
:root, [data-theme] {
  --mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --t:    0.18s ease;

  /* ── Border radius scale ───────────────────────────────────────── */
  --radius-sm:  4px;   /* tags, badges, chips */
  --radius:     8px;   /* cards, panels, inputs */
  --radius-lg: 12px;   /* modals, large blocks */
  --radius-xl: 16px;   /* featured containers */
}

/* ── Base resets ─────────────────────────────────────────────────────── */
html, body {
  font-family: var(--sans);
  overflow: hidden;
  height: 100%;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

/* ── Monospace data elements ─────────────────────────────────────────── */
.mono, table, .factor-table, .ob-row, .tape-row,
#ob-mid-price, #ob-mid-dir, #ob-spread, #ob-spread-pct,
#ob-imbal-num, .tick-btn, .ob-price, .ob-usd, .ob-cum-val,
.tape-price, .tape-qty, .tape-time, #clock,
.sig-stat .s-val, .cell .c-val, .ob-val {
  font-family: var(--mono);
}

/* ── Smooth theme crossfade ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  transition:
    background-color var(--t),
    border-color     var(--t),
    color            var(--t);
}

/* ── Scrollbars ──────────────────────────────────────────────────────── */
::-webkit-scrollbar         { width: 4px; height: 4px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--border2); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

/* ── Keyframes ───────────────────────────────────────────────────────── */
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes flash   { from{opacity:1} to{opacity:.5} }
@keyframes fadeIn  { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }