/*
  DBD Tracker Modular Foundation — Design Tokens
  ------------------------------------------------
  Purpose: shared variables for rebuilt modular pages and components.
  This file intentionally aliases the existing theme tokens where possible so
  modular pages can coexist with legacy pages during the page-by-page rebuild.
*/
:root{
  --dbd-page-max:1600px;
  --dbd-page-pad:24px;
  --dbd-section-gap:16px;
  --dbd-card-pad:16px;

  --dbd-page-bg-top:#05080C;
  --dbd-page-bg-bottom:#020308;
  --dbd-panel-top:#101E27;
  --dbd-panel-bottom:#090B0F;
  --dbd-panel-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  --dbd-sparkline-start:#5523BD;
  --dbd-sparkline-end:#425BDF;

  --dbd-bg:var(--bg, #05080C);
  --dbd-panel:var(--panel, #101E27);
  --dbd-panel-raised:var(--surface-raised, #090B0F);
  --dbd-text:var(--text, #f4efe7);
  --dbd-muted:var(--muted, #aaa3a0);
  --dbd-border:var(--border, rgba(255,255,255,.12));
  --dbd-border-strong:var(--border-active, rgba(255,255,255,.22));
  --dbd-accent:var(--accent, #9b1c1c);
  --dbd-accent-soft:var(--accent-bg, rgba(155,28,28,.14));
  --dbd-accent-text:var(--accent-text, #fff2df);

  --dbd-good-bg:var(--good-bg, rgba(26,105,74,.18));
  --dbd-good-text:var(--good-text, #a9f3c7);
  --dbd-good-border:var(--good-border, rgba(103,221,151,.35));
  --dbd-bad-bg:var(--bad-bg, rgba(125,31,31,.18));
  --dbd-bad-text:var(--bad-text, #ffb8b8);
  --dbd-bad-border:var(--bad-border, rgba(255,110,110,.35));
  --dbd-warn-bg:var(--warn-bg, rgba(150,108,25,.18));
  --dbd-warn-text:var(--warn-text, #ffd782);
  --dbd-warn-border:var(--warn-border, rgba(255,199,83,.35));

  --dbd-font-body:var(--font-body, 'Barlow', system-ui, sans-serif);
  --dbd-font-heading:var(--font-heading, 'Barlow Condensed', Impact, sans-serif);
  --dbd-text-xs:var(--text-xs, 12px);
  --dbd-text-sm:var(--text-sm, 14px);
  --dbd-text-base:var(--text-base, 16px);
  --dbd-text-lg:var(--text-lg, 18px);
  --dbd-text-xl:var(--text-xl, 20px);
  --dbd-text-2xl:var(--text-2xl, 24px);
  --dbd-text-3xl:var(--text-3xl, 32px);

  --dbd-space-1:var(--space-1, 4px);
  --dbd-space-2:var(--space-2, 8px);
  --dbd-space-3:var(--space-3, 12px);
  --dbd-space-4:var(--space-4, 16px);
  --dbd-space-5:var(--space-5, 20px);
  --dbd-space-6:var(--space-6, 24px);

  --dbd-radius-sm:var(--radius-sm, 4px);
  --dbd-radius-md:var(--radius-md, 8px);
  --dbd-radius-lg:var(--radius-lg, 12px);
  --dbd-radius-xl:var(--radius-xl, 14px);
  --dbd-radius-pill:var(--radius-pill, 999px);

  --dbd-shadow:var(--card-glow, 0 8px 32px rgba(0,0,0,.6));
  --dbd-shadow-pop:var(--shadow-pop, 0 18px 50px rgba(0,0,0,.75));
}

@media (max-width: 760px){
  :root{
    --dbd-page-pad:16px;
    --dbd-section-gap:12px;
    --dbd-card-pad:14px;
  }
}