/* =============================================================================
   SIMSCALE — SEMANTIC COLOUR TOKENS

   These tokens define meaning, not raw colour.
   Always use these in components — never use global-colours.css directly.

   Depends on: global-colours.css (must be loaded first)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   BACKGROUND
   Surface colours for containers, panels, and overlays.
   ----------------------------------------------------------------------------- */
:root {
  --bg:                    var(--neutral-50);     /* default page/panel background */
  --bg-weaker:             var(--neutral-100);    /* slightly recessed surface */
  --bg-weak:               var(--neutral-200);    /* recessed surface */
  --bg-bolder:             var(--neutral-400);    /* prominent surface */
  --bg-inverse:            var(--neutral-900);    /* dark/inverted surface */
  --bg-inverse-weaker:     var(--neutral-700);    /* less dark inverted surface */
  --bg-inverse-weak:       var(--neutral-500);    /* mid-dark inverted surface */
  --bg-primary:            var(--neutral-1000);   /* near-black primary surface */
  --bg-accent:             var(--primary-800);    /* blue accent surface */
  --bg-accent-weak:        var(--primary-300);    /* lighter blue accent surface */
  --bg-accent-weaker:      var(--primary-200);    /* very light blue accent surface */
  --bg-modal:              var(--neutral-1050);   /* modal overlay (semi-transparent dark) */
  --bg-transparent:        var(--neutral-0);      /* fully transparent */
  --bg-transparent-weak:   rgba(255, 255, 255, 0.8); /* semi-transparent white — opacity value, no global token */
}

/* Background — action states */
:root {
  --bg-action:                   var(--neutral-50);
  --bg-action-hover:             var(--neutral-50);
  --bg-action-active:            var(--neutral-50);
  --bg-action-weaker:            var(--neutral-50);
  --bg-action-weaker-hover:      var(--primary-100);
  --bg-action-weaker-active:     var(--primary-200);
  --bg-action-inverse:           var(--neutral-1000);
  --bg-action-inverse-hover:     var(--neutral-900);
  --bg-action-inverse-active:    var(--neutral-800);
  --bg-action-primary:           var(--neutral-1000);
  --bg-action-primary-hover:     var(--primary-700);
  --bg-action-primary-active:    var(--primary-800);
  --bg-action-transparent:       var(--neutral-0);
}

/* Background — disabled states */
:root {
  --bg-action-disabled:                 var(--neutral-400);
  --bg-action-disabled-weak:            var(--neutral-200);
  --bg-action-disabled-weaker:          var(--neutral-100);
  --bg-action-disabled-inverse:         var(--neutral-50);
  --bg-action-primary-disabled:         var(--neutral-400);
  --bg-action-primary-disabled-weaker:  var(--neutral-100);
  --bg-action-destructive-disabled:     var(--neutral-50);
}

/* Background — destructive states */
:root {
  --bg-action-destructive:        var(--neutral-50);
  --bg-action-destructive-hover:  var(--red-100);
  --bg-action-destructive-active: var(--red-200);
}

/* Background — status */
:root {
  --bg-status-generic:       var(--neutral-600);
  --bg-status-generic-weak:  var(--neutral-300);
  --bg-status-info:          var(--primary-900);
  --bg-status-info-weak:     var(--primary-100);
  --bg-status-warning:       var(--yellow-700);
  --bg-status-warning-weak:  var(--yellow-100);
  --bg-status-success:       var(--green-600);
  --bg-status-success-weak:  var(--green-100);
  --bg-status-alert:         var(--red-700);
  --bg-status-alert-weak:    var(--red-100);
  --bg-status-stopped:       var(--orange-600);
  --bg-status-stopped-weak:  var(--orange-100);
}

/* Background — assignment */
:root {
  --bg-assignment-master:       var(--turquoise-100);
  --bg-assignment-master-hover: var(--turquoise-200);
  --bg-assignment-slave:        var(--pink-100);
  --bg-assignment-slave-hover:  var(--pink-200);
  --bg-assignment-lime:         var(--lime-100);
  --bg-assignment-lime-hover:   var(--lime-200);
}


