/* 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;
  --brand-lightbg: #f2f9f8;
  --brand-lightbg-text: #08785f;
  --brand-lightbg-border: #d8f2ea;
  --brand-logo-height: 33.4px;
  
  /* 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 */
  --bg-surface-5: #F0FAF7;             /* hover for label select */
  
  /* Borders */
  --border: #d3d3d3;
  --border-soft: #dddfe3;
  --border-strong: #262626;
  --border-brand-color: #94d2c5;
  --border-surface-5: #CFE9E1; /* hover for label select */
  
  /* 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);
  --shadow-surface-5: #E6F5F2; /* hover for label select */

  /* Buttons */
  --btn-bg: linear-gradient(135deg, #009b7d 0%, #087a65 100%);
  --btn-bg-hover: linear-gradient(135deg, #008d72 0%, #066b58 100%);
  --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: 16px;
  --radius-xl: 26px;
  --radius-pill: 100px;

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

  /* Free public slot */
  --free-public-slot-background: #48d197;
  --free-public-slot-border-color: #48d197;
  --free-public-slot-color: #333534;
  --free-public-slot-hover-background: #59d3b1;
}