/* ===========================================================================
   Trader Console theme — ported from the freedx web-kit design system.

   Three layers, same structure as web-kit so values stay traceable to source:

     1. PRIMITIVE  raw palette, HSL triplets (never referenced by components)
     2. SEMANTIC   role tokens (surface / text / outline / status) -> primitives
     3. COMPAT     the console's original variable names -> semantic tokens

   Layer 3 is what makes this a drop-in: the existing markup keeps using
   var(--amber), var(--bg) and friends, and gets the new palette without a single
   class rename. New work should use the semantic tokens directly; the compat
   block is a migration shim, not a destination.

   Colours are stored as bare HSL components so they compose with alpha:
       background: hsl(var(--surface-1));
       background: hsl(var(--primary-600) / 0.12);
   =========================================================================== */

/* ---------------------------------------------------------------- 1. PRIMITIVE */
:root {
  /* primary — freedx purple */
  --primary-50: 245 100% 98%;
  --primary-100: 245 100% 95%;
  --primary-200: 243 100% 92%;
  --primary-300: 246 100% 85%;
  --primary-400: 247 100% 72%;
  --primary-500: 252 100% 73%;
  --primary-600: 256 88% 58%;
  --primary-700: 257 74% 54%;
  --primary-800: 257 73% 42%;
  --primary-900: 257 71% 29%;
  --primary-950: 256 70% 15%;

  /* secondary — freedx orange */
  --secondary-300: 33 100% 72%;
  --secondary-400: 29 100% 61%;
  --secondary-500: 26 99% 53%;
  --secondary-600: 22 94% 48%;
  --secondary-800: 17 83% 34%;
  --secondary-950: 15 84% 15%;

  /* dark neutrals — the console's surfaces */
  --dark-300: 240 5% 75%;
  --dark-400: 240 10% 39%;
  --dark-500: 240 10% 27%;
  --dark-600: 240 10% 20%;
  --dark-700: 240 21% 16%;
  --dark-800: 240 15% 15%;
  --dark-900: 240 21% 8%;
  --dark-950: 240 33% 5%;

  /* status */
  --green-300: 133 53% 58%;
  --green-400: 133 39% 47%;
  --green-500: 133 59% 52%;
  --green-600: 133 59% 36%;
  --green-800: 134 50% 24%;
  --green-950: 135 61% 10%;

  --red-400: 0 100% 66%;
  --red-500: 0 72% 57%;
  --red-600: 0 60% 51%;
  --red-800: 0 62% 32%;
  --red-950: 0 60% 12%;

  --yellow-400: 45 96% 58%;
  --yellow-600: 38 92% 45%;
  --yellow-800: 33 81% 30%;
  --yellow-950: 33 84% 12%;

  --blue-300: 213 94% 78%;
  --blue-500: 217 91% 60%;
  --blue-800: 226 71% 34%;
  --blue-950: 226 57% 15%;

  /* alpha ramps — emphasis without inventing new greys */
  --white-3: 0 0% 100% / 0.03;
  --white-6: 0 0% 100% / 0.06;
  --white-9: 0 0% 100% / 0.09;
  --white-12: 0 0% 100% / 0.12;
  --white-24: 0 0% 100% / 0.24;
  --white-32: 0 0% 100% / 0.32;
  --white-48: 0 0% 100% / 0.48;
  --white-64: 0 0% 100% / 0.64;
  --white-72: 0 0% 100% / 0.72;
  --white-100: 0 0% 100%;
}

/* ----------------------------------------------------------------- 2. SEMANTIC */
/* Dark only. The console is a dark-surface trading tool and has no light mode;
   adding one later means adding a :root block, not touching any component. */
:root {
  /* surfaces, back to front */
  --surface-bg: var(--dark-950);
  --surface-1: var(--dark-900);
  --surface-2: var(--dark-800);
  --surface-3: var(--dark-700);
  --surface-4: var(--dark-600);
  --surface-5: var(--dark-500);

  /* text, by emphasis */
  --text-high-em: var(--white-100);
  --text-med-em: var(--white-72);
  --text-low-em: var(--white-48);
  --text-base-em: var(--white-32);
  --text-faint-em: var(--white-24);

  /* hairlines and outlines */
  --outline-high-em: var(--white-12);
  --outline-med-em: var(--white-9);
  --outline-low-em: var(--white-6);
  --outline-base-em: var(--white-3);

  /* brand */
  --primary-high-em: var(--primary-400);
  --primary-med-em: var(--primary-600);
  --primary-low-em: var(--primary-800);
  --primary-base-em: var(--primary-950);

  --secondary-high-em: var(--secondary-400);
  --secondary-med-em: var(--secondary-600);

  /* status — long/short and up/down read off these */
  --success-high-em: var(--green-400);
  --success-med-em: var(--green-600);
  --success-low-em: var(--green-800);
  --success-base-em: var(--green-950);

  --danger-high-em: var(--red-400);
  --danger-med-em: var(--red-600);
  --danger-low-em: var(--red-800);
  --danger-base-em: var(--red-950);

  --warning-high-em: var(--yellow-400);
  --warning-med-em: var(--yellow-600);

  --info-high-em: var(--blue-300);
  --info-med-em: var(--blue-500);

  /* radii and spacing, from web-kit's unit scale */
  --radius-xs: 0.275rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  --space-xs: 0.25rem;
  --space-sm: 0.375rem;
  --space-md: 0.5rem;
  --space-lg: 0.625rem;
  --space-xl: 0.75rem;
  --space-2xl: 1rem;
  --space-4xl: 1.25rem;
  --space-5xl: 1.5rem;

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* numeric columns need tabular figures or prices jitter as they tick */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
}

/* ------------------------------------------------------------------- 3. COMPAT */
/* Every variable the existing pages already reference, remapped onto the tokens
   above. Deleting this block is the definition of "migration finished". */
:root {
  --bg: hsl(var(--surface-bg));
  --bg-raised: hsl(var(--surface-1));
  --bg-input: hsl(var(--surface-bg));
  --panel: hsl(var(--surface-1));

  --border: hsl(var(--outline-high-em));
  --border-faint: hsl(var(--outline-low-em));
  --border-input: hsl(var(--outline-high-em));
  --border-hover: hsl(var(--primary-600) / 0.4);
  --line: hsl(var(--outline-med-em));

  --text-bright: hsl(var(--text-high-em));
  --text: hsl(var(--text-med-em));
  --text-mid: hsl(var(--text-med-em));
  --text-base: hsl(var(--text-low-em));
  --text-muted: hsl(var(--text-low-em));
  --text-faint: hsl(var(--text-base-em));
  --muted: hsl(var(--text-low-em));

  /* the console's accent was amber; it is now the freedx purple. The names stay
     so existing markup keeps working — see the note at the top of this file. */
  --amber: hsl(var(--primary-500));
  --amber-hover: hsl(var(--primary-400));
  --amber-tint: hsl(var(--primary-600) / 0.14);

  --green: hsl(var(--success-high-em));
  --green-tint: hsl(var(--green-600) / 0.14);
  --red: hsl(var(--danger-high-em));
  --red-tint: hsl(var(--red-600) / 0.14);
}

/* --------------------------------------------------------------- 4. COMPONENTS */
/* Ports of the web-kit components the console actually needs — same variant
   names, sizes, radii and state colours, expressed as plain CSS classes instead
   of Tailwind + CVA. Sizes keep web-kit's exact heights so a button and an input
   still line up when placed side by side. */

/* ---- component tokens (web-kit's component layer) ---- */
:root {
  --button-primary-surface: var(--primary-med-em);
  --button-primary-surface-hover: var(--primary-high-em);
  --button-secondary-surface: var(--surface-2);
  --button-secondary-surface-hover: var(--surface-3);
  --button-outline-surface: var(--surface-1);
  --button-outline-border: var(--outline-low-em);
  --button-outline-surface-hover: var(--surface-2);
  --input-surface: var(--surface-4);
  --input-label: var(--text-low-em);
  --input-placeholder: var(--text-low-em);
  --input-error-border: var(--danger-med-em);
}

/* ---- Button ---- */
.dc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  outline: none;
}
.dc-btn:disabled { cursor: not-allowed; pointer-events: none;
  background: hsl(var(--white-6)); color: hsl(var(--text-base-em)); border-color: transparent; }
.dc-btn:focus-visible { box-shadow: 0 0 0 3px hsl(var(--primary-600) / .24); }