/* -----------------------------------------------------------------------------
   FOREGROUND (text and icon colours)
   ----------------------------------------------------------------------------- */
:root {
  --fg-light:          var(--neutral-400);  /* placeholder / lightest text */
  --fg-weaker:         var(--neutral-500);  /* de-emphasised text */
  --fg-weak:           var(--neutral-600);  /* secondary text */
  --fg:                var(--neutral-700);  /* default body text */
  --fg-strong:         var(--neutral-900);  /* headings / emphasis */
  --fg-negative:       var(--neutral-50);   /* text on dark backgrounds */
  --fg-primary-accent: var(--primary-800);  /* link / accent text */
  --fg-destructive:    var(--red-900);      /* error / destructive text */
}

/* Foreground — action states */
:root {
  --fg-action:                    var(--neutral-900);
  --fg-action-hover:              var(--primary-700);
  --fg-action-active:             var(--primary-800);
  --fg-action-strong:             var(--neutral-900);
  --fg-action-strong-hover:       var(--primary-700);
  --fg-action-strong-active:      var(--primary-800);
  --fg-action-primary:            var(--neutral-1000);
  --fg-action-primary-hover:      var(--primary-700);
  --fg-action-primary-active:     var(--primary-800);
  --fg-action-negative:           var(--neutral-50);
  --fg-action-negative-hover:     var(--neutral-50);
  --fg-action-negative-active:    var(--neutral-50);
}

/* Foreground — disabled states */
:root {
  --fg-action-disabled:              var(--neutral-400);
  --fg-action-primary-disabled:      var(--neutral-400);
  --fg-action-destructive-disabled:  var(--red-400);
  --fg-action-negative-disabled:     var(--neutral-50);
}

/* Foreground — destructive states */
:root {
  --fg-action-destructive:        var(--red-800);
  --fg-action-destructive-hover:  var(--red-700);
  --fg-action-destructive-active: var(--red-700);
}

/* Foreground — status */
:root {
  --fg-status-generic:    var(--neutral-600);
  --fg-status-disabled:   var(--neutral-400);
  --fg-status-info:       var(--primary-1000);
  --fg-status-warning:    var(--yellow-700);
  --fg-status-success:    var(--green-600);
  --fg-status-alert:      var(--red-800);
  --fg-status-stopped:    var(--orange-700);
}

/* Foreground — assignment */
:root {
  --fg-assignment-master: var(--turquoise-800);
  --fg-assignment-slave:  var(--pink-800);
  --fg-assignment-lime:   var(--lime-800);
}


/* -----------------------------------------------------------------------------
   BORDER
   ----------------------------------------------------------------------------- */
:root {
  --border-weak:    var(--neutral-300); /* subtle dividers */
  --border:         var(--neutral-500); /* default border */
  --border-inverse: var(--neutral-50);  /* border on dark surface */
}

/* Border — action states */
:root {
  --border-action:                var(--neutral-400);
  --border-action-hover:          var(--primary-700);
  --border-action-active:         var(--primary-800);
  --border-action-weak:           var(--neutral-300);
  --border-action-weak-hover:     var(--primary-700);
  --border-action-weak-active:    var(--primary-800);
  --border-action-primary:        var(--stone-1000);
  --border-action-primary-hover:  var(--primary-700);
  --border-action-primary-active: var(--primary-800);
}

/* Border — disabled states */
:root {
  --border-action-disabled-weaker:      var(--neutral-200);
  --border-action-disabled:             var(--neutral-400);
  --border-action-primary-disabled:     var(--neutral-400);
  --border-action-destructive-disabled: var(--red-200);
}

/* Border — destructive states */
:root {
  --border-action-destructive:        var(--red-800);
  --border-action-destructive-hover:  var(--red-600);
  --border-action-destructive-active: var(--red-700);
}

