@layer theme {
  :root {
    /* Backgrounds */
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #0f3460;
    --bg-surface: #1e2a4a;

    /* Text */
    --text-primary: #e8e8e8;
    --text-secondary: #a0a0b0;
    --text-muted: #8a8a9a;

    /* Accent */
    --accent: #e94560;
    --accent-hover: #ff6b81;

    /* Critical / fail roll highlights */
    --crit-color: #4eff4e;
    --crit-bg: rgba(78, 255, 78, 0.1);
    --fail-color: #ff4e4e;
    --fail-bg: rgba(255, 78, 78, 0.1);

    /* Borders */
    --border-color: #2a2a4a;
    --border-color-focus: #4a4a8a;

    /* Buttons */
    --btn-bg: #2a2a4a;
    --btn-hover: #3a3a5a;
    --btn-danger: #8b2035;
    --btn-danger-hover: #a52840;

    /* Inputs */
    --input-bg: #12122a;
    --input-border: #2a2a4a;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);

    /* Toast */
    --toast-bg: #2a2a4a;
    --toast-text: #e8e8e8;
  }
}