.dc-btn--primary   { background: hsl(var(--button-primary-surface)); color: hsl(var(--white-100)); }
.dc-btn--primary:hover:not(:disabled)   { background: hsl(var(--button-primary-surface-hover)); }
.dc-btn--secondary { background: hsl(var(--button-secondary-surface)); color: hsl(var(--text-med-em)); }
.dc-btn--secondary:hover:not(:disabled) { background: hsl(var(--button-secondary-surface-hover)); }
.dc-btn--outline   { background: hsl(var(--button-outline-surface)); color: hsl(var(--text-med-em));
                     border-color: hsl(var(--button-outline-border)); }
.dc-btn--outline:hover:not(:disabled)   { background: hsl(var(--button-outline-surface-hover)); }
.dc-btn--text      { background: transparent; color: hsl(var(--text-med-em)); }
.dc-btn--text:hover:not(:disabled)      { background: hsl(var(--surface-2)); color: hsl(var(--text-high-em)); }

/* state overlays — compose with any variant, matching web-kit's danger/success */
.dc-btn--danger  { background: hsl(var(--danger-med-em));  color: hsl(var(--white-100)); border-color: transparent; }
.dc-btn--danger:hover:not(:disabled)  { background: hsl(var(--red-500)); }
.dc-btn--danger.dc-btn--outline  { background: transparent; color: hsl(var(--danger-high-em));
                                   border-color: hsl(var(--red-600) / .4); }
.dc-btn--success { background: hsl(var(--success-med-em)); color: hsl(var(--white-100)); border-color: transparent; }
.dc-btn--success:hover:not(:disabled) { background: hsl(var(--green-500)); }

.dc-btn--xs { height: 24px; padding: 0 var(--space-sm);  border-radius: var(--radius-sm); gap: 0;               font-size: 11px; }
.dc-btn--sm { height: 32px; padding: 0 var(--space-md);  border-radius: var(--radius-md); gap: var(--space-xs); font-size: 12px; }
.dc-btn--md { height: 40px; padding: 0 var(--space-xl);  border-radius: var(--radius-lg); gap: var(--space-xs); font-size: 13px; }
.dc-btn--lg { height: 48px; padding: 0 var(--space-2xl); border-radius: var(--radius-xl); gap: var(--space-xs); font-size: 14px; }

/* ---- Card ---- */
.dc-card {
  background: hsl(var(--surface-1));
  border: 1px solid hsl(var(--outline-low-em));
  border-radius: var(--radius-2xl);
  padding: var(--space-2xl);
}
.dc-card--flush { padding: 0; }
.dc-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2xl);
  padding-bottom: var(--space-xl);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid hsl(var(--outline-low-em));
}
.dc-card__title {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: hsl(var(--text-low-em));
}

/* ---- Input ---- */
.dc-input {
  width: 100%;
  display: flex; align-items: center;
  background: hsl(var(--input-surface));
  color: hsl(var(--text-high-em));
  border: 1px solid transparent;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
  outline: none;
}
.dc-input::placeholder { color: hsl(var(--input-placeholder)); }
.dc-input:focus-visible { border-color: hsl(var(--primary-med-em));
                          box-shadow: 0 0 0 3px hsl(var(--primary-600) / .24); }
.dc-input--error { border-color: hsl(var(--input-error-border)); }
.dc-input--error:focus-visible { box-shadow: 0 0 0 3px hsl(var(--red-600) / .24); }
.dc-input:disabled { background: hsl(var(--white-6)); color: hsl(var(--text-base-em)); cursor: not-allowed; }
.dc-input--sm { height: 32px; padding: 0 var(--space-md); border-radius: var(--radius-md); font-size: 12px; }
.dc-input--md { height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-lg); font-size: 13px; }
.dc-input--lg { height: 48px; padding: 0 var(--space-xl); border-radius: var(--radius-xl); font-size: 14px; }
.dc-label { display: flex; align-items: center; gap: var(--space-xs);
            color: hsl(var(--input-label)); font-size: 11px; letter-spacing: .08em;
            text-transform: uppercase; margin-bottom: var(--space-md); }

