/* ============================================================
   TraderApp Design System — Colors & Type
   Source of truth: design_packet/design-tokens.md
   ============================================================ */

/* ---------- Fonts ---------- */
/* Brand-licensed Apple fonts. SF Pro Text for chrome, SF Mono for numerics.
   SF Pro Display reserved for L1 readout numbers and prominent titles. */
/* ============================================================
   1. COLORS — Default Dark palette (factory default)
   ============================================================ */
:root,
:root[data-palette="dark"] {
  /* Backgrounds (5-step depth scale) */
  --bg-deepest: #0E1015;
  --bg-panel:   #161821;
  --bg-row:     #1B1E28;
  --bg-hover:   #232733;
  --bg-border:  #303547;

  /* Foregrounds (3-step) */
  --fg-primary:  #E5E8EF;
  --fg-muted:    #8990A1;
  --fg-disabled: #4F5466;

  /* Market color */
  --market-bid:       #4FCFA7;
  --market-ask:       #F08070;
  --market-bid-flash: #4FCFA72E;
  --market-ask-flash: #F080702E;
  --market-bid-bar:   #4FCFA714;
  --market-ask-bar:   #F0807014;

  /* Brand accent (electric blue) */
  --accent-primary: #4A8CFF;
  --accent-muted:   #2C5CC0;
  --accent-subtle:  #4A8CFF1A;

  /* Status */
  --status-good:    #4FCFA7;
  --status-warning: #E2B349;
  --status-error:   #F08070;
  --status-info:    #4A8CFF;

  /* Symbol-linking channel colors */
  --link-red:    #E55A5A;
  --link-orange: #E58E3D;
  --link-yellow: #D9C53D;
  --link-green:  #5AB87C;
  --link-teal:   #3DAACE;
  --link-purple: #B16AE0;

  /* Live-mode safety (NEVER user-overridable) */
  --safety-live-banner:      #C92E2E;
  --safety-live-banner-text: #FFFFFF;

  /* Modal scrim */
  --scrim: rgba(0, 0, 0, 0.50);

  /* Modal/popover shadow */
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- Default Light palette ---------- */
:root[data-palette="light"] {
  --bg-deepest: #FFFFFF;
  --bg-panel:   #F5F6F9;
  --bg-row:     #ECEEF3;
  --bg-hover:   #E1E4EC;
  --bg-border:  #C7CCD7;

  --fg-primary:  #1A1D26;
  --fg-muted:    #5C6477;
  --fg-disabled: #A8AEBA;

  --market-bid:       #1B9D75;
  --market-ask:       #D9483A;
  --market-bid-flash: #1B9D752E;
  --market-ask-flash: #D9483A2E;
  --market-bid-bar:   #1B9D7514;
  --market-ask-bar:   #D9483A14;

  --accent-primary: #4A8CFF;
  --accent-muted:   #2C5CC0;
  --accent-subtle:  #4A8CFF1A;

  --status-good:    #1B9D75;
  --status-warning: #C19533;
  --status-error:   #D9483A;
  --status-info:    #4A8CFF;

  --link-red:    #C94545;
  --link-orange: #C97636;
  --link-yellow: #B5A22F;
  --link-green:  #3D8E5A;
  --link-teal:   #2587A8;
  --link-purple: #8E4DBF;

  --safety-live-banner:      #B82323;
  --safety-live-banner-text: #FFFFFF;

  --scrim: rgba(0, 0, 0, 0.30);
  --shadow-popover: 0 6px 20px rgba(20, 25, 40, 0.18);
}

/* ---------- Deuteranopia alternate (cyan / orange) ---------- */
:root[data-palette="dark-deuteranopia"] {
  /* Inherits dark; only market hues swap */
  --bg-deepest: #0E1015;
  --bg-panel:   #161821;
  --bg-row:     #1B1E28;
  --bg-hover:   #232733;
  --bg-border:  #303547;

  --fg-primary:  #E5E8EF;
  --fg-muted:    #8990A1;
  --fg-disabled: #4F5466;

  --market-bid:       #3DAACE;
  --market-ask:       #E58E3D;
  --market-bid-flash: #3DAACE2E;
  --market-ask-flash: #E58E3D2E;
  --market-bid-bar:   #3DAACE14;
  --market-ask-bar:   #E58E3D14;

  --accent-primary: #4A8CFF;
  --accent-muted:   #2C5CC0;
  --accent-subtle:  #4A8CFF1A;

  --status-good:    #3DAACE;
  --status-warning: #E2B349;
  --status-error:   #E58E3D;
  --status-info:    #4A8CFF;

  --link-red:    #E55A5A;
  --link-orange: #E58E3D;
  --link-yellow: #D9C53D;
  --link-green:  #5AB87C;
  --link-teal:   #3DAACE;
  --link-purple: #B16AE0;

  --safety-live-banner:      #C92E2E;
  --safety-live-banner-text: #FFFFFF;

  --scrim: rgba(0, 0, 0, 0.50);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   2. SPACING — 4pt grid
   ============================================================ */
:root {
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
}

/* ============================================================
   3. RADII
   ============================================================ */
:root {
  --radius-none:   0;
  --radius-small:  2px;
  --radius-medium: 4px;
  --radius-large:  8px;
  --radius-full:   9999px;
}

/* ============================================================
   4. DENSITY MODES (Default mode shown; data-density toggles)
   ============================================================ */
:root,
:root[data-density="default"] {
  --row-height: 24px;
  --cell-pad-h: 8px;
  --cell-pad-v: 2px;
  --panel-header-height: 32px;
  --top-bar-height: 44px;
  --control-height: 22px;
}
:root[data-density="compact"] {
  --row-height: 20px;
  --cell-pad-h: 6px;
  --cell-pad-v: 0px;
  --panel-header-height: 28px;
  --top-bar-height: 36px;
  --control-height: 20px;
}
:root[data-density="comfortable"] {
  --row-height: 28px;
  --cell-pad-h: 12px;
  --cell-pad-v: 4px;
  --panel-header-height: 36px;
  --top-bar-height: 52px;
  --control-height: 28px;
}

/* ============================================================
   5. FONT SCALE MODIFIERS
   ============================================================ */
:root,
:root[data-font-scale="default"] { --font-scale: 1.00; }
:root[data-font-scale="small"]   { --font-scale: 0.92; }
:root[data-font-scale="large"]   { --font-scale: 1.10; }

/* ============================================================
   6. TYPOGRAPHY — base families + scale
   ============================================================ */
:root {
  --font-chrome:  "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-numeric: "SF Mono", ui-monospace, "Menlo", monospace;

  /* Type scale (sizes are unscaled px; multiply by --font-scale where applied) */
  --type-display-size:        24px;  --type-display-lh:        28px;  --type-display-w:        600;
  --type-heading-large-size:  17px;  --type-heading-large-lh:  22px;  --type-heading-large-w:  600;
  --type-heading-small-size:  15px;  --type-heading-small-lh:  20px;  --type-heading-small-w:  500;
  --type-body-size:           13px;  --type-body-lh:           18px;  --type-body-w:           400;
  --type-body-emphasis-w:     500;
  --type-caption-size:        11px;  --type-caption-lh:        14px;  --type-caption-w:        400;
  --type-micro-size:          10px;  --type-micro-lh:          12px;  --type-micro-w:          500;
  --type-data-large-size:     17px;  --type-data-large-lh:     22px;  --type-data-large-w:     400;
  --type-data-default-size:   13px;  --type-data-default-lh:   18px;  --type-data-default-w:   400;
  --type-data-dense-size:     12px;  --type-data-dense-lh:     16px;  --type-data-dense-w:     400;
}

/* Defaults */
html, body {
  background: var(--bg-deepest);
  color: var(--fg-primary);
  font-family: var(--font-chrome);
  font-size: calc(var(--type-body-size) * var(--font-scale));
  line-height: var(--type-body-lh);
  font-weight: var(--type-body-w);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   7. SEMANTIC TYPE CLASSES
   ============================================================ */
.t-display {
  font-family: var(--font-numeric);
  font-size: calc(var(--type-display-size) * var(--font-scale));
  line-height: var(--type-display-lh);
  font-weight: var(--type-display-w);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.t-h1, .t-heading-large {
  font-family: var(--font-chrome);
  font-size: calc(var(--type-heading-large-size) * var(--font-scale));
  line-height: var(--type-heading-large-lh);
  font-weight: var(--type-heading-large-w);
}
.t-h2, .t-heading-small {
  font-family: var(--font-chrome);
  font-size: calc(var(--type-heading-small-size) * var(--font-scale));
  line-height: var(--type-heading-small-lh);
  font-weight: var(--type-heading-small-w);
}
.t-body {
  font-family: var(--font-chrome);
  font-size: calc(var(--type-body-size) * var(--font-scale));
  line-height: var(--type-body-lh);
  font-weight: var(--type-body-w);
}
.t-body-emphasis {
  font-family: var(--font-chrome);
  font-size: calc(var(--type-body-size) * var(--font-scale));
  line-height: var(--type-body-lh);
  font-weight: var(--type-body-emphasis-w);
}
.t-caption {
  font-family: var(--font-chrome);
  font-size: calc(var(--type-caption-size) * var(--font-scale));
  line-height: var(--type-caption-lh);
  font-weight: var(--type-caption-w);
}
.t-micro {
  font-family: var(--font-chrome);
  font-size: calc(var(--type-micro-size) * var(--font-scale));
  line-height: var(--type-micro-lh);
  font-weight: var(--type-micro-w);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.t-data-large {
  font-family: var(--font-numeric);
  font-size: calc(var(--type-data-large-size) * var(--font-scale));
  line-height: var(--type-data-large-lh);
  font-weight: var(--type-data-large-w);
  font-variant-numeric: tabular-nums;
}
.t-data-default {
  font-family: var(--font-numeric);
  font-size: calc(var(--type-data-default-size) * var(--font-scale));
  line-height: var(--type-data-default-lh);
  font-weight: var(--type-data-default-w);
  font-variant-numeric: tabular-nums;
}
.t-data-dense {
  font-family: var(--font-numeric);
  font-size: calc(var(--type-data-dense-size) * var(--font-scale));
  line-height: var(--type-data-dense-lh);
  font-weight: var(--type-data-dense-w);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   8. UTILITY: tabular nums on any element
   ============================================================ */
.tabular { font-variant-numeric: tabular-nums; }

/* Absent-value cell — paired with the em-dash glyph (Pattern C) */
.value-absent {
  color: var(--fg-disabled);
  font-family: var(--font-numeric);
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Fallback reference chip — appears under an absent-value cell */
.value-fallback {
  display: block;
  margin-top: 4px;
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  line-height: 14px;
  color: var(--fg-muted);
}
.value-fallback-label {
  font-family: var(--font-chrome);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-disabled);
  margin-right: 5px;
}

/* ============================================================
   9. MOTION TOKENS (for use in transitions)
   ============================================================ */
:root {
  --motion-flash-decay:    180ms;
  --motion-modal-in:       120ms;
  --motion-modal-out:      100ms;
  --motion-drag-snap:       80ms;
  --motion-confirm-pulse:  200ms;
  --motion-customize:      150ms;
  --motion-status-fade:    250ms;

  /* State tokens (Pattern A — stale data) */
  --state-stale-opacity:        0.55;
  --state-stale-footer-height:  22px;
  --state-stale-threshold-ms:   5000;

  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   10. WIDTH TIERS — opt-in widget responsive behavior
   ============================================================ */
:root {
  --tier-compact-max:  360px;
  --tier-default-max:  639px;
  --tier-wide-min:     640px;
}
/* Usage:
   .l1.compact { ... }   applied via JS/container query at < 361pt
   .l1.default { ... }   361–639pt
   .l1.wide { ... }      ≥ 640pt
*/

@media (prefers-reduced-motion: reduce) {
  /* Cell flash decay is data feedback, not chrome — exempt explicitly. */
  *:not(.flash-decay):not(.flash-decay *) {
    animation: none !important;
    transition: none !important;
  }
}