/*
 * Design tokens — single source of truth for all colors, radii, typography.
 * Based on Portal Design System (PDS) dark/reversed theme.
 *
 * Used by: panel (base.html), report (report.html), static report (report_html.py)
 */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

:root {
  /* Background surfaces */
  --bg: #1a1a1a;                /* $color-background-primaryReversed */
  --surface: #212121;
  --surface2: #2c2c2c;          /* $color-background-secondaryReversed */
  --surface3: #383838;
  --surface4: #464646;

  /* Borders */
  --border: #4c4c4c;            /* $grey5 / BorderPrimary.dark */

  /* Text */
  --text: #fff;                  /* $color-content-primaryReversed */
  --muted: #b2b2b2;             /* $color-content-secondaryReversed */

  /* Accent */
  --accent: #ff4a00;             /* $orange2 / $color-background-accentPrimary */
  --accent-hover: rgba(255,74,0,0.1);  /* $color-stateLayer-hoverAccent */
  --accent-pressed: rgba(255,74,0,0.2); /* $color-stateLayer-pressedAccent */

  /* Semantic colors */
  --green: #29a84a;              /* $green2 / ContentPositive.dark */
  --green-bg: #1b2c20;           /* $green4 / BackgroundPositive.dark */
  --red: #f26464;                /* $red2 / ContentNegative.dark */
  --red-bg: #3a2020;             /* $red4 / BackgroundNegative.dark */
  --yellow: #f5c13a;
  --yellow-bg: rgba(245,193,58,0.12);
  --info: #5a95df;               /* $blue2 / ContentInfo.dark */
  --info-bg: #202a37;            /* $blue4 */

  /* Overlay */
  --overlay: rgba(0,0,0,0.6);   /* $color-stateLayer-overlayPrimary */

  /* Layout */
  --sidebar-w: 240px;

  /* Radii */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* Transition (PDS $transition-all-ease-out) */
  --transition: all 0.3s ease-out;

  /* State layers — reversed (dark) theme */
  --hover-reversed: rgba(255,255,255,0.15);   /* $color-stateLayer-hoverSecondary #ffffff26 */
  --pressed-reversed: rgba(255,255,255,0.3);  /* $color-stateLayer-pressedSecondary #ffffff4d */
  --overlay-secondary: rgba(26,26,26,0.6);    /* $color-stateLayer-overlaySecondary.dark */

  /* Disabled states */
  --disabled-primary: #6f6f6f;   /* $grey4 / DisabledPrimary.dark */
  --disabled-secondary: #2c2c2c; /* $black1 / DisabledSecondary.dark */
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Lato", sans-serif; font-size: 1rem; line-height: 1.5; font-weight: 400; background: var(--bg); color: var(--text); }

/* Shared badge base */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-xs); font-size: 0.75rem; line-height: 1rem; font-weight: 700; }