/* ---- Tag / chip ---- */
.dc-tag {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs); white-space: nowrap; font-weight: 500;
  background: hsl(var(--surface-3)); color: hsl(var(--text-med-em));
}
.dc-tag--primary { background: hsl(var(--primary-600) / .12); color: hsl(var(--primary-300)); }
.dc-tag--success { background: hsl(var(--green-600) / .12);   color: hsl(var(--success-high-em)); }
.dc-tag--danger  { background: hsl(var(--red-600) / .12);     color: hsl(var(--danger-high-em)); }
.dc-tag--warning { background: hsl(var(--yellow-600) / .12);  color: hsl(var(--warning-high-em)); }
.dc-tag--info    { background: hsl(var(--blue-500) / .12);    color: hsl(var(--info-high-em)); }
.dc-tag--xxs { height: 20px; padding: 0 var(--space-sm); border-radius: var(--radius-sm); font-size: 10px; }
.dc-tag--xs  { height: 24px; padding: 0 var(--space-sm); border-radius: var(--radius-md); font-size: 11px; }
.dc-tag--sm  { height: 32px; padding: 0 var(--space-md); border-radius: var(--radius-lg); font-size: 12px; }

/* legacy alias — earlier markup used .dc-chip */
.dc-chip { display: inline-flex; align-items: center; gap: var(--space-xs);
           height: 24px; padding: 0 var(--space-sm); border-radius: var(--radius-md);
           font-size: 11px; background: hsl(var(--surface-3)); color: hsl(var(--text-med-em)); }
.dc-chip--primary { background: hsl(var(--primary-600) / .12); color: hsl(var(--primary-300)); }
.dc-chip--success { background: hsl(var(--green-600) / .12);   color: hsl(var(--success-high-em)); }
.dc-chip--danger  { background: hsl(var(--red-600) / .12);     color: hsl(var(--danger-high-em)); }
.dc-chip--warning { background: hsl(var(--yellow-600) / .12);  color: hsl(var(--warning-high-em)); }

/* ---- Table ---- */
.dc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dc-table thead th {
  text-align: left; font-weight: 500; padding: var(--space-lg) var(--space-xl);
  color: hsl(var(--text-low-em)); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; border-bottom: 1px solid hsl(var(--outline-med-em));
  white-space: nowrap;
}
.dc-table tbody td {
  padding: var(--space-xl); color: hsl(var(--text-med-em));
  border-bottom: 1px solid hsl(var(--outline-base-em));
}
.dc-table tbody tr:last-child td { border-bottom: 0; }
.dc-table tbody tr:hover td { background: hsl(var(--white-3)); }
.dc-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* numeric cells: tabular figures stop columns shifting as values tick */
.dc-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.dc-pos { color: hsl(var(--success-high-em)); }
.dc-neg { color: hsl(var(--danger-high-em)); }

/* focus ring — one definition, so every control is reachable by keyboard */
.dc-focusable:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid hsl(var(--primary-500));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* -------------------------------------------------------------------- 5. MOBILE */
/* Shared rules every page needs. Page-specific layout collapsing stays in the
   page, but these are the ones that are wrong everywhere if they are missing. */

html { -webkit-text-size-adjust: 100%; }

/* Off-canvas drawers are position:fixed and translated off to the right, which
   still counts toward document scrollWidth — the console's settings panel alone
   pushed a 390px viewport to 730px. `clip` kills the horizontal scroll without
   creating a scroll container, so position:sticky keeps working (`hidden` would
   silently break it). */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

/* iOS Safari zooms the whole page when a focused control has a font smaller than
   16px. The console's inputs are 13px, so every tap on a field zoomed the layout
   and left the user pinching back out. Only below the tablet breakpoint, so the
   desktop type scale is untouched. */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }
}

/* Touch targets. Pointer-coarse only, so mouse users keep the compact 24/32
   heights that make a dense trading table readable. */
@media (pointer: coarse) {
  button, [role="button"], .dc-btn, a.btn-ghost, .btn, .btn-ghost {
    min-height: 40px;
  }
  .dc-btn--xs, .dc-btn--sm { min-height: 36px; }
}

/* Any wide data table should scroll inside its own box rather than widening the
   page. Pair with a min-width on the row so columns keep their shape. */
.dc-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;          /* grid/flex children default to min-width:auto and
                            would otherwise expand to their content instead */
  overscroll-behavior-x: contain;
}