/**
 * Design Tokens — CSS custom properties for DeepThought.
 *
 * Centralizes colors, typography, spacing, z-index layers,
 * and layout dimensions. Replaces hardcoded values throughout
 * the codebase incrementally.
 */

:root {
  /* ── Color Palette ── */

  /* Neutrals */
  --dt-white: #ffffff;
  --dt-black: #000000;
  --dt-gray-50: #f9f9f9;
  --dt-gray-100: #f5f5f5;
  --dt-gray-200: #eeeeee;
  --dt-gray-300: #dddddd;
  --dt-gray-400: #cccccc;
  --dt-gray-500: #999999;
  --dt-gray-600: #666666;
  --dt-gray-700: #555555;
  --dt-gray-800: #404040;
  --dt-gray-900: #333333;

  /* Primary (teal) */
  --dt-primary: #55add0;
  --dt-primary-light: #88d2f0;
  --dt-primary-lighter: #C9EFFF;
  --dt-primary-dark: #3a8fb0;

  /* Semantic */
  --dt-success: #62c462;
  --dt-success-light: #d6f5d6;
  --dt-success-bg: #CDFFCD;
  --dt-error: #ee5f5b;
  --dt-error-light: #FFCCCB;
  --dt-error-dark: #cc0000;
  --dt-warning: #f89406;
  --dt-warning-light: #ffd966;
  --dt-info: #4a90d9;

  /* Backgrounds */
  --dt-bg-main: #D7DBE5;
  --dt-bg-panel: #EFEFEF;
  --dt-bg-dark: #1A171E;
  --dt-bg-light: #fffde7;
  --dt-bg-dialog: #EFEFEF;
  --dt-bg-chooser: #E5E4E2;
  --dt-bg-highlight: #fff085;

  /* Block colors */
  --dt-block-base: #FF8E7C;
  --dt-block-derived: #B0FFB0;
  --dt-block-goal: #FFD27F;
  --dt-block-subgoal: #FFB347;

  /* Rule panel */
  --dt-rule-extract: #C9EFFF;
  --dt-rule-construct: #88d2f0;
  --dt-rule-transform: #55add0;
  --dt-rule-hover: #fff085;
  --dt-rule-highlight: #00e6e6;

  /* Affect feedback */
  --dt-affect-delighted: #2ecc40;
  --dt-affect-flow: #3b82f6;
  --dt-affect-confused: #f59e0b;
  --dt-affect-stuck: #ef4444;
  --dt-affect-bored: #8b5cf6;

  /* GPP */
  --dt-gpp: #ffff00;

  /* ── Typography ── */

  --dt-font-primary: Arial, Helvetica, sans-serif;
  --dt-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

  --dt-text-xs: 10px;
  --dt-text-sm: 12px;
  --dt-text-base: 14px;
  --dt-text-md: 15px;
  --dt-text-lg: 16px;
  --dt-text-xl: 18px;
  --dt-text-2xl: 24px;

  --dt-weight-normal: 400;
  --dt-weight-medium: 500;
  --dt-weight-semibold: 600;
  --dt-weight-bold: 700;

  --dt-line-height: 1.4;

  /* ── Spacing ── */

  --dt-space-1: 2px;
  --dt-space-2: 4px;
  --dt-space-3: 6px;
  --dt-space-4: 8px;
  --dt-space-5: 10px;
  --dt-space-6: 12px;
  --dt-space-7: 15px;
  --dt-space-8: 20px;
  --dt-space-9: 24px;
  --dt-space-10: 32px;

  /* ── Border Radius ── */

  --dt-radius-sm: 3px;
  --dt-radius-md: 6px;
  --dt-radius-lg: 8px;
  --dt-radius-xl: 12px;

  /* ── Z-Index Layers ── */
  /* NOTE: --dt-z-modal-content must mirror DialogManager.BASE_Z in js/ui/DialogManager.js. */

  --dt-z-base: 1;
  --dt-z-elevated: 10;
  --dt-z-dropdown: 100;
  --dt-z-sticky: 1000;
  --dt-z-overlay: 9000;          /* persistent annotation panels (e.g. #instructionOverlay) */
  --dt-z-notification: 9700;     /* toast / transient notifications */
  --dt-z-modal-backdrop: 9900;   /* DialogManager backdrop floor (JS overrides per-stack) */
  --dt-z-loading: 9950;          /* blocking loading spinner, below modals */
  --dt-z-modal-content: 10000;   /* DialogManager BASE_Z; modal dialogs stack above */
  --dt-z-tooltip: 11000;         /* ephemeral hover popups, above any modal stack */
  --dt-z-intro: 95000;           /* escape-hatch intro flow */

  /* ── Layout ── */

  --dt-canvas-size: 498px;
  --dt-sidebar-width: 240px;
  --dt-right-col-width: 498px;
  --dt-main-max-width: 1290px;
  --dt-main-min-width: 900px;

  /* ── Transitions ── */

  --dt-transition-fast: 150ms ease;
  --dt-transition-normal: 250ms ease;
  --dt-transition-slow: 400ms ease;

  /* ── Shadows ── */

  --dt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --dt-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
  --dt-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.2);
}