/* ReportON color system
   --------------------------------------------------------------
   Base palette is inherited verbatim from the product's MUI theme
   (web-ui/src/theme/palette.js). Primary is ReportON orange.
   Each color family ships lighter/light/main/dark/darker ramps so
   surfaces, borders and text can all be tinted from one hue. */

:root {
  /* ---- Primary (ReportON orange) ---- */
  --primary-lighter: #FEF4D4;
  --primary-light:   #FED680;
  --primary-main:    #f79023;
  --primary-dark:    #B86B1A;
  --primary-darker:  #784611;
  --primary-contrast:#ffffff;
  /* the deep orange used in the logo wordmark + special accents */
  --primary-special: #e86f31;
  --brand-orange:    #FF6600;

  /* ---- Secondary (blue) ---- */
  --secondary-lighter: #D6E4FF;
  --secondary-light:   #84A9FF;
  --secondary-main:    #3366FF;
  --secondary-dark:    #1939B7;
  --secondary-darker:  #091A7A;
  --secondary-contrast:#ffffff;

  /* ---- Semantic ---- */
  --info-lighter:    #D0F2FF;
  --info-light:      #74CAFF;
  --info-main:       #1890FF;
  --info-dark:       #0C53B7;
  --info-darker:     #04297A;

  --success-lighter: #E9FCD4;
  --success-light:   #AAF27F;
  --success-main:    #54D62C;
  --success-dark:    #229A16;
  --success-darker:  #08660D;

  --warning-lighter: #FFF7CD;
  --warning-light:   #FFE16A;
  --warning-main:    #FFC107;
  --warning-dark:    #B78103;
  --warning-darker:  #7A4F01;

  --error-lighter:   #FFDED3;
  --error-light:     #FAA09B;
  --error-main:      #EB6B63;
  --error-dark:      #D4554E;
  --error-darker:    #A6322F;

  /* ---- Grey ramp ---- */
  --grey-0:   #FFFFFF;
  --grey-100: #F9FAFB;
  --grey-200: #F4F6F8;
  --grey-300: #DFE3E8;
  --grey-400: #C4CDD5;
  --grey-500: #aeaeae;
  --grey-600: #637381;
  --grey-700: #454F5B;
  --grey-800: #212B36;
  --grey-900: #161C24;
  /* transparent greys (built from #919EAB) — overlays, dividers, fills */
  --grey-500-8:  rgba(145, 158, 171, 0.08);
  --grey-500-12: rgba(145, 158, 171, 0.12);
  --grey-500-16: rgba(145, 158, 171, 0.16);
  --grey-500-24: rgba(145, 158, 171, 0.24);
  --grey-500-32: rgba(145, 158, 171, 0.32);
  --grey-500-48: rgba(145, 158, 171, 0.48);
  --grey-500-56: rgba(145, 158, 171, 0.56);
  --grey-500-80: rgba(145, 158, 171, 0.80);

  /* ---- Gradients ---- */
  --gradient-primary: linear-gradient(to right, #D4554E, #f79023); /* @kind color */
  --gradient-warm:    linear-gradient(to right, #feeddb, #ffffff); /* @kind color */

  /* =============================================================
     SEMANTIC ALIASES — prefer these in components & layouts
     ============================================================= */
  --text-primary:    var(--grey-800);
  --text-secondary:  var(--grey-600);
  --text-disabled:   #b2b2b2;
  --text-on-primary: #ffffff;

  --surface-page:    #ffffff;       /* app background */
  --surface-card:    #ffffff;       /* paper / cards */
  --surface-neutral: var(--grey-200);
  --surface-subtle:  #f5f8fb;       /* customGrey — panels, table heads */
  --surface-warm:    #feeddb;       /* warm orange-tinted wash */

  --border-default:  var(--grey-300);
  --border-strong:   var(--grey-400);
  --border-field:    var(--grey-500-32);
  --divider:         var(--grey-500-24);

  --action-hover:    var(--grey-500-8);
  --action-selected: var(--grey-500-16);
  --action-disabled: var(--grey-500-80);
  --action-disabled-bg: var(--grey-500-24);
  --action-focus:    var(--grey-500-24);

  --focus-ring:      var(--primary-main);
}