/* ============================================================
   Betting Bot Admin v2 — Design Tokens
   Based on sessions/2026-05-29-01-admin-design/artifacts/admin/styles.css
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0&display=block");

:root {
  /* Brand colors */
  --pv-red:        #e6403a;
  --pv-red-2:      #d2342e;
  /* TASK-072 (D1): затемнён primary для контраста ≥4.5:1 с белым (#287EA8 = 4.53:1) */
  --pv-blue:       #287EA8;
  --pv-blue-2:     #146aa3;
  --pv-blue-3:     #0d5075;
  --pv-green:      #29b473;
  --pv-green-2:    #20a064;
  --pv-gold:       #f4b921;
  --pv-violet:     #8e44ad;
  --pv-purple:     #9c4bb5;
  --pv-orange:     #ff6b35;
  --pv-warm:       #f39c12;
  --pv-slate-chip: #9aa1a8;

  /* Surfaces — light theme */
  --pv-bg:         #f7f7f9;
  --pv-panel:      #ffffff;
  --pv-panel-2:    #fbfbfc;
  --pv-muted:      #f1f1f4;
  --pv-hover:      #f4f4f7;

  /* Text */
  --pv-fg:         #0d0d12;
  --pv-fg-body:    #2b2b33;
  --pv-fg-muted:   #6b6b75;
  --pv-fg-subtle:  #9a9aa3;
  --pv-fg-on:      #ffffff;

  /* Borders */
  /* TASK-072 (D3): усилен контраст ≥3:1 с фоном (#8E8E96 vs #fbfbfc = 3.14:1) */
  --pv-border:     #8E8E96;
  --pv-border-2:   #d6d6dc;
  --pv-divider:    #ececef;

  /* Status */
  --pv-success:    var(--pv-green);
  --pv-danger:     var(--pv-red);
  --pv-warn:       var(--pv-gold);
  --pv-info:       var(--pv-blue);

  /* Accent (override-able via JS) */
  --pv-accent:     var(--pv-red);
  --pv-accent-2:   var(--pv-red-2);
  --pv-accent-soft:#fde8e7;
  --pv-cta:        var(--pv-blue);
  --pv-cta-2:      var(--pv-blue-2);

  /* Elevation */
  --pv-shadow-sm:  0 1px 2px rgba(15, 17, 25, 0.04), 0 0 0 1px rgba(15, 17, 25, 0.04);
  --pv-shadow:     0 2px 8px rgba(15, 17, 25, 0.05), 0 0 0 1px rgba(15, 17, 25, 0.05);
  --pv-shadow-lg:  0 12px 40px rgba(15, 17, 25, 0.12), 0 0 0 1px rgba(15, 17, 25, 0.06);
  --pv-focus:      0 0 0 3px rgba(40, 126, 168, 0.28); /* TASK-088 A4 - synced to new primary #287EA8 (dark primary/borders from TASK-072 kept) */

  /* Radii */
  --pv-r-2: 2px;
  --pv-r-4: 4px;
  --pv-r-6: 6px;
  --pv-r-8: 8px;
  --pv-r-10: 10px;
  --pv-r-12: 12px;

  /* Spacing */
  --pv-s-2: 2px;  --pv-s-4: 4px;  --pv-s-6: 6px;
  --pv-s-8: 8px;  --pv-s-10: 10px; --pv-s-12: 12px;
  --pv-s-14: 14px; --pv-s-16: 16px; --pv-s-20: 20px;
  --pv-s-24: 24px; --pv-s-32: 32px; --pv-s-40: 40px;
  --pv-s-48: 48px; --pv-s-64: 64px;

  /* Chart heights */
  --pv-chart-h-sm: 250px;
  --pv-chart-h-md: 300px;

  /* Layout */
  --pv-rail-w:        232px;
  --pv-rail-w-collapsed: 60px;
  --pv-topbar-h:      56px;

  /* Density — overridden by data-density attribute */
  --pv-row-h:         40px;
  --pv-cell-y:        10px;
  --pv-card-pad:      20px;

  /* Type */
  --pv-font: "PT Sans", "Helvetica Neue", Arial, sans-serif;
  --pv-fs-11: 11px; --pv-fs-12: 12px; --pv-fs-13: 13px; --pv-fs-14: 14px;
  --pv-fs-15: 15px; --pv-fs-16: 16px; --pv-fs-18: 18px; --pv-fs-20: 20px;
  --pv-fs-24: 24px; --pv-fs-28: 28px; --pv-fs-32: 32px; --pv-fs-40: 40px;
  --pv-tracking-caps: 0.06em;
}

[data-theme="dark"] {
  --pv-bg:         #0b0b10;
  --pv-panel:      #14141b;
  --pv-panel-2:    #1a1a23;
  --pv-muted:      #1f1f28;
  --pv-hover:      #1c1c25;
  --pv-fg:         #f4f4f7;
  --pv-fg-body:    #d6d6dd;
  --pv-fg-muted:   #8e8e98;
  --pv-fg-subtle:  #5e5e68;
  --pv-border:     #23232c;
  --pv-border-2:   #2c2c36;
  --pv-divider:    #1e1e26;
  --pv-accent-soft:#3a1d1c;
  --pv-shadow-sm:  0 1px 2px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  --pv-shadow:     0 2px 8px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  --pv-shadow-lg:  0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
}

[data-density="compact"] {
  --pv-row-h: 32px;
  --pv-cell-y: 6px;
  --pv-card-pad: 16px;
}

[data-density="comfortable"] {
  --pv-row-h: 48px;
  --pv-cell-y: 14px;
  --pv-card-pad: 24px;
}

/* Base styles */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--pv-font);
  font-size: var(--pv-fs-14);
  color: var(--pv-fg-body);
  background: var(--pv-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}