/* 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%;

    /* Flipchart Rewers (flip side of /flipchart/; RGB triplets feed rgba() alpha variants) */
    --color-flipchart-reverse-paper: #fffcf5;
    --color-flipchart-reverse-paper-hsl: 42 100% 98%;
    --color-flipchart-reverse-paper-rgb: 255, 252, 245;
    --color-flipchart-reverse-ink-rgb: 31, 27, 23;
    --color-flipchart-reverse-ink-soft-rgb: 58, 48, 38;
    --color-flipchart-reverse-accent-rgb: 71, 111, 255;
    --color-flipchart-reverse-accent-deep-rgb: 28, 104, 235;
    --color-flipchart-reverse-attach: #2bd94a;
    --color-flipchart-reverse-attach-hsl: 131 69.4% 51.2%;
    --color-flipchart-reverse-cool-rgb: 247, 249, 252;
    --color-flipchart-reverse-cool-solid: #dfe5ed;
    --color-flipchart-reverse-parchment-rgb: 233, 226, 213;
    --color-flipchart-reverse-page-bg: #d8d3c9;
    --color-flipchart-reverse-page-bg-light: #e4dfd5;

}