/* Border — status */
:root {
  --border-status-generic:  var(--neutral-400);
  --border-status-info:     var(--primary-1000);
  --border-status-warning:  var(--yellow-700);
  --border-status-success:  var(--green-600);
  --border-status-alert:    var(--red-700);
  --border-status-stopped:  var(--orange-600);
}

/* Border — assignment */
:root {
  --border-assignment-master: var(--turquoise-700);
  --border-assignment-slave:  var(--pink-700);
  --border-assignment-lime:   var(--lime-700);
}


/* -----------------------------------------------------------------------------
   LOGO
   ----------------------------------------------------------------------------- */
:root {
  --logo-primary: var(--primary-700); /* blue accent in logo mark */
  --logo:         var(--stone-900);   /* main logo wordmark (near-black) */
}


/* -----------------------------------------------------------------------------
   UTILITY — Focus ring
   ----------------------------------------------------------------------------- */
:root {
  --focus-ring: var(--primary-800);
}


/* -----------------------------------------------------------------------------
   UTILITY — Shade / Drop shadows
   Opacity-based values — cannot reference global tokens directly.
   ----------------------------------------------------------------------------- */
:root {
  --shade:                rgba(51, 51, 51, 0.15);   /* general elevation shadow */
  --drop-shadow-primary:  rgba(0, 94, 134, 0.10);   /* teal-tinted shadow for primary elements (production) */
  --drop-shadow-inverse:  var(--neutral-50);         /* white shadow for inverse surfaces */
}


/* -----------------------------------------------------------------------------
   UTILITY — Intercom widget
   ----------------------------------------------------------------------------- */
:root {
  --intercom-bg:   var(--neutral-50);
  --intercom-icon: var(--neutral-1000);
}


/* -----------------------------------------------------------------------------
   UTILITY — AI gradient colours
   ----------------------------------------------------------------------------- */
:root {
  --ai-weak-start:   var(--primary-100);   /* very light blue — start of subtle gradient */
  --ai-weak-end:     var(--green-100);     /* light green — end of subtle gradient */
  --ai-strong-start: var(--primary-900);   /* deep blue — vivid gradient start */
  --ai-strong-mid:   var(--primary-1000);  /* darkest blue — vivid gradient middle */
  --ai-strong-end:   var(--green-500);     /* green — vivid gradient end */
}


/* -----------------------------------------------------------------------------
   POINTER (physics simulation type indicators)
   ----------------------------------------------------------------------------- */

/* Pointer — Background */
:root {
  --pointer-bg-mechanical:              var(--neutral-500);
  --pointer-bg-mechanical-hover:        var(--green-300);
  --pointer-bg-mechanical-active:       var(--green-500);
  --pointer-bg-flow:                    var(--neutral-500);
  --pointer-bg-flow-hover:              var(--primary-500);
  --pointer-bg-flow-active:             var(--primary-1000);
  --pointer-bg-thermal:                 var(--neutral-500);
  --pointer-bg-thermal-hover:           var(--red-300);
  --pointer-bg-thermal-active:          var(--red-600);
  --pointer-bg-electromagnetics:        var(--neutral-500);
  --pointer-bg-electromagnetics-hover:  var(--purple-300);
  --pointer-bg-electromagnetics-active: var(--purple-800);
}

/* Pointer — Line */
:root {
  --pointer-line-mechanical:               var(--neutral-500);
  --pointer-line-mechanical-hover:         var(--green-300);
  --pointer-line-mechanical-active:        var(--green-500);
  --pointer-line-flow:                     var(--neutral-500);
  --pointer-line-flow-hover:               var(--primary-500);
  --pointer-line-flow-active:              var(--primary-1000);
  --pointer-line-thermal:                  var(--neutral-500);
  --pointer-line-thermal-hover:            var(--red-300);
  --pointer-line-thermal-active:           var(--red-600);
  --pointer-line-electromagnetics:         var(--neutral-500);
  --pointer-line-electromagnetics-hover:   var(--purple-300);
  --pointer-line-electromagnetics-active:  var(--purple-800);
}