/* Core GUI variables
*/

:root {
  /* Brand */
  --brand-primary: #009b7d; /* Green */
  --brand-primary-2: #0da192;          /* used for shadows/glow */
  --brand-primary-hover: #75ddc0;       /* hover background for round button */
  --brand-link: #158c71;

  /* Neutrals */
  --color-text: #333333;
  --color-text-strong: #000000;
  --color-text-muted: #555555;
  --color-text-soft: #777777;

  /* Surfaces */
  --bg-page: #eef2f7;
  --bg-surface: #ffffff;
  --bg-surface-2: #f5f6f8;             /* cards + menu button background */
  --bg-surface-3: #e4e6eb;             /* secondary buttons / blocks */
  --bg-surface-4: #d8dadf;             /* hover for surface-3 */

  /* Borders */
  --border: #d3d3d3;
  --border-soft: #dddfe3;
  --border-strong: #262626;

  /* Shadows */
  --shadow-soft: 0 0 24px rgb(74 85 95 / 10%);
  --shadow-hover: 0 0 24px rgb(74 85 95 / 30%);
  --shadow-header: 0 20px 20px -20px rgba(100,100,100,1);

  /* Buttons */
  --btn-bg: #000000;
  --btn-bg-hover: #333333;
  --btn-text: #ffffff;

  --btn-secondary-bg: var(--bg-surface-3);
  --btn-secondary-bg-hover: var(--bg-surface-4);
  --btn-secondary-text: #000000;

  --btn-blue: #257ac7;
  --btn-blue-hover: #236eb3;

  /* Status / semantic */
  --success: #04AA6D;
  --connected: #28a745;
  --disconnected: #6c757d;

  --warning: orange;

  --danger: #d9343b;
  --danger-dark: #b32a30;

  /* Stepper */
  --step-line: #edf3f3;

  /* Footer */
  --footer-link: #7c7c7c;
  --footer-text: #ebebeb;

  /* Radius (optional, useful later) */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 100px;

  /* Misc */
  --focus: #000000;
  
   /* Free slot */
  --free-slot-background-color: #75ddc0;
  --free-slot-border-color: #17aa89;
  --free-slot-color: #333534;
  --free-slot-hover-background-color: #59d3b1;
}