/* ============================================================
   АНАЛИТИК CLOUD — CSS VARIABLES (Graphite / Amber Theme)
   Approved graphite mockup alignment (approved-analytics-cloud-screens)
   ============================================================ */

:root {
  /* ── Brand palette (АНАЛИТИК white + nav accent + bright Cloud) ── */
  --color-brand-white:      #f7f8fb;
  --color-brand-accent:     #b8874a;
  --color-brand-accent-rgb: 184, 135, 74;
  --color-brand-cloud:      #ff9f2f;

  /* ── Core Background (graphite) ── */
  --color-bg:           #15181c;
  --ac-card-surface:        #12151a;
  --ac-card-surface-deep:   #101318;
  --ac-card-surface-header: #161a1f;
  --color-surface:      var(--ac-card-surface);
  --color-surface-2:    var(--ac-card-surface-header);
  --color-border:       rgba(var(--color-brand-accent-rgb), 0.10);
  --color-border-glow:  rgba(var(--color-brand-accent-rgb), 0.18);

  /* ── Brand / UI — unified light orange (nav «Главная») ── */
  --color-cyan:         var(--color-brand-accent);
  --color-cyan-dim:     rgba(var(--color-brand-accent-rgb), 0.12);
  --color-cyan-glow:    rgba(var(--color-brand-accent-rgb), 0.32);

  /* Amber-native aliases (use these in new code) */
  --color-amber:        var(--color-brand-accent);
  --color-amber-bright: var(--color-brand-accent);
  --color-amber-solid:  var(--color-brand-accent);
  --color-amber-dim:    rgba(var(--color-brand-accent-rgb), 0.12);
  --color-amber-glow:   rgba(var(--color-brand-accent-rgb), 0.32);
  --color-amber-border: rgba(var(--color-brand-accent-rgb), 0.35);

  /* Violet retired — aliased to accent so any missed reference still renders on-theme */
  --color-purple:       var(--color-brand-accent);
  --color-purple-dim:   rgba(var(--color-brand-accent-rgb), 0.14);
  --color-purple-glow:  rgba(var(--color-brand-accent-rgb), 0.30);

  /* ── Signal Direction ── */
  --color-green:        #00ff88;
  --color-green-dim:    rgba(0, 255, 136, 0.1);
  --color-green-glow:   rgba(0, 255, 136, 0.38);
  --color-green-border: rgba(0, 255, 136, 0.35);

  --color-red:          #ff4466;
  --color-red-dim:      rgba(255, 68, 102, 0.1);
  --color-red-glow:     rgba(255, 68, 102, 0.35);
  --color-red-border:   rgba(255, 68, 102, 0.32);

  /* ── Yellow accent (same family as nav accent) ── */
  --ac-warning:           var(--color-brand-accent);
  --ac-warning-rgb:       var(--color-brand-accent-rgb);

  --color-yellow:         var(--ac-warning);
  --color-yellow-rgb:     var(--ac-warning-rgb);
  --color-yellow-dim:     rgba(var(--ac-warning-rgb), 0.12);
  --color-yellow-glow:    rgba(var(--ac-warning-rgb), 0.28);
  --color-yellow-border:  rgba(var(--ac-warning-rgb), 0.32);
  --color-yellow-subtle:  rgba(var(--ac-warning-rgb), 0.06);
  --color-yellow-hover:   rgba(var(--ac-warning-rgb), 0.1);

  /* ── Signal Levels ── */
  --color-standard:       #8a93a0;
  --color-standard-dim:   rgba(138, 147, 160, 0.14);
  --color-strong:         var(--color-brand-accent);
  --color-strong-dim:     rgba(184, 135, 74, 0.14);
  --color-elite:          var(--color-yellow);
  --color-elite-dim:      var(--color-yellow-dim);
  --color-elite-glow:     var(--color-yellow-glow);

  /* ── Source Badges ── */
  --color-source-forex: var(--color-brand-accent);
  --color-source-mock:  #64748b;
  --color-source-mixed: var(--color-brand-accent);

  /* ── Typography (АНАЛИТИК white — no grey body copy on main platform) ── */
  --color-text:         var(--color-brand-white);
  --color-text-muted:   var(--color-brand-white);
  --color-text-dim:     var(--color-brand-white);

  --font-body:          'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:       'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:          'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-logo-main:     'Exo 2', 'Exo2', sans-serif;
  --font-brand:         'Exo 2', 'Exo2', sans-serif;
  --font-family:        var(--font-body);

  /* ── Status ── */
  --color-online:       #00ff88;
  --color-offline:      #ff4466;
  --color-warning:      var(--ac-warning);

  /* ── Dark trading extras ── */
  --dt-card-bg:         var(--ac-card-surface);
  --dt-card-border:     rgba(184, 135, 74, 0.14);
  --dt-gradient-accent: linear-gradient(135deg, #3c3c40 0%, #2c2c30 100%);
  --dt-signal-ring:     rgba(184, 135, 74, 0.30);
  --dt-signal-glow:     0 0 0 1px rgba(184, 135, 74, 0.14),
                        0 4px 16px rgba(0, 0, 0, 0.28);

  /* ── Spacing ── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-lg:   16px;
  --space-xl:   24px;
  --space-2xl:  32px;

  /* ── Card Dimensions ── */
  --card-padding:       12px;
  --card-radius:        14px;
  --card-min-height:    100px;
  --card-max-height:    112px;

  /* ── Typography Scale ── */
  --font-size-xs:       10px;
  --font-size-sm:       11px;
  --font-size-base:     13px;
  --font-size-md:       14px;
  --font-size-lg:       16px;
  --font-size-xl:       18px;
  --font-size-2xl:      22px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold:   700;

  /* ── Shadows / Glows ── */
  --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(184, 135, 74, 0.06) inset;
  --shadow-glow-cyan:   0 0 16px rgba(184, 135, 74, 0.16);
  --shadow-glow-green:  0 0 20px rgba(0, 255, 136, 0.28);
  --shadow-glow-red:    0 0 20px rgba(255, 68, 102, 0.28);
  --shadow-glow-elite:  0 0 20px var(--color-yellow-glow);

  /* ── Transitions ── */
  --transition-fast:    0.15s ease;
  --transition-base:    0.25s ease;
  --transition-slow:    0.4s ease;

  /* ── Z-index layers ── */
  --z-base:     1;
  --z-card:     10;
  --z-overlay:  100;
  --z-header:   200;
  --z-toast:    300;

  /* ── Layout ── */
  --header-height:      120px;
  --nav-height:         42px;
  --sticky-shell-height: calc(var(--header-height) + var(--nav-height));
  --stats-bar-height:   48px;
  --footer-height:      44px;
  --content-max-width:  1680px;
  --grid-gap:           14px;

  /* ── Responsive shell tokens ── */
  --page-gutter:        20px;
  --shell-max-width:    var(--content-max-width);
  --desktop-side-gutter: 80px;
}

/* ── Scrollbar ── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(184, 135, 74, 0.22) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(184, 135, 74, 0.22); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(184, 135, 74, 0.38); }