/* CSS Custom Properties - Design Tokens
 * Based on PXP Jekyll site audit styling
 * Supports light and dark modes via prefers-color-scheme
 */

:root {
  /* === BACKGROUNDS === */
  --bg: #ffffff;              /* Main background */
  --bg-sunken: #f6f7f9;      /* Lowered/recessed areas */
  --bg-raised: #ffffff;      /* Elevated/card areas */

  /* === BORDERS === */
  --border: #dfe3e8;         /* Standard borders */
  --border-strong: #c2c9d1;  /* Emphasized borders */

  /* === TEXT === */
  --text: #16191d;           /* Primary text */
  --text-muted: #5a6470;     /* Secondary/muted text */

  /* === ACCENT & BRAND === */
  --accent: #1a4fa0;         /* Primary action color (blue) */
  --accent-soft: #eaf0fb;    /* Accent background */
  --brand: #00888f;          /* PXP brand color (teal) */

  /* === STATUS COLORS === */
  --good: #0b6c39;           /* Green - success/passing */
  --good-bg: #e5f4ec;        /* Green background */
  --average: #8a4b00;        /* Orange - needs improvement */
  --average-bg: #fdf0e0;     /* Orange background */
  --poor: #a3161a;           /* Red - failing/error */
  --poor-bg: #fdeaea;        /* Red background */

  /* === SEVERITY LEVELS === */
  --critical: #8b1116;       /* Critical/highest severity */
  --serious: #a3401a;        /* Serious severity */
  --moderate: #6b5300;       /* Moderate severity */
  --minor: #4a5563;          /* Minor severity */

  /* === LAYOUT === */
  --radius: 8px;             /* Border radius */
  --maxw: 1120px;            /* Max container width */

  /* === TYPOGRAPHY === */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* === SPACING SCALE === */
  --space-xs: 0.25rem;       /* 4px */
  --space-sm: 0.5rem;        /* 8px */
  --space-md: 1rem;          /* 16px */
  --space-lg: 1.5rem;        /* 24px */
  --space-xl: 2rem;          /* 32px */
  --space-2xl: 2.5rem;       /* 40px */
  --space-3xl: 4rem;         /* 64px */
}

/* === DARK MODE === */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171b;              /* Dark background */
    --bg-sunken: #1b1f24;       /* Darker recessed */
    --bg-raised: #1f242a;       /* Slightly lighter elevated */
    --border: #333a42;          /* Lighter borders for contrast */
    --border-strong: #4a535d;
    --text: #e8ebee;            /* Light text */
    --text-muted: #a3adb8;      /* Muted light text */
    --accent: #7aa7f0;          /* Lighter blue for dark mode */
    --accent-soft: #1d2a3f;     /* Dark blue background */
    --brand: #62c7c9;           /* Lighter teal */
    --good: #5cc98d;            /* Lighter green */
    --good-bg: #14302180;       /* Semi-transparent */
    --average: #e0a458;         /* Lighter orange */
    --average-bg: #3a2a1080;
    --poor: #f08a8a;            /* Lighter red */
    --poor-bg: #3a191980;
    --critical: #f08a8a;
    --serious: #e8a06a;
    --moderate: #d9c26a;
    --minor: #9aa5b1;
  }
}

/* === PRINT MODE === */
@media print {
  :root {
    --bg: #ffffff;
    --bg-sunken: #ffffff;
    --bg-raised: #ffffff;
    --border: #000000;
    --border-strong: #000000;
    --text: #000000;
    --text-muted: #666666;
  }
}