/* OmniTrading, tema Marina.
   File statico servito come /theme-trading.css: il root layout lo mette nel
   primo HTML quando trading è il modulo attivo (Admin → Configurazioni →
   Struttura e moduli). Non è un import CSS: l'attivo si sceglie a runtime.
   Dichiarato in frontend/brand.ts (themeCss) e manifest.py (theme). */

:root {
  /* Brand "Marina" — tono unico #2F6E8F, identico in chiaro e in scuro. */
  --color-primary-darkest: #245571;
  --color-primary-dark: #2F6E8F;
  --color-primary: #6DA2BD;
  --color-primary-light: #BCD5E2;
  --color-primary-lightest: #DEEAF1;
  --brand-rgb: 47 110 143;
  --brand-50: 241 246 249;
  --brand-100: 222 234 241;
  --brand-200: 188 213 226;
  --brand-300: 147 187 208;
  --brand-400: 109 162 189;
  --brand-500: 47 110 143;
  --brand-600: 41 97 126;
  --brand-700: 36 85 113;
  --brand-800: 29 66 86;
  --brand-900: 22 48 63;
  --brand-950: 14 31 41;

  --color-accent-yellow: #FDE68A;
  --color-accent-yellow-light: #FEF3C7;
  --color-accent-red: #F43F5E;
  --color-accent-green: #10B981;
  --color-accent-orange: #F59E0B;
  --color-accent-dark: #16303F;
  --color-accent-gray: #6DA2BD;

  /* Superfici, bordi e testo. Neutri caldi (stone) invece dei grigi freddi. */
  --surface-base: #FAFAF9;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F5F5F4;
  --surface-inverse: #1C1917;

  --line-subtle: #F5F5F4;
  --line-default: #E7E5E4;
  --line-strong: #D6D3D1;

  --ink-strong: #1C1917;
  --ink-default: #44403C;
  --ink-muted: #78716C;
  --ink-faint: #A8A29E;
  --ink-inverse: #FAFAF9;

  --mode-accent: 47 110 143;
  --mode-soft: 189 213 226;
  --mode-wash: 47 110 143;
  --mode-ink: 36 85 113;
  --mode-on: 255 255 255;

  --color-background-light: #FAFAF9;
}

/* Differita: la modalita eccezione vira tutto il chrome in ambra. */
body[data-trading-mode='differita'] {
  --mode-accent: 245 158 11;
  --mode-soft: 253 230 138;
  --mode-wash: 217 119 6;
  --mode-ink: 180 83 9;
  --mode-on: 28 25 23;
}

body {
  transition: background-color 300ms ease-out;
}

.dark {
  --surface-base: #1C1917;
  --surface-raised: #292524;
  --surface-sunken: #171412;
  --surface-inverse: #FAFAF9;

  --line-subtle: #292524;
  --line-default: #3F3B38;
  --line-strong: #57534E;

  --ink-strong: #FAFAF9;
  --ink-default: #E7E5E4;
  --ink-muted: #A8A29E;
  --ink-faint: #78716C;
  --ink-inverse: #1C1917;

  --color-primary-dark: #4E8CAB;
  --color-primary-darkest: #2F6E8F;
  --brand-rgb: 78 140 171;
  --mode-accent: 78 140 171;
  --mode-soft: 47 110 143;
  --mode-wash: 47 110 143;
  --mode-ink: 147 187 208;
  --mode-on: 255 255 255;

  --color-background-light: #1C1917;
}

.dark body[data-trading-mode='differita'] {
  --mode-accent: 251 191 36;
  --mode-soft: 180 83 9;
  --mode-wash: 217 119 6;
  --mode-ink: 252 211 77;
  --mode-on: 28 25 23;
}

.tabular,
[data-numeric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

@keyframes simVeilIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes simCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes simCandle {
  0%,
  100% {
    transform: scaleY(0.16);
    opacity: 0.3;
  }
  45%,
  60% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes simScan {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  12%,
  88% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes simShuttle {
  0% {
    transform: translateX(-110%) scaleX(0.5);
  }
  55% {
    transform: translateX(90%) scaleX(1);
  }
  100% {
    transform: translateX(310%) scaleX(0.5);
  }
}

@keyframes simSegmentPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes simModeSettle {
  0% {
    box-shadow: 0 0 0 0 rgb(var(--mode-accent) / 0.5);
  }
  100% {
    box-shadow: 0 0 0 12px rgb(var(--mode-accent) / 0);
  }
}

.sim-veil {
  animation: simVeilIn 200ms ease-out both;
}

.sim-card {
  animation: simCardIn 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sim-candle {
  transform-origin: bottom center;
  animation: simCandle 1.5s ease-in-out infinite;
}

.sim-scan {
  animation: simScan 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.sim-shuttle {
  animation: simShuttle 1.5s ease-in-out infinite;
}

.sim-segment-pulse {
  animation: simSegmentPulse 1.1s ease-in-out infinite;
}

.sim-mode-settle {
  animation: simModeSettle 900ms ease-out 1;
}

.mode-rail {
  background: linear-gradient(
    90deg,
    rgb(var(--mode-accent) / 0) 0%,
    rgb(var(--mode-accent) / 0.9) 18%,
    rgb(var(--mode-accent)) 50%,
    rgb(var(--mode-accent) / 0.9) 82%,
    rgb(var(--mode-accent) / 0) 100%
  );
  transition: background 300ms ease-out;
}

.mode-rail[data-mode='differita'] {
  background: repeating-linear-gradient(
    90deg,
    rgb(var(--mode-accent)) 0 10px,
    rgb(var(--mode-accent) / 0.2) 10px 16px
  );
}

.mode-text {
  color: rgb(var(--mode-ink));
  transition: color 300ms ease-out;
}

.mode-ring {
  box-shadow: inset 0 0 0 1px rgb(var(--mode-accent) / 0.3);
  transition: box-shadow 300ms ease-out;
}

.mode-wash {
  background-color: rgb(var(--mode-wash) / 0.035);
  transition: background-color 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .sim-scan,
  .sim-shuttle,
  .sim-segment-pulse,
  .sim-mode-settle {
    animation: none;
  }

  .sim-candle {
    animation: none;
    opacity: 0.85;
  }
}