/* Shared color palette - colors used across the system.
   Keep HEX and HSL pairs synchronized. HSL tokens are for Tailwind/shadcn opacity syntax. */
:root {
    /* Backgrounds */
    --color-bg-main: #1a1a1a;
    --color-bg-main-hsl: 0 0% 10.2%;
    --color-bg-panel: #2a2a2a;
    --color-bg-panel-hsl: 0 0% 16.5%;

    /* Text */
    --color-text-primary: #e0e0e0;
    --color-text-primary-hsl: 0 0% 87.8%;

    /* Neutral grays */
    --color-gray-100: #3a3a3a;
    --color-gray-100-hsl: 0 0% 22.7%;
    --color-gray-300: #555555;
    --color-gray-300-hsl: 0 0% 33.3%;
    --color-gray-500: #6b7280;
    --color-gray-500-hsl: 220 8.9% 46.1%;
    --color-gray-600: #999999;
    --color-gray-600-hsl: 0 0% 60%;

    /* Accent colors */
    --color-success: #4caf50;
    --color-success-hsl: 122 39.4% 49.2%;
    --color-success-dark: #3d7638;
    --color-success-dark-hsl: 115 35.6% 34.1%;
    --color-warning: #ffc107;
    --color-warning-hsl: 45 100% 51.4%;
    --color-warning-accent: #81c784;
    --color-warning-accent-hsl: 123 38.5% 64.3%;
    --color-position-neon: #7fffd4;
    --color-position-neon-hsl: 160 100% 74.9%;

    /* Pure black / white */
    --color-black: #000;
    --color-black-hsl: 0 0% 0%;
    --color-white-pure: #fff;
    --color-white-pure-hsl: 0 0% 100%;

    /* Danger / 1-token button */
    --color-danger-hover-border: #8b0000;
    --color-danger-hover-border-hsl: 0 100% 27.3%;

    /* Semantic status */
    --color-error: #c62828;
    --color-error-hsl: 0 66.4% 46.7%;
    --color-status-warn-border: #ff9800;
    --color-status-warn-border-hsl: 36 100% 50%;

    /* Tags (infographic labels) */
    --color-tag-selected-bg: #0f3d2e;
    --color-tag-selected-bg-hsl: 160 60.5% 14.9%;

}