/* Formula Destruction — shared design tokens
   Dark broadcast aesthetic, condensed sporty type, team-colored accents. */

:root {
  /* surfaces — near-black with a faint cool tone */
  --bg:        #0a0c10;
  --bg-2:      #10131a;
  --panel:     #141821;
  --panel-2:   #1a1f2b;
  --line:      #232a38;
  --line-soft: #1b212d;

  /* ink */
  --ink:       #f3f5f8;
  --ink-2:     #b8c0cd;
  --ink-3:     #717c8c;
  --ink-4:     #49515f;

  /* brand accent (tweakable) — hazard/destruction red-orange */
  --accent:    #FF3B2F;
  --accent-ink:#ffffff;

  /* status */
  --live:      #2BD96B;
  --warn:      #FFB400;

  /* shape */
  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  /* type */
  --display: "Saira Condensed", "Arial Narrow", sans-serif;
  --ui:      "Barlow", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --shadow:   0 18px 50px -22px rgba(0,0,0,.8);
  --glow:     0 0 0 1px rgba(255,255,255,.04), 0 14px 40px -20px rgba(0,0,0,.9);
}

/* light mode (tweakable) */
[data-theme="light"] {
  --bg:        #f4f5f7;
  --bg-2:      #eceef1;
  --panel:     #ffffff;
  --panel-2:   #f6f7f9;
  --line:      #e2e5ea;
  --line-soft: #ececf0;
  --ink:       #11141a;
  --ink-2:     #404a5a;
  --ink-3:     #6c7686;
  --ink-4:     #99a1ad;
  --shadow:    0 18px 44px -24px rgba(20,30,50,.28);
  --glow:      0 0 0 1px rgba(10,15,25,.05), 0 14px 36px -22px rgba(20,30,50,.22);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* utility type classes */
.display { font-family: var(--display); font-weight: 800; line-height: .92; letter-spacing: -0.01em; text-transform: uppercase; }
.mono    { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }

/* scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* subtle broadcast grid texture, applied to .fd-grain */
.fd-grain {
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
}

/* a tiny live dot */
.live-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--live); box-shadow: 0 0 0 0 var(--live); animation: livepulse 1.8s infinite; display:inline-block; }
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 70%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes fd-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }